Svi HTML5 banneri bi trebali koristiti window.clickTag varijablu za određivanje klik destinacije.

Bannere je iznimno moguće postaviti i bez implementiranog window.clickTag-a, no u tom slučaju nije moguće:

  • pratiti statistike o broju klikova
  • postavljati CPC kampanju (tj. odrediti zakup po broju klikova)

HTML5 banneri

HTML5 banneri moraju biti isporučeni kao ZIP arhiva (sa barem jednom .html datotekom unutra). U arhivi se moraju nalaziti i svi asseti koje banner eventualno koristi (ako nisu linkani kroz 3rd party CDN-ove i sl. — ovo uključuje i video datoteke u slučaju html5 video billboarda).

Clicktag/Clickthrough za HTML5 bannere treba biti implementiran putem window.clickTag varijable.

Npr:

<a id="creativelink" href="#" target="_blank">
    ...
</a>
<script>
document.getElementById('creativelink').href = window.clickTag;
</script>

Alternativno je moguć i ovaj oblik, ali se ne preporučuje:

<a id="creativelink" href="javascript:void(window.open(window.clickTag));" target="_blank">...</a>

Maksimalna podržana veličina .zip datoteke: 2 Mb

Više informacija na IAB siteu (pdf, 717Kb)

Važno: Video banneri

Video banneri bi trebali funkcionirati na click-to-play principu. U iznimnim slučajevima moguća je auto-play opcija, ali obavezno s ugašenim zvukom, kontrolama za play/pause/mute i serviranjem video datoteke sa 3rd party servera.

Maksimalna veličina video datoteke: 2 Mb

↑

Standardni banneri

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 150 Kb IAB standard: 300×250, 300×600… jpg, png, gif, html5
do 150 Kb IAB standard: 300×250, 300×600… 3rd party script tag
do 2 MB IAB standard: 300×250, 300×600… video

↑

Billboard

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 250 Kb 970×250 jpg, png, gif, html5
∞ 970×250 3rd party script tag

↑

Mega billboard

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 250 Kb 970×500 jpg, png, gif, html5
∞ 970×500 3rd party script tag

Dvostruko viša varijanta billboarda.

↑

Story.hr – Wallpaper / background

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 150 Kb 2 x 250x1080px (lijevo/desno) – 160×250 (safe zone) jpg, png, gif, html5

Wallpaperi se serviraju kao dvije odvojene kreative koje se lijepe sa lijeve i desne strane site-a (šalju se dvije kreative, lijeva i desna).

3rd party skripte/asseti moraju biti servirane/i isključivo putem https protokola.

↑

Wallpaper / background

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 150 Kb 2 x 484x1050px (lijevo/desno) jpg, png, gif, html5

Download: wallpapers branding template (zipped .psd)

Blind dimenzije (tj. širine “sadržajnih” dijelova stranica):

  • sensa.hr: 970px
  • roditelji.hr: 1020px
  • cosmopolitan.hr: 990px
  • elle.hr: 990px




Blind je zapravo širina pojedinog site-a, odnosno, taj dio wallpaper kreative je u sredini ekrana i site ju prekriva.

Wallpaper može biti fiksiran na viewport (kako posjetitelj scrolla stranicu, wallpaper ostaje vidljiv cijelo vrijeme, onliko koliko ga već stane u vidljiv dio browsera) ili scrollable (konfigurabilno).

Wallpaper je moguće servirati i kao dvije odvojene kreative koje se lijepe sa lijeve i desne strane site-a (šalju se dvije kreative, lijeva i desna).

Moguće je targetiranje po širini browser prozora (u trenutku učitavanja stranice).
Naknadni resize ne mijenja učitanu kreativu niti pokušava dohvatiti novu.

↑

Floating / Interstitial / Takeover / Ticker

Tehničke specifikacije
Veličina datoteke Dimenzije Formati Trajanje
do 150 Kb Proizvoljno jpg, png, gif, html5 max 30 sekundi
∞ Proizvoljno 3rd party script tag max 30 sekundi

Ove vrste kreativa moraju imati jasno istaknut i funkcionalan “zatvori / X” gumb.

HTML5 kreative se serviraju kroz <iframe> element, uz/pored/preko kojeg naša skripta automatski dodaje close / zatvori / x gumb (konfigurabilna pozicija).

"Ticker" kreativa je obično zaljepljena na dno stranice i može biti širine stranice/portala ili širine cijelog ekrana. U najčešćim slučajevima je visoka 100 ili 150px (postoji mogućnost i da bude expandable/expanding).

Pažnja! Po isteku maksimalnog dozvoljenog trajanja bannera, naša skripta automatski skriva banner.

Ako se kreativa servira kroz/kao 3rd party script, od nje se očekuje da sama odradi sve.

↑

Expandable / Expanding

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 150 Kb Iz bilo koje u bilo koju jpg, png, gif, html5
∞ Proizvoljno 3rd party script tag

Expanding banneri načelno imaju dva stanja i dvije dimenzije: inicijalno (početno, manje, collapsed) stanje (dok su u stanju “mirovanja”), i drugo (aktivno, veće, expanded) stanje/dimenzije. Kreativa se može automatski proširivati i/ili samo kada posjetitelji izvrše neki oblik interakcije s njima (klik/roll-over).

Kreative koje servira naša skripta mogu “rasti” iz bilo kojih izvornih dimenzija u bilo koje odredišne dimenzije.

HTML5 kreative servirane putem našem skripte prikazuju se unutar <iframe> elementa, čije dimenzije mijenja naša skripta na mouseover / mouseout.

3rd party expanding kreative imaju veću slobodu (jer mogu kreirati što god i kako god žele), ali i veću odgovornost (da ne “potrgaju” postojeći layout/funkcionalnost site-a).

↑

Pushdown (Push down)

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 5 MB Max. 1920×1080 (širi se / sužava proporcionalno automatski) video (.mp4, .webm, .ogv)
do 150 Kb Proizvoljno (širi se / sužava proporcionalno automatski) jpg, png, gif, html5
∞ Proizvoljno 3rd party script tag

Banner (može sadržavati video, html5, 3rd party iframe, ili biti samo slika) se prikazuje preko cijelog viewporta, uz mogućnost ostavljana prostora za glavnu navigaciju/logo sitea i gura/pomiče sadržaj stranice prema dolje.

U slučaju slanja samo .mp4 datoteke, postoji mogućnost kreiranja dodatnih (.webm, .ogv) verzija video datoteka s naše strane, ako će se banner servirati i na mobile platformama/uređajima (uz svjesnost ograničenja koje te platforme trenutno imaju po pitanju mogućnosti autoplaya videa i sl.).

Moguće je i kombiniranje videa sa dodatnom pozadinom/kreativom oko samog videa u nekim omjerima i sl.