HTML 5 bannery

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

Dodržujte, prosím, obecné doporučení SPIR pro tvorbu HTML5 reklamy.

Banner musí být https kompatibilní, a všechna volání musí mít "protocol relative URL".
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>

Max. datová velikost pro standardní HTML5 bannery: 100kB

Banner bude vložen do stránky jako iframe; bude zavolán s GET parametrem "click", hodnota tohoto parametru následně vytvoří odkaz.
Target odkazů musí být nastaven "_blank".

Následující příklady jsou pouze informativní, jelikož není jednotný způsob výroby HTML5 bannerů, každý klient musí zajistit svoje řešení prokliku.


Příklad řešení kde jsou odkazy tvořene pomocí <a href ="http://...."></a>

Hodnotu atributu href nastavte na href="#"
URL pro proklik zašlete spolu s bannerem.

<a href ="#"></a>

Do HTML vašeho souboru index.html před ukončovací tag </body> vložit 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 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].setAttribute('target', '_blank');
        anchors[i].href = preclickurl + clickthru ;
        }
}
})();
</script>

Konfigurace kreativ Flash převedených na HTML5 pomocí nástroje Swiffy

1. V souladu s oborovým standardem zajistěte, aby kreativa Flash podporovala clickthru. (více zde)
2. 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, 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 = encodeURIComponent(getURLParameter('click')  || '');
stage.setFlashVars("clickTarget=_blank&clickthru=" + preclickurl + "&clickTAG=" + preclickurl + "&clickTag=" + preclickurl);


Příklad řešení při exportu 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 zašlete nám spolu s bannerem.
Následující script vložte před ukončovací tag /body

<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("gwd-ad");
stage.style.cursor = "pointer";
stage.addEventListener('click', function(event){
window.open(preclickurl + clickthru, "_blank");
event.preventDefault();
});
})();
</script>


Příklad řešení pro export 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>


Hledat
Flash prostředí
Action Script 2 | Action Script 3
English