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.

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.

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

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

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

goa.closeFUNCTION
goa.closeFunction

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

goa.openFUNCTION
goa.openFunction

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

goa.hideFUNCTION
goa.hideFunction

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>

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.

Adserver Developer Wiki

Table of Contents

easyHTML sablonhoz készített HTML5 bannerek gyártása és felvétele

Bevezető

Bannerek elkészítése

Bevezető

Megkötések

Felkészülés a kiszolgálásra

A goa-helper.js hozzáadása

A nyitva indulás vizsgálata

Kattintások kezelése egy link esetén

HTML példa

JS példa

Kattintások kezelése több link esetén

HTML példa

JS példa

Funkciók használata

Zárás

HTML példa

JS példa

Nyitás

HTML példa

JS példa

Eltűntetés

HTML példa

JS példa

Mérő pontok használata

HTML példa

JS példa

Banner felvétele

Általános banner felvétel

Extra paraméterek átadása a banner számára