Technické specifikace reklamních formátů v HTML5

Kód pro nasazení jako richmedia je tvořen vlastním HTML kódem, který bude do stránky vložen ve značce iframe. Případné externí soubory, jako obrázky, jsou dodány společně s kódem a v kódu jsou odkazované s relativní cestou a bez podadresářů.

Prokliky z banneru

Prokliky v HTML banneru definujeme v těle banneru pomocí <a> s atributem href a target. Odkaz do href můžeme dát libovolný – bude změněn na dynamickou proměnnou při nasazení banneru do reklamního systému.

U cíle odkazu (html atribut target), který také může být změněn při vložení do reklamního systému, vložíme hodnotu _top případně _blank (otevře v prohlížeči v původním okně i kdyby byl banner vložen přes iframe).

V rámci iBB Ad Server vkládáme následující kód mezi <script></script> tagy do hlavičky HTML dokumentu. (Zajistí předávání proměnné a počítání kliknutí v Ad Server systému a zároveň nahradí hodnoty href atributu za odpovídající REDIRECT proměnnou.)

<script>
function getQueryParam(paramName) {
 
var qs=location.search;
qs=qs.substr(qs.indexOf("?")+1);
allParams=qs.split("&");
for (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');
}
}); 
</script>

Před odevzdáním

Před odevzdáním banneru otestujeme ve všech aktuálních prohlížečích - minimálně v trojici Explorer (10+), Firefox, Chrome.  Ideálně i v mobilních verzích prohlížečů.

Otestování chování banner ve standardních i mobilních prohlížečích je plně v režii výrobce/dodavatele kreativy.

Datová velikost HTML 5 bannerů zůstává stejná a více informací naleznete v ceníku.

Pomocné nástroje

Online konverze SWF do HTML5 - https://developers.google.com/swiffy/

Komprese PNG - https://tinypng.com/

WYSIWYG editor HTML5, CSS3  animací - http://html5maker.com/app

Nástroje pro HTML5: http://html5maker.com, http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/