Table of Contents

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 <iframe>-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 <head>-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.

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.

Például, ha mérőnket bubble-nek hívnák:

2. A banner nem alkalmazhat mappa szerkezetet! Minden szükséges állománynak egy szinten kell lennie a .html file-al. 

<img src="images/myImage.png" />

Ez alapján, ez lesz a megfelelő forma: 

<img src="myImage.png" />

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. 

<style>
    body {
        margin: 0;
        padding: 0;
        border: none;
 
        overflow: hidden;
    }
</style>

A goa-helper.js hozzáadása

A goa-helper.js beüzemeléséhez, csak illesszük az alábbi sort a banner <head> tagjába. Minden funkció mely ezekre a funkciókra és változókra hivatkozik ez után kell kerüljön. 

<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>

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é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ő:

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:

HTML példa

<a id="clickTAG" href="" target=""></a>
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG');
        cT.href = goa.clickTAG;
        cT.target = goa.clickTARGET;
    })();
</script>

JS példa

<div id="clickTAG"></div>
<script>
    document.getElementById('clickTAG').onclick = function () {
        window.open(goa.clickTAG, goa.clickTARGET);
    }
</script>

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

<a id="clickTAG0" href="" target="">CT</a>
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG0');
        cT.href = goa.clickTAG0;
        cT.target = goa.clickTARGET;
    })();
</script>

JS példa

A második linket kiolvasva 

<div id="clickTAG1"></div>
<script>
    document.getElementById('clickTAG1').onclick = function () {
        window.open(goa.clickTAG1, goa.clickTARGET);
    }
</script>

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ó:

HTML példa

<div onclick="closeFunction();">OPEN</div>

JS példa

Az alap értéket használva: 

<div id="closeButton"></div>
<script>
    document.getElementById('closeButton').onclick = closeFunction;
</script>

Dinamikusan, az átadott nevet kiolvasva: 

<div id="closeButton"></div>
<script>
    document.getElementById('closeButton').onclick = window[goa.closeFUNCTION];
</script>

Nyitás

Alap értéke: openFunction. Kiolvasható:

HTML példa

Az alap értéket használva: 

<div onclick="openFunction();">OPEN</div>

JS példa

Az alap értéket használva: 

<div id="openButton"></div>
<script>
    document.getElementById('openButton').onclick = openFunction;
</script>

Dinamikusan, az átadott nevet kiolvasva: 

<div id="openButton"></div>
<script>
    document.getElementById('openButton').onclick = window[goa.openFUNCTION];
</script>

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ó:

HTML példa

Az alap értéket használva: 

<div onclick="hideFunction();">HIDE</div>

JS példa

Az alap értéket használva: 

<div id="hideButton"></div>
<script>
    document.getElementById('hideButton').onclick = hideFunction;
</script>

Dinamikusan, az átadott nevet kiolvasva: 

<div id="hideButton"></div>
<script>
    document.getElementById('hideButton').onclick = window[goa.hideFUNCTION];
</script>

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

<div onclick="bubbles_fire();">HIDE</div>

JS példa

<div id="hideButton"></div>
<script>
    document.getElementById('hideButton').onclick = bubbles_fire;
</script>

Általános banner felvétel

  1. A banner felvételéhez hozzunk létre egy Markup bannert.
  2. Nevezzük el a bannert.
  3. Adjuk meg a méreteit. :!: Figyelem, ez fontos lépés, mert a kreatív ekkorában kerül megjelenítésre majd!
  4. Válasszuk a Sablonok fület.
  5. Válasszuk ki a legördülő listából az easyHTML Banner nevű sablont.
  6. 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.

  1. Kattintsunk a Forrás fülre.
  2. Kattintsunk az Új URL gombra az URL-ek listája alatt.
  3. 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!
  4. Jegyezzük meg ezek neveit, vagy azonosítóikat.
  5. 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.