!!Via!AUREA,!s.r.o.!

!

! ! ! ! !

!!!!!!!!!!!!!!!!!!!!!!!!!!! !

! !

!!Via!AUREA,!s.r.o.! Lidická!48,!602!00!Brno! IČ:!26257700! DIČ:!CZ26257700! ! Poslední!aktualizace:!25.9.2015!

tel.:!+420!511!110!431! eHmail:[email protected]!

1!

SPECIFIKACE%HTML%KREATIVY%............................................................................%3! 1.1!

CO!JE!HTML!BANNER!................................................................................................!3!

1.2!

DEFINICE!PROKLIKU!...................................................................................................!4!

1.2.1!

Příklad+pro+klasický+HTML+banner+....................................................................+4!

1.2.2!

Příklad+pro+banner+vytvořený+pomocí+Swiffy+....................................................+5!

1.2.3!

Přiklad+pro+banner+vytvořený+pomocí+Google+Web+Designer+...........................+5!

1.3!

TEST!IMPLEMENTACE!PROKLIKU!..................................................................................!8!

1.4!

FORMÁT!BANNERU!.....................................................................................................!8!

1.5!

DATOVÁ!VELIKOST!BANNERU!......................................................................................!9!

2!

SPECIFIKACE%FLASH%KREATIVY%.......................................................................%10! 2.1!

KÓD!PRO!ACTION!SCRIPT!2!......................................................................................!10!

2.2!

KÓD!PRO!ACTION!SCRIPT!3!......................................................................................!10!

3!

IMPORT%KREATIVY%DO%SYSTÉMU%ADVANTAGE%PŘES%URL%............................%12! 3.1!

SPECIFIKACE!KREATIVY!............................................................................................!12!

3.1.1!

Jednoduchá+flash+kreativa+..............................................................................+12!

3.1.2!

Obrázková+kreativa+.........................................................................................+13!

3.1.3!

Složitější+HTML+banner+...................................................................................+14!

3.1.4!

Práce+s+CSS+styly+...........................................................................................+14!

3.1.5!

Formuláře+........................................................................................................+15!

3.1.6!

Nestahování+datových+souborů+do+systému+adVantage+.................................+15!

3.1.7!

Ověření+funkčnosti+kreativy+............................................................................+16!

2/16%

%

www.viaaurea.cz !

1% Specifikace%HTML%kreativy% Tento! text! popisuje! způsob! výroby! HTML! kreativy,! tak! aby! při! jejím! vložení! do! reklamního! systému!adVantage,!byla!korektně!zobrazena!a!korektně!se!počítala!statistika!prokliků.!

1.1% Co%je%HTML%banner% Pokud! se! vývojem! HTML! prezentací,! stránek! a! bannerů! zabýváte,! tak! tuto! kapitolu! rovnou! přeskočte.! Tento! odstavec! reaguje! na! akutní! opuštění! Flash! technologie! z! důvodů! ukončení! podpory! v!prohlížečích!Chrome.! Pokud! přecházíte! z! technologie! Flash,! pravděpodobně! velmi! těžko! budete! hledat! podobný! nástroj,!na!který!jste!v!současné!době!zvyklý.!Pomůžeme!Vám!se!alespoň!trochu!zorientovat! v! postupech! tvorby! HTML! bannerů.! Prvně! doporučujeme! pročíst! dokument! SPIRU! http://www.spir.cz/sites/default/files/spir_html5_intro_0.pdf,!který!celé!téma!řeší!v!daleko! širším!měřítku.! V!současné!době!se!dá!k!HTML!banneru!dopracovat!několika!způsoby:! •! Tvorba% banneru% přímo% v% HTML% (CSS,% JavaScript)! –! je! určeno! pro! kodéry/webdesignery/programátory.! Banner! se! z! pohledu! tvorby! neliší! od! klasické! HTML!stránky,!jediné!na!co!je!nutné!myslet,!je!velikost!výsledné!plochy,!kde!se!banner! bude!zobrazovat.! ! •! Tvorba% banneru% v% SW% nástroji! –! cílem! těchto! programů! je! poskytnout! uživatelsky! přívětivé!prostředí!pro!tvorbu!bannerů.!Preference!jednotlivých!nástrojů!je!na!Vás:! https://www.google.com/webdesigner/! http://tumult.com/hype/! https://xpressive.org/! http://macrabbit.com/espresso/! http://html5maker.com/! https://www.adobe.com/cz/products/edgecanimate.html! !

3/16%

%

www.viaaurea.cz !

•! Konverze% Flash% banneru% na% HTML! –! existuje! několik! nástrojů,! které! dokáží! Flash! banner! zkonvertovat! na! HTML! banner.! Mezi! nimi! je! i! nástroj! od! Google! Swiffy! https://developers.google.com/swiffy/.!!! Každopádně! využijeteHli! kterýkoliv! způsob,! musí% kreativa% splňovat% požadavky% uvedené% v%dalších%kapitolách.!

1.2% Definice%prokliku% HTML! banner! ! musí! umět! vzít! adresu! prokliku! z! parametru! clickthru,! který! je! uložen! v! URL! banneru.!Adresa!prokliku!musí!být!použita!na!všech!odkazech,!které!v!banneru!existují.! Reklamní!systém!adVantage!podporuje!situaci,!kdy!se!clickthru!adresa!předřadí!před!existující! odkaz!v!banneru.!Tím!může!být!docíleno!funkčnosti,!že!při!prokliku!dojde!k!přesměrování!na! tento! odkaz! a! zároveň! započítání! prokliku! v! reklamním! systému.! Operátorům! reklamního! systému!lze!tedy!předat!cílové!URL!dvěma!způsoby.!Prvním,!doposud!standardním,!!v!rámci! zasílaných! podkladů! nebo! druhou! alternativou! přímo! v! banneru.! Vámi! realizovanou! formu! prosím! sdělte! spolu! se! zasílanými! podklady,! operátor! reklamního! systému! musí! podporu! odkazů!v!banneru!povolit.! Další!parametr,!který!je!nutné!implementovat!je!clickTarget,!kterým!se!řídí!cíl!(target)!odkazu.! Přenesení! adresy! z! clickthru! a! parametru! clickTarget! do! banneru! lze! docílit! pomocí! JavaScriptu.! V! následujících! ukázkách! naleznete! příklady! zpracování! parametrů! HTML! bannerů,!můžete!se!v!nich!inspirovat.!

1.2.1% Příklad%pro%klasický%HTML%banner% Jedná! se! o! banner! vytvářený! přímo! v! HTML,! u! kterého! jsou! všechny! odkazy! realizovány! pomocí! tagu! ! (pokud! je! v! banneru! proklik! realizován! pomocí! JavasScriptu,! je! nutné! clickthru!zajistit!programově).! Následující! kód! umístěte! těsně! před! uzavírací! značku! .! Kód! zajistí! zpracování! zpracování!parametru!clickthru!a!clickTarget+ve!všech!odkazech!!v!banneru.!K!existujícím! odkazům!je!clickthru!předřazen,!takže!lze!využít!uložených!odkazů!v!banneru.! <script type="text/javascript"> function getUrlVar(name){ if (typeof getUrlVar.params == 'undefined' || getUrlVar.params.length == 0) { getUrlVar.params = [];

4/16%

%

www.viaaurea.cz !

var hash, hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for (var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); getUrlVar.params.push(hash[0]); getUrlVar.params[hash[0]] = hash[1]; } } return typeof(getUrlVar.params[name]) == 'undefined' ? '' : getUrlVar.params[name]; } function getClickThru(encode){return (typeof(encode) == 'undefined' || !encode) ? decodeURIComponent(getUrlVar('clickthru')) : getUrlVar('clickthru');} function getClickTarget(){return getUrlVar('clickTarget');} var anchors = document.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) { anchors[i].href = getClickThru() + encodeURIComponent(anchors[i].href); anchors[i].target = getClickTarget(); } Verze pro bezpečné kopírování https://gist.github.com/viaaurea/d4497968a5c99c6ff848

! Správnou!funkci!otestujte!podle!návodu!v!kapitole!1.3!Test!implementace!prokliku.!

1.2.2% Příklad%pro%banner%vytvořený%pomocí%Swiffy% Banner!vytvořený!pomocí!konvertoru!Swiffy!z!Flashe!do!HTML.! Premisou!správné!funkčnosti!clickthru!je!zajištění!jeho!funkcionality!ve!zdrojové!SWF!souboru,! viz! kapitola! 2! Specifikace! Flash! kreativy.! Konvertovaný! banner! lze! bez! úprav! nasadit! do! reklamního!systému.! Správnou!funkci!otestujte!podle!návodu!v!kapitole!1.3!Test!implementace!prokliku.!

1.2.3% Přiklad%pro%banner%vytvořený%pomocí%Google%Web%Designer% •! V!pohledu!„Code!view“!vložte!hned!na!začátek!za!řádek!s! function getUrlVar(name){ if (typeof getUrlVar.params == 'undefined' || getUrlVar.params.length == 0) { getUrlVar.params = []; var hash, hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for (var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); getUrlVar.params.push(hash[0]);

5/16%

%

www.viaaurea.cz !

getUrlVar.params[hash[0]] = hash[1]; } } return typeof(getUrlVar.params[name]) == 'undefined' ? '' : getUrlVar.params[name]; } function getClickThru(encode){return (typeof(encode) == 'undefined' || !encode) ? decodeURIComponent(getUrlVar('clickthru')) : getUrlVar('clickthru');} function getClickTarget(){return getUrlVar('clickTarget');} Verze pro bezpečné kopírování: https://gist.github.com/viaaurea/808a92a7ab5d0859679a

!

! •! Přidat!do!banneru!komponentu!Tap!Area!

6/16%

%

www.viaaurea.cz !

!

! •! Přidat! událost! na! proklik! Tap!Area:! Events! "! “+“! "! gwdHtaparea1! "! Tap!Area! "! Touch/Click! "! Custom! "!Add! custom! action! "! název! funkce! „exit“! a! do! pole! dát! následující!kód.! var url="http://www.viaaurea.cz"; // doplnit URL kam směruje banner if (getClickTarget() == '_top'){ window.top.location.href = getClickThru() + url; }else{ window.open(getClickThru() + url, getClickTarget()); } Verze pro bezpečné kopírování: https://gist.github.com/viaaurea/808a92a7ab5d0859679a

!

!

Správnou!funkci!otestujte!podle!návodu!v!kapitole!1.3!Test!implementace!prokliku.! 7/16%

%

www.viaaurea.cz !

1.3% %Test%implementace%prokliku% Bez!ohledu!na!způsob!výroby!HTML!kreativy!je!postup!ověření!funkčnosti!vždy!stejný,!stačí! připravený!banner!otevřít!v!prohlížeči!a!za!adresu!přidat!tento!kód:! ?clickthru=http%3A%2F%2Fwww.advantage.as%2Fimclickthru.php%3Fim%3DY2xpY2t0aHJ1O2 h0dHA6Ly93d3cuYWR2YW50YWdlLmFzL2NsaWNrdGhydS5odG1s%253B%26redirurl%3D&clickTa rget=_blank Verze pro bezpečné kopírování: https://gist.github.com/viaaurea/ca386472acd813510272

! Po! prokliku! na! banner! přejdete! na! mezi! stránku,! která! indikuje! správné! zpracování,! pokud! následně!budete!přesměrování!na!cílovou!adresu,!je!implementace!clickthru!korektní.!

!

1.4% Formát%banneru% Reklamní!systém!přijímá!dva!typy!formátů!HTML!bannerů! •! jednosouborový%HTML%banner!–!jeden!samostatný!HTML!soubor!s!příponou!.html!.! •! ZIP% archív,! ve! kterém! je! v! kořenovém! adresáři! soubor% index.html! a! případně! další! připojené!soubory!(obrázky,!javascripty,!CSS,!atd.)!a!adresáře.!Archiv!nesmí!obsahovat! žádné!další!soubory,!které!nejsou!pro!zobrazení!důležité.! !

8/16%

%

www.viaaurea.cz !

1.5% Datová%velikost%banneru% Základní! datová! velikost! banneru! se! počítá! vzhledem! k! ZIP! archivu! (u! jednosouborového! banneru!je!nutné!vyzkoušet).!Banner!nesmí!stahovat!z!externích!zdrojů!žádné!další!soubory! vč.!fontů,!scriptů!atd.,!kromě!povolených!výjimek:! •! JavaScriptové! knihovny! nástrojů! pro! tvorbu! HTML! bannerů! –! nepočítají% se% do% výsledné%velikosti! o! Swiffy!H!https://www.gstatic.com/swiffy/v7.3/runtime.js!! o! Edge!H!https://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js!! o! další!je!nutné!konzultovat!s!operátory!systému! Vždy!se!musí!jednat!o!oficiální%zdroj%výrobce!daného!software!a!knihovna!musí!být! načítána!z!https%protokolu.! Celková! datová! velikost! vztažená! k! ZIP! formátu! nesmí% přesáhnout% 75kB! pro! standardní! formáty.!

9/16%

%

www.viaaurea.cz !

2% Specifikace%Flash%kreativy% Flash! kreativa! nesmí! obsahovat! napevno! vložený! URL! odkaz! cílové! stránky,! ale! musí! ho! přijímat!z!parametru.!Tento!parametr!se!jmenuje!clickthru,!a!ve!Flashi!je!ho!možné!integrovat! následujícím!postupem.!

2.1% Kód%pro%Action%Script%2% Na! tlačítko,! které! po! kliknutí! přesměruje! uživatele! na! cílové! stránky,! je! nutné! definovat! akci! getURL()!s!těmito!parametry:! ! on (release) { if ( ! _root.clickthru && _root.clickTag ) { _root.clickthru = _root.clickTag; } if ( ! _root.clickTarget ) { _root.clickTarget = "_top"; } else if (Key.isDown(Key.SHIFT)) { _root.clickTarget = "_blank"; } getUrl( _root.clickthru, _root.clickTarget); }

! Pro!otestování!správného!chování!je!možné!vložit!Flash!do!HTML!stránky!v!následujícím!tvaru:! banner.swf?clickthru=http%3A%2F%2Fwww.viaaurea.cz! a! zkusit! ! proklik! na! stránku! uvedenou! v! parametru! (URL! v! parametru! clickthru! musí! být! zakódován).!

2.2% Kód%pro%Action%Script%3% Action!Script!3!se!zásadně!odlišuje!od!předchozího!příkladu!kódu.!Kód!se!umisťuje!na!první! pole!na!časové!ose,!od!tohoto!okamžiku!musí!být!dostupná!také!instance!objektu!typu!Button! pro! navázání! prokliku.! Instance! tlačítka! má! název! „AdbuttonJmeno“.! Parametry! clickthru! a! clickTarget!jsou!stejné!jako!v!předchozím!příkladu.! Konkrétní!kód!prokliku!je!následující:!

10/16%

%

www.viaaurea.cz !

var clickT:Object = root.loaderInfo.parameters; if (clickT.clickthru == undefined && clickT.clickTag) { clickT.clickthru = clickT.clickTag; } if (clickT.clickthru == undefined && clickT.clickTAG) { clickT.clickthru= clickT.clickTAG; } if (clickT.clickTarget == undefined ) { clickT.clickTarget = "_top"; } AdbuttonJmeno.addEventListener( MouseEvent.CLICK, function(e:MouseEvent):void { navigateToURL(new URLRequest(clickT.clickthru), clickT.clickTarget); });

Otestování!funkčnosti!je!stejné!jako!u!AS2!(URL!v!parametru!clickthru!musí!být!zakódován).! banner.swf?clickthru=http%3A%2F%2Fwww.viaaurea.cz!

11/16%

%

www.viaaurea.cz !

3% Import%kreativy%do%systému%adVantage%přes% URL% Systém!adVantage!umožňuje!import!banneru!přes!zadané!URL!(tzn.!inzerent!místo!kreativy! pošle!odkaz!na!kreativu,!kterou!umístí!na!veřejně!dostupný!server).!Import!může!být!proveden! jednorázově! nebo! pravidelně! v! 15! minutových! intervalech,! což! umožňuje! flexibilní! úpravy! kreativy! (aktuální! nabídky,! lastHminute! atd.).! Vzhledem! k! tomu,! že! všechny! datové! soubory! jsou!staženy!na!servery!reklamního!systému,!nedochází!k!zátěži!klientských!serverů.!Stažení! datových! souborů! lze! potlačit! příznakem! #av_no_download! –! podrobnosti! jsou! uvedeny! v!podkapitole!3.1.6!H!Nestahování!datových!souborů!do!systému!adVantage.! Princip! importu! je! založen! na! vystavení! kreativy! na! internetu! v! podobě! jednoduché! HTML! stránky!na!klientském!serveru.!Obsluze!reklamního!systému!pak!stačí!jen!sdělit!tuto!adresu,! odkud!si!systém!kreativu!načte.!

3.1% Specifikace%kreativy% Kreativa! musí! být! uložena! do! HTML! stránky! včetně! hlavičky,! ve! které! je! specifikováno! kódování.!Do!systému!se!importuje!vše,!co!je!obsaženo!v!TAGu!.!Všechny%odkazy,% na% které% má% kreativa% mířit,% a% všechny% zdroje% obrázků% (flashů)% musí% být% uvedeny% absolutně,!tzn.!včetně!http://www.domena.cz.!Banner!na!výsledné!stránce!může!být!zobrazen! přes!iFrame,!proto!je!nutné,!aby!každý!odkaz!ve!stránce!měl!definovaný!target%na%_top.!

3.1.1% Jednoduchá%flash%kreativa% Pro! flash! kreativu! je! nutné,! aby! splňovala! požadavky,! které! jsou! uvedené! v! kapitole! 0! %

%

www.viaaurea.cz !

.! ! <meta http-equiv="content-type" content="text/html; charset=windows-1250" />

12/16%

%

www.viaaurea.cz !





! Systém!umožňuje!specifikovat!alternativní!banner!k!flash!banneru,!který!se!použije!v!případě,! že!klient!nemá!nainstalovaný!Flash!Player!ve!svém!prohlížeči.!Alternativní!banner!může!mít! podobu!jako!ukázka!v!kapitole!3.1.2!Obrázková!kreativa.!!

3.1.2% Obrázková%kreativa% Velmi!podobně!lze!vytvářet!HTML/obrázkový!banner!

<meta http-equiv="content-type" content="text/html; charset=windows-1250" />



13/16%

%

www.viaaurea.cz !

!

3.1.3% Složitější%HTML%banner% Importovaná!kreativa!může!obsahovat!i!více!obrázku!nebo!složitější!HTML!strukturu.! ! <meta http-equiv="content-type" content="text/html; charset=windows-1250" />



3.1.4% Práce%s%CSS%styly% Importovaná! kreativa! může! obsahovat! definici! stylů,! ale! pouze! v! HTML! struktuře,! ne! z! externího!zdroje.!Jsou!podporovány!konstrukce!<STYLE>!a!style=""!v!tazích!HTML.!

14/16%

%

www.viaaurea.cz !

3.1.5% Formuláře% Systém! umožňuje! importovat! kreativu,! která! obsahuje! formuláře,! resp.! tag!

.! Do! kreativy!lze!formuláře!zakomponovat!dvěma!způsoby,!jeden!je!jednodušší,!ale!neumožňuje!u! kreativy!sledovat!statistiku!kliků,!druhý!je!složitější,!ale!umí!počítat!kliky.! H!

bez%statistiky%kliků!–!do!action!vložte!cílovou!stránku!(absolutní!cestou)!

H!

se%statistikou%kliků%H!od!obsluhy!reklamního!systému!obdržíte!dva!identifikátory!AID! a!!LID.!!Do!action!se!vloží!URL!reklamního!systému!a!cílové!URL!se!vloží!do!skrytého! pole.!Výsledný!kód!pak!může!vypadat!následovně!(použijte!hodnoty!zaslané!obsluhou)!

! …

! V! případě! použití! formulářů,! ! test! kreativy! viz! kap.! 3.1.6! hlásí! upozornění,! že! import! nezpracoval!některé!odkazy.!Jedná!se!o!odkazy!action,!popř.!redirurl,!což!je!v!pořádků!a!lze! toto!hlášení!ignorovat.!

3.1.6% Nestahování%datových%souborů%do%systému%adVantage% Datové!soubory!(obrázky,!flash,!CSS!pozadí)!mohou!obsahovat!příznak,!že!se!soubor!bude! vždy!načítat!z!externího!zdroje!–!např.!zdrojové!URL!importované!kreativy.!Označení!tohoto! příznaku!je!#av_no_download.!Například!jednoduchý!obrázkový!banner!by!vypadal:! ! ! ! V!případě!flash!banneru!je!zápis!a!použití!obdobné.!Jen!je!potřeba!zadat!příznak!do!všech! URL!–!jak!embed/src,!tak!param/value.! !

15/16%

%

www.viaaurea.cz !



! V! URL! by! měl! být! příznak! #av_no_download! uváděn! až! na! konci.! Za! prvé! to! nenaruší! správnost!URL!adresy!a!také!se!příznak!lehce!dohledá!ve!zdrojovém!kódu.! !

3.1.7% Ověření%funkčnosti%kreativy% Kreativu,!kterou!si!přejete!importovat!do!reklamního!systému!je!vhodné!otestovat.!Na!veřejně! přístupnou! adresu! vystavte! kreativu,! proveďte! vizuální! kontrolu! a! otestujte,! jestli! ! všechny! odkazy!míří!na!správné!cílové!stránky!a!lze!je!prokliknout.! Dalším!

krokem!

kontroly!

je!

test!

importu!

kreativy!

na!

stránce!

http://mfadmin.advantage.as/kreativa_import_nahled.php,! kde! se! provede! simulace! importu! do! systému! (do! formulářového! pole! vložte! URL,! kde! je! kreativa/banner! umístěn).! Pokud!systém!ne!reportuje!žádnou!chybu,!banner!je!vizuálně!v!pořádku!a!všechny!prokliky! míří! na! cílové! stránky,! je! kreativa,! odkaz,! připraven! k! odeslání! operátorům! reklamního! systému.!

16/16%

%

www.viaaurea.cz !