User Tools

Site Tools


creatives:ehtml

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
creatives:ehtml [2015/09/29 16:55]
avarga [HTML example]
creatives:ehtml [2021/11/18 13:33] (current)
akokas [Kattintások kezelése több link esetén]
Line 3: Line 3:
 ===== Bevezető ===== ===== Bevezető =====
  
-Az easyHTML sablon egy olyan Markup sablon, mely a HTML bannerek kezelésének megkönnyíté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 manage-elése szempontjából, ill. a kompatibilis kreatív elkészítése szempontjából a bannerek fejlesztőinek!+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 ===== ===== Bannerek elkészítése =====
Line 15: Line 15:
 ==== Megkötések ==== ==== Megkötések ====
  
-**1.** A fentiek miatt az alábbi nevek védettnek minősülnek, de felülírhatóak ha a szükség úgy hozza, a ''goa'' kivételével.+**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''   * ''goa''
Line 50: Line 50:
  
 **4.** A kreatívhoz tartozó állományok mérete, nem haladhatja meg a 300KB-ot! **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 hozzáadása ====
Line 92: Line 112:
 <code html> <code html>
  
-<a id="clickTAG" href="" target="">CT</a>+<a id="clickTAG" href="" target=""></a>
 <script> <script>
     (function(){     (function(){
Line 118: Line 138:
 ==== Kattintások kezelése több link esetén ==== ==== Kattintások kezelése több link esetén ====
  
-Kattintások kezeléséhez, nam a ''goa.clickTAG'' változót kell kiolvasnunk. Itt lehetőség van egyedi nevek kialakítására. Lásd fentebb a banner felvételénél extra paraméterek bekezdés.+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: 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:
Line 124: Line 144:
 :!: **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/]]** :!: **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 rétékeket. Objektumunk validitását ellenőrizhetjük például az alábbi oldalon: [[http://jsonlint.com/]]**+:!: ** 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> <code javascript>
-{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG0": "//check.adverticum.net/"}+{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
 </code> </code>
  
Line 133: Line 153:
  
 === HTML példa === === HTML példa ===
- 
-Az első linket kiolvasva: 
  
 <code html> <code html>
  
-<a id="clickTAG0" href="" onclick="(function(){var cT=document.getElementById('clickTAG0');cT.href=goa.clickTAG0;cT.target=goa.clickTARGET;})();">CT</a>+<a id="clickTAG0" href="" target="">CT</a> 
 +<script> 
 +    (function(){ 
 +     
 +        var cT = document.getElementById('clickTAG0'); 
 +        cT.href = goa.clickTAG0; 
 +        cT.target = goa.clickTARGET; 
 +    })(); 
 +</script>
  
 </code> </code>
- 
 === JS példa === === JS példa ===
  
Line 165: Line 190:
 </code> </code>
  
-**A különböző displayek modulok elérhető funkcióiról itt található összefoglaló:\\ [[https://wiki.adverticum.net/html-doc:start#display_sablonok_funkcioinak_hasznalata]]**+**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 ==== ==== Zárás ====
Line 201: Line 226:
 <div id="closeButton"></div> <div id="closeButton"></div>
 <script> <script>
-    document.getElementById('closeButton').onclick = window[goa.closeFunction];+    document.getElementById('closeButton').onclick = window[goa.closeFUNCTION];
 </script> </script>
  
Line 242: Line 267:
 <div id="openButton"></div> <div id="openButton"></div>
 <script> <script>
-    document.getElementById('openButton').onclick = window[goa.openFunction];+    document.getElementById('openButton').onclick = window[goa.openFUNCTION];
 </script> </script>
  
Line 285: Line 310:
 <div id="hideButton"></div> <div id="hideButton"></div>
 <script> <script>
-    document.getElementById('hideButton').onclick = window[goa.hideFunction];+    document.getElementById('hideButton').onclick = window[goa.hideFUNCTION];
 </script> </script>
  
Line 324: Line 349:
   - Válasszuk a ''Sablonok'' fület.   - Válasszuk a ''Sablonok'' fület.
   - Válasszuk ki a legördülő listából az ''easyHTML Banner'' nevű sablont.   - 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. Amennyiben még nincs feltöltve, a zöld ''+'' gombbal feltölthetjük a szükséges file-okat.+  - 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 kreatív megjelenítéséhez szükséges file-okat.
  
 ==== Extra paraméterek átadása a banner számára ==== ==== Extra paraméterek átadása a banner számára ====
Line 332: Line 357:
 <code javascript> <code javascript>
  
-{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG0": "//check.adverticum.net/"}+{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
  
 </code> </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. 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. 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.
Line 347: Line 374:
  
 <code javascript> <code javascript>
-{"clickTAG0": "[url.e:100000]", "clickTAG1": "[url.e:200000]"}+{"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"}
 </code> </code>
  
-:!: Itt fontos, hogy mind a kulcs, mind az érték dupla időzőjelbe kerüljön, és az ''url.e'' használata is, ugyanis ekkor lesz encode-olva a link, ami a megfelelő működés alap feltétele.+:!: 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. A valóságban természetesen az azonosítókat le kell majd cserélni, és ezután menthető is a banner.
 ---- ----
creatives/ehtml.1443538537.txt.gz · Last modified: 2015/09/29 16:55 by avarga