Reklama bude umístěna na stránky pomocí html značky iframe. Může obsahovat HTML, CSS i JavaScriptový kód. 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á tvůrce reklamy, který musí zajistit bezproblémovou funkčnost ve všech majoritních prohlížečích, včetně mobilních verzí.

Desktopové verze HTML 5 kreativ testujte v nejnovějších verzích těchto referenčních prohlížečů:

• Internet Explorer
• Mozilla Firefox
• Google Chrome

Struktura kreativity

CSS, JavaScript a obrázky doporučujeme vkládat na CDN úložiště. V případě nevyužití CDN, umístěte jednotlivé soubory do podsložek:

• /css/ - (volitelně) – CSS styly
• /js/ - (volitelně) – JavaScriptové knihovny a kód kreativity
• /img/ - (volitelně) - obrázky bannerů
• index.html – (povinné) html kód kreativity. Může obsahovat vnořené CSS i JavaScript

Doporučená velikost kreativity je do 100kB. Pro názvy souborů použijte malá písmena anglické abecedy. Povolené speciální znaky jsou „-" a „_".

Kreativita musí být kompatibilní, a všechna volání musí mít povolen "mixed content". Příklad chybného volání knihovny v banneru:

<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>

Správně musí být:

<script type="text/javascript" charset="utf-8" src="//animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>

Definice prokliku

Proklik je realizován přes javascriptový kód. Tento kód je nutno vložit před uzavírací tag </body> ve vašem souboru index.html. Target odkazu musí být nastaven (může směřovat do "_top", "_blank", popř. "_parent").

HTML5 kreativita řešená pomocí odkazu <a href=“http://“></a>

<script type="text/javascript">
    (function() {
      function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null}
    var preclickurl = getURLParameter('click')  || '';
    var anchors = document.getElementsByTagName("a");
    var clickthru = '';
    for (i = 0; i < anchors.length; i++) {
        if ( (anchors[i].getAttribute("href") != "") && (anchors[i].getAttribute("href") != "#") ) {
            clickthru = encodeURIComponent(anchors[i].href);
        } else {
            clickthru = "";
        }
        if (anchors[i]) {
            anchors[i].href = preclickurl +'&kam='+clickthru ;
            } } })();
 </script>

FLASH převedený na HTML5 pomocí nástroje Swiffy

Aby kreativa měřila kliknutí a přesměrovávala na cílovou adresu URL, do html kódu z nástroje Swiffy je třeba přidat kód uvedený níže. Tento kód je potřeba přidat ihned před volání metody stage.start().

URL pro proklik (včetně případného měření) a kód pro externí měření impresí, pokud je vyžadováno, zašlete prosím spolu s bannerem.

function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||
[,""])[1].replace(/\+/g, '%20'))||null }
var preclickurl = encodeURIComponent(getURLParameter('click')  || '');
stage.setFlashVars("clickTarget=_blank&clickthru=" + preclickurl + "&clickTAG=" + preclickurl + 
"&clickTag=" + preclickurl);

HTML5 exportovaný z Google Web Designer

Pokud má banner proklik jen na jednu cílovou url (z celé plochy banneru) a pokud má wrapper celého banneru id="gwd-ad", lze použít toto řešení.

Nenastavujte v banneru "natvrdo" proklik pomoci tap area, cílovou Url nám zašlete spolu s bannerem.

Následující script vložte před ukončovací tag </body>

<script type="text/javascript">    (function() {      function getURLParameter(name) 
{      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||
[,""])[1].replace(/\+/g, '%20'))||null    }    var preclickurl = getURLParameter('click')  || ''; var clickthru = '';    
var stage = document.getElementById("gwd-ad"); stage.style.cursor = "pointer";    
stage.addEventListener('click', function(event){        window.open(preclickurl + clickthru, "_blank"); 
event.preventDefault();    });    })();</script>

HTML5 exportovaný z Adobe Edge

Pokud má banner proklik jen na jednu cílovou url (z celé plochy banneru), lze použít toto řešení:

Spolu s bannerem zašlete cílovou URL pro proklik.

Do html souboru banneru vložte před ukončovací tag </body> následující script:

       <script type="text/javascript">
    (function() {
    function getURLParameter(name, url) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
    }
    var preclickurl = getURLParameter('click')  || '';
    var clickthru = '';
    var stage = document.getElementById("Stage");
    stage.style.cursor = "pointer";
    stage.addEventListener('click', function(event){
        window.open(preclickurl + clickthru, "_blank");
        event.preventDefault();
    });
    })();
    </script>

Tento dokument si můžete stáhnout ve formátu PDF zde.