AdServer v2 - Specifikace HTML pro nasazení do iBillboard Ad Server

Specifikace HTML pro nasazení do iBillboard Ad Server
DaSt
2017/07/25 11:42

Tabulka obsahu
Datová velikost HTML5 bannerů 	 # 
Prokliky z banneru na cílovou stránku klienta 	 # 
Ostatní prvky banneru 	 # 

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

Page  - naposledy upravil(a) DaSt - 2017/07/25 11:42