Adserver Developer Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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.

<code html>

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

</code>

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

<code html>

<img src="myImage.png" />

</code>


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

<code html>

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

</code>

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

<code html>

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

</code>

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

<code javascript>

if (goa.openNow === 'true') {
/*...*/
}

</code>

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

<code html>

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

</code>
=== JS példa ===

<code html>

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

</code>

==== 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/]]**

<code javascript>
{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
</code>

Ez után ezeken a neveken kell kiolvasnunk a kívánt linkeket.

=== HTML példa ===

<code html>

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

</code>
=== JS példa ===

A második linket kiolvasva

<code html>

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

</code>

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

<code javascript>
{"closeFUNCTION": "myCloseName", "openFUNCTION": "myOpenName", "hideFUNCTION": "myHideName"}
</code>

**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 ===

<code html>

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

</code>

=== JS példa ===

Az alap értéket használva:

<code html>

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

</code>

Dinamikusan, az átadott nevet kiolvasva:

<code html>

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

</code>

==== Nyitás ====

Alap értéke: ''openFunction''. Kiolvasható:

  * ''goa.openFUNCTION''
  * ''goa.openFunction''

=== HTML példa ===

Az alap értéket használva:

<code html>

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

</code>

=== JS példa ===

Az alap értéket használva:

<code html>

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

</code>

Dinamikusan, az átadott nevet kiolvasva:

<code html>

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

</code>

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

<code html>

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

</code>

=== JS példa ===

Az alap értéket használva:

<code html>

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

</code>

Dinamikusan, az átadott nevet kiolvasva:

<code html>

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

</code>

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

<code html>

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

</code>

=== JS példa ===

<code html>

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

</code>

----

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

<code javascript>

{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}

</code>

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:

<code javascript>
{"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"}
</code>

:!: 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.
----