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. Velikost kreativy by neměla být fixní, neboť velikost reklamní pozice se může měnit s ohledem na displej použitého zařízení. Pro tento případ je doporučeno používat technologii media queries.

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. Animaci pomocí technologie canvas nedoporučujeme, kvůli nutnosti pevného rozměru canvasu.

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í.


Ukázka HTML 5 banneru
Zdrojové soubory ke stažení


Specifikace dle nápovědy Adwords pro grafické reklamy

  • animace max. 30 sekund dlouhá
  • velikost souboru max. 150 kB
  • banner musí být vytvořen v GWD

Definice prokliku

Proklik je realizován přes 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".

JavaScript

<script type="text/javascript">	
function getUrlVars() {
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}
parameters = getUrlVars();
var i, clickthru, anchors;
var n = (typeof parameters['clickthru0'] != "undefined")? 0 : '';
while (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++) { 
    if (anchors[i] && !clickthru.match(/destination=http/)) {
      anchors[i].href = clickthru.replace(/destination=/, 'destination=' + encodeURIComponent(anchors[i].href));
    } else if (anchors[i]) {   
      anchors[i].href = clickthru;
    }
  }
  n += 1;
}
</script>


zdroj: http://onas.seznam.cz/cz/reklama/obecne-specifikace-formatu/html-5.html