AdsNG Developer Wiki

User Tools

Site Tools

You are here: start » creatives » ehtml
Trace:
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
Last revision Both sides next revision
creatives:ehtml [2015/09/29 17:11]
avarga [HTML példa] 		creatives:ehtml [2021/11/18 13:32]
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 fentebb 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 170: 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 206: 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 247: 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 290: 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 329: 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 a 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 337: 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 352: 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.txt · Last modified: 2021/11/18 13:33 by akokas

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki