Specifikace HTML pro nasazení do iBillboard Ad Server

Specifikace HTML pro nasazení do iBillboard Ad Server

Specifikace HTML pro nasazení do iBillboard Ad Server
Zdeněk Vojkůvka
2016/03/02 10:38
AdServer v2 - Specifikace HTML pro nasazení do iBillboard Ad Server
Table of Contents
Data volume of HTML5 banners ......................................................................................................................................... 3
Link from banner to target site of a client .............................................................................................................................. 3
Other banner elements ............................................................................................................................................................ 4
Page 2 - last modified by Zdeněk Vojkůvka on 2016/03/02 10:38
AdServer v2 - 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');
}
Page 3 - last modified by Zdeněk Vojkůvka on 2016/03/02 10:38
AdServer v2 - Specifikace HTML pro nasazení do iBillboard Ad Server
});
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. Example of HTML5 banner creation may be found HERE
Page 4 - last modified by Zdeněk Vojkůvka on 2016/03/02 10:38