Technické specifikace
Naposledy aktualizováno: 12.12.2017
modrykonik logo

HTML5 specifikace

Naposledy aktualizováno: 12.12.2017

Formát HTML5 umožňuje využívat v kreative různé animace interaktivní obsah, či odkazovať na více různých stránek. Posledná možnost se často využívá především při formátu Zprávy do interní pošty. Pozor ale, počet prokliků vám v tomhle případě víme odmerať jen za všechny odkazy spolu.
Potřebujete-li mít odměřený počet porkliků pro každý odkaz extra, doporučujeme vám využít některého z URL shortenerů, jako třeba goo.gl nebo bit.ly.

Aby sa HTML5 kreativy zobrazovali správně a aby fungovali všechna měření, musí být vyrobeny dle týchto instrukcí:

Kreativa musí mít nastaveny pevné rozměry, třeba u formátu Zprávy do IP je to šířka 730px a výška jakákoliv nižší než 3000px:

<head> <style> <meta name="ad.size" content="width=730,height=1000"> html,body{width: 300px; height: 1000px;} </style> . . . </head>

V záhlaví souboru se musí nacházet script s proměnnými clickTag, ve kterých jsou uloženy URL adresy jednotlivých odkazů:

<head> <script> var clickTag1 = "URL odkazu 1"; var clickTag2 = "URL odkazu 2"; var clickTag3 = "URL odkazu 3"; . . . </script> . . . </head>

Proměnné clickTag můžou zůstat i prázdné (var clicTag1 = "";) a tehdy se jim hodnota (URL adresa) přiradí až při spouštění kampaně, vždy se ale musí v záhlaví souboru nacházet.

<head> <script> var clickTag1 = ""; var clickTag2 = ""; </script> . . . </head>

V samotném těle kreativy se může nacházet více odkazů, v každém z nich však musí být parametr onclick nadefinován pomocí javascript funkce window.open a proměnné clickTag. Prosím, nepoužívejte parametr href - v prohlížeči Firefox nebudou takto nadefinované odkazy fungovat:

<a onclick="javascript:window.open(window.clickTag1)"> Tělo prvního odkazu </a> <a onclick="javascript:window.open(window.clickTag2)"> Tělo druhého odkazu </a> <a onclick="javascript:window.open(window.clickTag3)"> Tělo třetího odkazu </a> . . .

Příklad správně vypracované HTML5 kreativy:

<!DOCTYPE html> <html> <head> <base target="_blank"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="ad.size" content="width=730,height=1000"> <title>BUPI sa stará aj o mamičky</title> <script> var clickTag1 = "https://goo.gl/RWRrPD"; var clickTag2 = "https://goo.gl/qJQmPv"; var clickTag3 = "https://goo.gl/FDBZnt"; var clickTag4 = "https://goo.gl/Z43teG"; </script> <style> html,body{width: 300px; height: 1000px;} </style> </head> <body bgcolor="#fef4fa"> <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#fef4fa"> <tbody> <tr> <td bgcolor="#fef4fa" colspan="4"> <img src="https://melior.cz/svoboda/bupi/top.jpg" width="730" height="639" style="display: block;"/> </td> </tr> <tr> <td bgcolor="#fef4fa"> <a onclick="javascript:window.open(window.clickTag1)"> <img src="https://melior.cz/svoboda/bupi/citaj_skusenosti.jpg" width="229" height="206" alt="Čítaj skúsenosti mamičiek s výrobkami Bupi mami" style="display: block;"/> </a> </td> <td bgcolor="#fef4fa"> <a onclick="javascript:window.open(window.clickTag2)"> <img src="https://melior.cz/svoboda/bupi/zisti_viac.jpg" width="154" height="206" alt="Zisti viac o Bupi mami výrobkoch" style="display: block;"/> </a> </td> <td bgcolor="#fef4fa"> <a onclick="javascript:window.open(window.clickTag3)"> <img src="https://melior.cz/svoboda/bupi/hodnotne_oleje.jpg" width="178" height="206" alt="Hodnotné oleje v receptúrach a ich účinky na pokožku" style="display: block;"/> </a> </td> <td bgcolor="#fef4fa"> <a onclick="javascript:window.open(window.clickTag4)"> <img src="https://melior.cz/svoboda/bupi/facebook.jpg" width="169" height="206" alt="Vektorový inteligentní objekt" style="display: block;"/> </a> </td> </tr> <tr> <td bgcolor="#fef4fa" colspan="4"> <img src="https://melior.cz/svoboda/bupi/bottom.jpg" width="730" height="56" style="display: block;"/> </td> </tr> </tbody> </table> </body> </html>
← Zpět na seznam formátů