HTML5 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í prokliku/ů, kde jsou odkazy tvořene pomocí

<a href ="https://..."></a>

• Hodnotu atributu href nastavte na href=“#“ – <a href ="#"></a>
• URL pro proklik zašlete spolu s bannerem.

Do HTML vašeho souboru index.html před ukončovací tag <><> 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>

 

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