Differences

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

--- creatives:ehtml [2015/09/30 13:28] – [Bevezető] avarga
+++ creatives:ehtml [2021/11/18 13:33] (current) – [Kattintások kezelése több link esetén] akokas
@@ Line 3: / Line 3: @@
 ===== 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 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 =====
@@ Line 15: / Line 15: @@
 ==== 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''
@@ Line 50: / Line 50: @@
 **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 ====
@@ Line 92: / Line 112: @@
 <code html>
-<a id="clickTAG" href="" target="">CT</a>
+<a id="clickTAG" href="" target=""></a>
 <script>
     (function(){
@@ Line 118: / Line 138: @@
 ==== 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:
@@ 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/]]**
-:!: ** 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>
-{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG0": "//check.adverticum.net/"}
+{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
 </code>
@@ Line 170: / Line 190: @@
 </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 ====
@@ Line 206: / Line 226: @@
 <div id="closeButton"></div>
 <script>
-    document.getElementById('closeButton').onclick = window[goa.closeFunction];
+    document.getElementById('closeButton').onclick = window[goa.closeFUNCTION];
 </script>
@@ Line 247: / Line 267: @@
 <div id="openButton"></div>
 <script>
-    document.getElementById('openButton').onclick = window[goa.openFunction];
+    document.getElementById('openButton').onclick = window[goa.openFUNCTION];
 </script>
@@ Line 290: / Line 310: @@
 <div id="hideButton"></div>
 <script>
-    document.getElementById('hideButton').onclick = window[goa.hideFunction];
+    document.getElementById('hideButton').onclick = window[goa.hideFUNCTION];
 </script>
@@ Line 329: / Line 349: @@
   - 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. 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 ====
@@ Line 337: / Line 357: @@
 <code javascript>
-{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG0": "//check.adverticum.net/"}
+{"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.
@@ Line 352: / Line 374: @@
 <code javascript>
-{"clickTAG0": "[url.e:100000]", "clickTAG1": "[url.e:200000]"}
+{"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"}
 </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.
 ----