Tehničke upute za izradu bannera

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

Bannere je iznimno moguće postaviti i bez implementiranog clickTAG-a ili 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.

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, 728×90, 300×600… jpg, png, gif, html5
do 150 Kb IAB standard: 300×250, 728×90, 300×600… 3rd party script tag
do 2 MB IAB standard: 300×250, 728×90, 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.


Wallpaper / background

Tehničke specifikacije
Veličina datoteke Dimenzije Formati
do 150 Kb 1680×1050, 1920×1080, 1920×1200…
ovisi i o: kreativi, širini / postojećoj pozadini…
jpg, png, gif, html5

Download: wallpapers branding template (zipped .psd)

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

  • sensaklub.hr: 970px
  • croportal.net: 960px
  • cosmopolitan.hr: 990px
  • elle.hr: 990px
  • kuhaj.hr: 990px
  • menshealth.hr: 990px
  • story.hr: 1100px
  • roditelji.hr: 1020px
  • sretna.hr: 1200px

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.

Primjeri:


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.

Primjeri:


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

Primjeri:


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.

Primjeri: