HTML5 banner - technické specifikace

Jedná se o zcela plnohodnotný fragment HTML, který bude do stránky vložen ve značce iframe. Může obsahovat HTML, CSS i JavaScript.

Interaktivita a animace v rámci kreativy může být dosažena například pomocí tzv. CSS transitions, popřípadě pomocí změny stylů řízené JavaScriptem nebo pomocí technologie canvas. Může jít i o zkonvertovaný flash banner pomocí nástroje https://developers.google.com/swiffy/.

Pozor! Za správné zobrazení v jednotlivých prohlížečích odpovídá výrobce, který musí zajistit bezproblémovou funkčnost ve všech majoritních prohlížečích, včetně mobilních verzí, a to včetně správné funkčnosti s ohledem na obvyklou rychlost připojení uživatele k internetu.

Rozměry banneru: Dle požadované pozice (leaderboard, square, skyscraper, atd.)

Datová velikost: Max. 200 KB pro standardní bannery, max. 5 MB pro video

Definice prokliku:

a) Standardní HTML5 banner

Proklik je realizován přes níže uvedený javascriptový kód. Tento kód je nutno vložit před uzavírací tag </body>. Target odkazu musí být nastaven (může směřovat do "_top", "_blank", popř. "_parent"). Soubor s bannerem musí být pojmenován "index.html".
Iframe s bannerem se pak volá s parametrem src="..../index.html?clickthru=http://www.cilovaadresa.cz/" - v tomto případě skript nahradí u všech tagů "a" v banneru hodnotu atributu "href" hodnotou parametru "clickthru". Pokud je potřeba mít více různých prokliků, je možné použít "clickthru1" až "clickthrun", kde n je > 1 - v takovém případě se nahradí "href" odpovídající hodnotou clickthru1 jen u toho tagu "a", jehož atribut "id" se rovná "clickthru1", a obdobně pro clicktrhu2, clickthru3, atd.

JavaScript:

<script type="text/javascript">

function getUrlVars() {

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

var k = 0

var lasthash = ''

var pat = new RegExp(/^clickthru\d{0,2}$/i);

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

hash = hashes[i].split('=');

if (pat.test(hash[0])) {

lasthash = hash[0]

vars.push(lasthash);

vars[lasthash] = hash[1];

for (j = 2; j < hash.length; j++) {

vars[lasthash] = vars[lasthash] + '=' + hash[j];

}

} else if (lasthash != '') {

vars[lasthash] = vars[lasthash] + '&' + hash[0]

for (j = 1; j < hash.length; j++) {

vars[lasthash] = vars[lasthash] + '=' + hash[j];

}

}

}

return vars;

}

parameters = getUrlVars();

var i, clickthru, anchors;

var n = '';

while ((typeof parameters['clickthru' + n] != "undefined") || n == '') {

if (typeof parameters['clickthru' + n] != "undefined") {

clickthru = decodeURIComponent(parameters['clickthru' + n]);

anchors = (typeof n == 'string')? document.getElementsByTagName("a") : [document.getElementById("clickthru" + n)];

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

anchors[i].href = clickthru;

}

}

n = (typeof n == 'string') ? 1 : n + 1;

}

</script>

b) Banner vytvořený z formátu *SWF konverzí pomocí nástroje swiffy

Proklik musí být v původním *SWF banneru definován v action scriptu dle specifikace Flash banner.