Specifikace HTML pro nasazení do iBillboard Ad Server

Datová velikost HTML5 bannerů

• záleží na formátu banneru
• řiďte se specifikacemi webu, kde bude reklama zobrazena nebo specifikací SPIR
• data banneru jsou veškeré přenesené bajty pro zobrazení, tedy i fonty, knihovny, externí obrázky atd. Stačí tedy zkontrolovat velikost složky s použitými soubory projektu a v případě externích fontů i co prohlížeč přenáší
• obecně platí, že bannery by neměly přesáhnout maximální velikost 100 KB

Tipy pro zmenšení datové velikosti:

• používejte co nejméně obrázků a co nejvíce využijte CSS
• vyberte vhodný formát obrázku (.jpg, .png, .gif)
  Formát obrázku vybírejte podle cílového výsledku a jeho vlastností
  • .jpg použijte na fotografie, kde je velká škála barev
  • .png použijte na ikony, ilustrace a obrázky s průhledným pozadím
  • .gif použijte na jednoduché ilustrace s menším počtem barev
• zkontrolujte, zda je použitý obrázek v cílovém poměru 1:1, tzn. není zdroj větší než je viditelná plocha nebo rozměr v banneru?
• zoptimalizujte/ zredukujte počet barev (gif, png) nebo zvyšte kompresi (.jpg).
• zkontrolujte kód skriptu, html a css
   U přípravy CSS z generátorů vznikají často velké výsledky, které dekorují i neviditelné části a pamatují i na to co nenastane
• odstraňte z kódu skriptu, html a css komentáře a nepoužité části kódu
• používejte externí knihovny a fonty, pouze jsou-li skutečně nezbytné a neovlivní-li nosnou stránku

Prokliky z banneru na cílovou stránku klienta

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 (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, který zajistí předávání proměnné a počítání kliknutí v iBB Ad Server a zároveň nahradí hodnoty href atributu za odpovídající REDIRECT proměnnou.

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');

}

 });

Ostatní prvky banneru

Jednotlivé zdroje grafických prvků a případných souborů CSS a javascriptových knihoven by měly být definovány bez podsložek, tzn. v jednom kořenovém adresáři. např. takto:

<img src=“logo.jpg“>

a ne

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

TIP: Obrázky lze zapsat jako data src v Base64 encode , obrázek potom není jako externí soubor (další volání z prohlížeče), ale jako data přímo zapsaná ve značce <img> . Převodník např. zde

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

Ukázku tvorby HTML5 banneru naleznete na stránkách SPIR ZDE