General Actions:
HTML5 banner
Last modified by ZdVo on 2019/04/09 11:00
What is necessary to know in case of HTML5 banners and which tools use?
To handle HTML 5 banners and HTML banner generally, we should know two basic things:
- The basics of structure HTML and CSS
- To have some editor for writing of HTML language (pspad, notepad ++ ...)
From administrator point of view it is important to know, that HTML 5 banner can be use with similar effect like in classic flash banner and except of this fact it has many advantages:
- Displaying on devices, which don't support flash (mobile devices)
- No additional plugin of browser is necessary.
HTML banners have disadvantages, too, which are manifested when they are inserted into Ad systems:
- Most of the HTML 5 and CSS3 functions are not supported by older browsers and in new updated browsers is support of their funcionality, within compatibility, different.
- It is still new thing, in spite of the fact, that HTML 5 has been supporting for some years by new browsers. Is put bigger emphasis on the person, who is responsible for creation of html 5 banner = each html 5 banner differs from another one. Unification is harder there.
- HTML 5 banner, which is created in bad way, might have negative influence on whole web page. From such reason is in Ad system prefered implementation through the iframe.
HTML banner most often consists of following files:
- Index.html, which is source code of whole banner construction.
- CSS file - necessary for proper display and design of banner. It could be external file, or inserted directly in head of html document, or banner designer can use inline write for particular html tag.
- External image pictures in GIF/PNG/JPG format
Preparation phase of insertion of HTML 5 banner in iBB Ad Server interface
- Checking of delivered source files:
Before, than we start with insertion into Ad Server system, we need to check whole files, which client sends to us. Main source file is mostly named as index.html. By click on index.html banner we check, if banner is displayed properly and all necessary files are available. If everything seem all right we can carry on with further step.
- Pack the HTML files to zip format and upload it to iBILLBOARD Ad Server banner.
- Uploaded zip archive is automatically extracted into individual files and folders.
- Insert following javascript code, which secure REDIRECTION:
It's necessary to insert it between tags <script type=text/javascript> </script>, anywhere in banner HTML code:
function getParameterByName(name) {
var match = RegExp('[?&]' + name +
'=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
document.addEventListener("DOMContentLoaded", function(event) {
var aClickTag = document.getElementsByTagName('a');
for (var i=0; i<aClickTag.length; i++){
aClickTag[i].href= getParameterByName('clickTag');
aClickTag[i].target= getParameterByName('bbtarget');
}
});
Now the banner is ready from technical point of view.
Implementation phase into iBB Ad Server:
Variable name is clickTag (IAB standard name) It exists two option how to secure displaying of HTML banner through Ad Server
- Into javascript version of banner we insert following template for iframe:
document.write ('<iframe src="%%URL%%index.html?clickTag=%%__REDIRECT_ENCODED%%&bbtarget=%%__TARGET%%" width="970" height="310" scrolling="no" style="margin:0px; border:0px" seamless></iframe>');
For width and height params set appropriate dimensions and by click on "insert" button we save it.
And that is all. We check in the real preview if the is displayed properly. Check with fiddler or firebug if redirect URL is performed and clicks are counted in Ad Server system.
- The second option is to use in-page script form IBB creative library. In in-page template is necessary to set dimensions of banner and eventually edit the name of main HTML banner file (Normally a name is index.html). It is necessary to secure, that value in 'use' option is set to 'page' as well.
