Technická specifikace HTML5 banneru

Popis

HTML5 banner musí být plně funkční nezávisle na webové stránce, kde bude zobrazen. Do stránky je vložen přes tag iframe, který nepřebírá styly, fonty a další vlastnosti stránky.

Dodání

Bannery ve formátu HTML5 je nutné dodávat jako archiv s příponou ZIP. Datová velikost se počítá z rozbalené složky se všemi soubory a to včetně externích zdrojů.

Obsah

Složka banneru obsahuje:

soubor index.html
obrázky ve formátu JPG, PNG, GIF, SWG
css styly mohou být definované v souboru index.html, nebo v samostatném css souboru. Nelze použít načítání stylů z extreních zdrojů.
v případě použití externích javascriptových knihoven je jejich velikost započítána do celkové datové velikosti banneru

Definice prokliku

Banner musí odkazovat pouze na jednu URL. Nastavení prokliku se definuje v souboru index.html vložením html tagu A a javascriptové části.

HTML tag A

				
					<a href="#" target="_blank">  V této části je obsah banneru, kterým obalíte tím too odkazem. </a>

Příklad:

				
					<body>
  <a href="#" target="_blank">
    <div>
      <!-- další obsah připraveného banneru -->
    </div>
  </a>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const match = /[?&]click=([^&#]*)/.exec(window.location.href);
      if (!match) return;

      const redirect = match[1];
      const links = document.querySelectorAll("a");

      for (const link of links) {
        const attr = link.getAttribute("href");
        link.href = (!attr || attr === "#") ? redirect : redirect + attr;
        link.target = "_blank";
      }
    });
  </script>
</body>

Javascript

				
					<script>
    document.addEventListener("DOMContentLoaded", function(e) {
        var i, linkArr = document.querySelectorAll('a'), 
            redirect =  /[?&]click=([^&#]*)/.exec(this.location.href)[1];
        for(i=0; i < linkArr.length; i++ ){
            var atrr = linkArr[i].getAttribute("href");
            linkArr[i].href = ((atrr === '#') || (atrr === '')) ? redirect : redirect + atrr;
            linkArr[i].target = '_blank';
        }
   }); 
</script>