====== easyHTML sablonhoz készített HTML5 bannerek gyártása és felvétele ====== ===== Bevezető ===== Az easyHTML sablon egy olyan Markup sablon, mely a HTML bannerek kezelését könnyíti meg. Ez a sablon is ''''-be illeszti be a bannert, azonban jelentős könnyebbséggel jár kezelése. Könnyítést jelent a kampány menedzselése szempontjából, ill. a kompatibilis kreatív elkészítése szempontjából a bannerek fejlesztőinek! ===== Bannerek elkészítése ===== ==== Bevezető ==== Az easyHTML sablon egy olyan eszköz az Adverticum AdServerében, mely megkönnyíti az elkészített HTML/HTML5 bannerek átalakítását és kiszolgálását. A kreatívunkat arra kell felkészítenünk, hogy egy önálló iframe-ben fut majd, és képesnek kell lennie használatba venni a neki ''GET'' paraméterekben átadott értékeket. Ezt megkönnyítendő rendelkezésre bocsájtunk egy ''javascript'' állományt, melyet a ''''-be include-olva az parse-olja a kapott változókat, ill. regisztrálja az alkalmazható funkciókat is. Mindezt a ''goa-helper.js'' segítségével. Ennek használatáról lejjebb, a megkötések után olvashatunk. ==== Megkötések ==== **1.** A fentiek miatt az alábbi nevek védettnek minősülnek, de a funkciónevek megváltoztathatóak ha a szükség úgy hozza, a ''goa'' kivételével. * ''goa'' * ''closeFunction'' * ''openFunction'' * ''hideFunction'' Amennyiben a banner alkalmazhat mérőpontokat akkor azok nevei is védettek lesznek az alábbi séma mentén. Ezt egyeztessük a kampánymanagerrel, hogy elkerüljük az ütközéseket. * ''[név]_fire'' Például, ha mérőnket ''bubble''-nek hívnák: * ''bubble_fire'' **2.** A banner nem alkalmazhat mappa szerkezetet! Minden szükséges állománynak egy szinten kell lennie a ''.html'' file-al. Ez alapján, ez lesz a megfelelő forma: **3.** Minden állománynak egyedi neve kell legyen, mert ugyanabba a mappába kerülnek mint a többi a kapmányhoz tartozó kreatív, így el kell kerülnünk a nevek ütközését. **4.** A kreatívhoz tartozó állományok mérete, nem haladhatja meg a 300KB-ot! ==== Felkészülés a kiszolgálásra ==== A bannerünket fel kell készítenünk arra, hogy egy iframe-ben kerül kiszolgálásra. Ebben nem lesz más, mint amit a HTML file-unk tartalmaz, ezért gondoskodnunk kell arról, hogy a CSS marginokat, paddingokat, és egyebeket reseteljük, és eltűntessük az esetlegesen megjelenő görgetősávokat a megjelenítő frame-ről. Erre az alábbi kódhoz hasonló megoldás ajánlott, de egyéb kitételekre is szükségünk lehet, a banner struktúrája alapján. Ezt célszerű a kódunk elejére rakni és minden más CSS-t ezután beilleszteni, hogy ne írjuk véletlenül felül a banner tartalmának egyik részét sem. ==== A goa-helper.js hozzáadása ==== A ''goa-helper.js'' beüzemeléséhez, csak illesszük az alábbi sort a banner '''' tagjába. Minden funkció mely ezekre a funkciókra és változókra hivatkozik ez után kell kerüljön. ==== A nyitva indulás vizsgálata ==== Bizonyos megjelenítő modulok esetében (''Méretáltó'', ''Billboard'', ''Sidekick'', ''Slider'') a banner nyitva indulhat. Ezt a Goa3-as beépítő script vezérli. Erről a bannert tájékoztatja, amit az alábbi módon kérdezhetünk le: if (goa.openNow === 'true') { /*...*/ } Ebbe az ágba kell írni azokat az utasításokat, amik nyitva indulás esetén kell végrehajtani. Például átméretezni a kreatívot, vagy egy specifikus animációt játszani, amit a banner nyitott állapotában tenne. ==== Kattintások kezelése egy link esetén ==== Kattintások kezeléséhez, lényegében a ''goa.clickTAG'' változót kell kiolvasnunk, és a megfelelő módon felhasználnunk. Ez több néven is lekérhető: * ''goa.clickTAG'' * ''goa.clickTag'' * ''goa.cthref'' Adminunkon beállítható, hogy a landing page hol nyíljon meg pl. ''_self'' vagy ''_blank'', amit a ''goa.clickTARGET'' változóban adunk át. Alternatív nevei: * ''goa.clickTARGET'' * ''goa.clickTarget'' === HTML példa === === JS példa === ==== Kattintások kezelése több link esetén ==== Kattintások kezeléséhez, nem a ''goa.clickTAG'' változót kell kiolvasnunk. Itt lehetőség van egyedi nevek kialakítására. Lásd lentebb a banner felvételénél extra paraméterek bekezdés. A kreatívhoz ilyenkor csatolni kell a ''JSON''-t, melyet a kampánymanager felvehet a banner mellé. Ebben a CT linkek nevei legyenek a kulcsok, és értékük legyen a kívánt landing URL. Például: :!: **Létfontosságú, hogy a csatolt ''JSON'' ne tartalmazzon sortörést, csak egy sor legyen az egész. Különböző ingyenes eszközök segítségével gondoskodhatunk erről, pl.: [[http://www.willpeavy.com/minifier/]]** :!: ** További követelmény, hogy dupla idézőjelek közé helyezzük a kulcsokat és értékeket. Objektumunk validitását ellenőrizhetjük például az alábbi oldalon: [[http://jsonlint.com/]]** {"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"} Ez után ezeken a neveken kell kiolvasnunk a kívánt linkeket. === HTML példa === CT === JS példa === A második linket kiolvasva ==== Funkciók használata ==== A ''goa-helper.js'' regisztrál különböző funkciókat. Ezek általában a nyitó és záró funkciók, Slider esetén az eltűntető funkció is használható. Ezek neveit szintén a kapott ''GET'' paraméterekből nyeri. Ezek alapértéke funkciónként. Felülírásra van lehetőség, az extra paramétereket tartalmazó ''JSON'' segítségével. {"closeFUNCTION": "myCloseName", "openFUNCTION": "myOpenName", "hideFUNCTION": "myHideName"} **A különböző displayek modulok elérhető funkcióiról itt található összefoglaló:\\ [[http://dev.adverticum.com/creatives:html#display_sablonok_funkcioinak_hasznalata]]** ==== Zárás ==== Alap értéke: ''closeFunction''. Kiolvasható: * ''goa.closeFUNCTION'' * ''goa.closeFunction'' === HTML példa === OPEN === JS példa === Az alap értéket használva: Dinamikusan, az átadott nevet kiolvasva: ==== Nyitás ==== Alap értéke: ''openFunction''. Kiolvasható: * ''goa.openFUNCTION'' * ''goa.openFunction'' === HTML példa === Az alap értéket használva: OPEN === JS példa === Az alap értéket használva: Dinamikusan, az átadott nevet kiolvasva: ==== Eltűntetés ==== Ez csak a Slider display esetén használt funkció, a másodlagos kreatív ezzel tudja elrejteni magát. A ''closeFunction'' ezzel szemben az alap kreatívot zárja be, mely hibákhoz vezethet. Alap értéke: ''hideFunction''. Kiolvasható: * ''goa.hideFUNCTION'' * ''goa.hideFunction'' === HTML példa === Az alap értéket használva: HIDE === JS példa === Az alap értéket használva: Dinamikusan, az átadott nevet kiolvasva: ==== Mérő pontok használata ==== Amennyiben a kreatív számára elérhető mérőpontot kap, azok neveit a sablon átadja a kreatívnak. Ezekből a ''goa-helper'' funkciókat generál a banner számára. Így tehát ha a banner kap egy mérőt, mondjuk ''bubbles'' néven, akkor a generált funkció neve ''bubbles_fire'' lesz. === HTML példa === HIDE === JS példa === ---- ===== Banner felvétele ===== ==== Általános banner felvétel ==== - A banner felvételéhez hozzunk létre egy Markup bannert. - Nevezzük el a bannert. - Adjuk meg a méreteit. :!: **Figyelem, ez fontos lépés, mert a kreatív ekkorában kerül megjelenítésre majd!** - Válasszuk a ''Sablonok'' fület. - Válasszuk ki a legördülő listából az ''easyHTML Banner'' nevű sablont. - A ''Banner file'' nevű legördülő menüből válasszuk ki a banner ''.html'' állományát, miután a zöld ''+'' gombbal feltöltöttük a kreatív megjelenítéséhez szükséges file-okat. ==== Extra paraméterek átadása a banner számára ==== Van lehetőségünk átadni extra parmétereket, például több CT-t is használó bannerek esetén. Erre szolgál a az ''Extra parameters'' mező, melybe az alábbi módon adhatunk meg értékeket. Ezt az objektumot a kreatív készítője szolgáltatja a banner mellé. {"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"} Ezt a sablon megkapja feldolgozza, és továbbítja a banner felé. Ha például meg szeretnénk adni extra paramétereket, azt egyeztetnünk kell a banner fejlesztőjével. Erre azért van szükség, hogy a megfelelő néven kapja meg a banner a kívánt adatokat. :!: **Figyelem! A felső példa nem fogja mérni a kattintásokat, ez csak szemléltetés, ha külső mérő linkeket használnánk. Ahhoz hogy a linkek mérjenek az alábbi példára van szükség.** Következő példánkban a két várt paraméter ''clickTAG0'' és ''clickTAG1'' lesz. Ebben a banner egy-egy CT linket vár. - Kattintsunk a ''Forrás'' fülre. - Kattintsunk az ''Új URL'' gombra az ''URL''-ek listája alatt. - Hozzuk létre a szükséges linkeket, amiket a banner mellé kapunk. :!: **Figyelem, itt minden URL-t mint CT fog mérni a rendszer!** - Jegyezzük meg ezek neveit, vagy azonosítóikat. - Kattintsunk a ''Forrás'' fülre, és az alábbi részt írjuk az ''Extra parameters'' mezőbe: {"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"} :!: Itt fontos, hogy mind a kulcs, mind az érték dupla idézőjelbe kerüljön. A valóságban természetesen az azonosítókat le kell majd cserélni, és ezután menthető is a banner. ----
if (goa.openNow === 'true') { /*...*/ }
{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
CT
{"closeFUNCTION": "myCloseName", "openFUNCTION": "myOpenName", "hideFUNCTION": "myHideName"}
OPEN
HIDE
{"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"}