Specifikace HTML pro nasazení do iBillboard Ad Server

Data volume of HTML5 banners

• depends on banner format
• follow site specification where a banner will be displayed or by SPIR specification
• banner data contains: bites for displaying, fonts, libraries, external images, etc. It is enough to check volume of file with used poject creatives and in case external fonts are used, check what browser transfers.
• in general, banners should not exceed maximal volume 100 kB

Tips for reducing data size:

• use the least images as possible but use CSS
• choose appropriate image format (.jpg, .png, .gif)
  Choose image format according to final result and its behaviour
  • .jpg - for photographies with large scale of colours
  • .png - for icons, illustrations and pictures with transparent background
  • .gif - for simple illustration with fewer colours
• check if a used banner is in final ratio 1:1 = source is not bigger than visible area or dimension in a banner
• optimize / reduce colours (.gif, .png) or increase compression (.jpg)
• check script code of html and css
  When creating CSS from generators, big results are produced - it changes invisible parts and presumes even what will not appear.
• extract html, css comments and unused parts of code from the script
• use external libraries and fonts only if necessary and website will not be affected

Link from banner to target site of a client

Links in the HTML banner is defined in body by <a> with attribute href and target. Link to href may be random - it will be changed to dynamic variable when banner is upload to a system.

Insert value _top in target link (html attribute target), which can be also changed during insertion to the system. The value _top opens website in current window even a banner is inserted via iframe.

Within the iBB AdServer, the following code is inserted between <script></script> tags into head of HTML document. The document secures transfer of variable, click counting and replaces values of href attribute for adequate REDIRECT variable.

function getQueryParam(paramName){

var qs=location.search;

qs=qs.substr(qs.indexOf("?")+1);

allParams=qs.split("&");

for (var i=0;i<allParams.length;i++) {

keyVal=allParams[i].split("=");

if (keyVal[0]==paramName){

return unescape(keyVal[1]);

}

}

return null;

}

document.addEventListener("DOMContentLoaded", function(event) {

var aredir = document.getElementsByTagName('a'); for

( i=0; i<aredir.length; i++){

 aredir[i].href= getQueryParam('redir');

 aredir[i].target= getQueryParam('bbtarget');

}

 });

Other banner elements

Individual sources of graphic element, prospective CSS files and JavaScript libraries should be defined without any sub-files - e.g. as example below in one root directory:

<img src=“logo.jpg“>

not

<img src=“obrazky/logo.jpg“>

TIP: Images can be written as data src in Base64 encode, image is not then taken exteral file (another call from browser) but as data written in <img> . converter e.g. here

Test of banner behaviour in standard and mobile browsers is fully controlled by creative creator/ supplier.