Differences

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

--- creatives:html [2015/09/29 16:26] – [Kattintások kezelése egy link esetén] avarga
+++ creatives:html [2020/07/14 16:15] (current) – [Goa3 események használata] dtakacs
@@ Line 7: / Line 7: @@
 Az útmutató feltételezi, hogy a készítendő hirdetés az Adverticum AdServer beépítési kódjával, a goAdverticum3 (a továbbiakban goa3-ként hivatkozunk rá) kóddal lesz kiszolgálva, illetve hogy a hirdetést kiszolgáló kód a goa3 kód dokumentációja szerint lett beillesztve a weboldalba, ahol a hirdetés megjelenik.
-:!: **Figyelem! A Swiffy-vel konvertált, ill. Adobe Edge vagy Google Web Developerrel készült bannerek esetén az alábbi útmutatót kövessük: [[http://dev.adverticum.com/conversion:start]]**
+:!: **Figyelem! A Swiffyvel konvertált, ill. Adobe Edge vagy Google Web Developerrel készült bannerek esetén az alábbi útmutatót kövessük: [[http://dev.adverticum.com/conversion:start]]**
 ===== Fogalmak =====
@@ Line 13: / Line 13: @@
 ==== HTML vagy Markup banner? Mit jelent, és mi a különbség az Adverticum AdServerében a két megoldás között? ====
-A Markup banner nagyon hasonlít a normál HTML bannerhez, azzal a különbséggel, hogy az XHTML, XML sokkal kötöttebb formátumok, viszont felhasználói szempontból több lehetőséget biztosítanak. Technikailag lényeges különbség, hogy a Markup banner az oldal részeként jelenik meg, nem pedig iFrame-ben, mint a sima HTML banner. A Markup banner képes használni az oldal CSS-ét, illetve olyan extra funkciók válnak általa elérhetővé, mint a kinyíló és átúszó effektek, illetve egyéb látványos, vizuális megoldások.
+A Markup banner nagyon hasonlít a normál HTML bannerhez, azzal a különbséggel, hogy az XHTML, XML sokkal kötöttebb formátumok, viszont felhasználói szempontból több lehetőséget biztosítanak. Technikailag lényeges különbség, hogy a Markup banner az oldal részeként jelenik meg, nem pedig iFrame-ben, mint a sima HTML banner. A Markup banner képes használni az oldal CSS-ét, illetve olyan extra funkciók válnak általa elérhetővé, mint a kinyíló és átúszó effektek, illetve egyéb látványos, vizuális megoldások. **Az XHTML, XML vagy HTML5 kódokat az AdServer ellenőrzi**, és jelzi, ha hibát talál. Az ellenőrzésre használt validátorokról bővebb információt itt olvashat: [[http://dev.adverticum.com/creatives:validatorok]]
-==== HTML ====
-A HTML (HyperText Markup Language = hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki, és mára már internetes szabvánnyá vált a W3C (World Wide Web Consortium) támogatásával.
-==== XML ====
-Az XML (Extensible Markup Languag = Kiterjeszthető Jelölő Nyelv) a W3C által ajánlott általános célú leíró nyelv, speciális célú leíró nyelvek létrehozására. Az SGML egyszerűsített részhalmaza, mely különböző adattípusok leírására képes. Az elsődleges célja strukturált szöveg és információ megosztása az Interneten keresztül. Az XML-en alapuló nyelvek (például RDF, RSS, MathML, XSIL, SVG) leírása formális, így lehetővé téve a programok számára a dokumentumok módosítását és validálását a formátum előzetes ismerete nélkül.
-==== XHTML ====
-Az XHTML (eXtensible HyperText Markup Language) az XML jelölőnyelvek egy családja, amely a weboldalakhoz széleskörűen használt HyperText Markup Language-t tükrözi vagy kibővíti.
-Amíg a HTML (a HTML5-öt megelőzően) az Standard Generalized Markup Language-t, azaz egy rugalmas jelölőnyelv-keretrendszert felhasználóként volt definiálva, addig az XHTML alapja az XML, amely az SGML-nek egy jóval szigorúbb részhalmaza. Mivel az XHTML dokumentumoknak jól formázottnak kell lenniük, egy standard XML-értelmezővel is értelmezhetők, ellentétben a HTML-lel, amelynek megengedőbb HTML-értelmező szükséges.
-==== HTML5 ====
-A HTML5 a HTML (Hypertext Markup Language, a web fő jelölőnyelve) korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja, hogy a webes alkalmazásokhoz ne legyen szükség pluginek (pl. Adobe Flash, Microsoft Silverlight, Oracle JavaFX) telepítésére.
-A specifikáció a HTML4 és az XHTML1 új verzióját jelenti, a hozzájuk tartozó DOM2 HTML API-val együtt. A HTML5 specifikációban leírt formátumba történő migráció HTML4-ről, vagy XHTML1-ről a legtöbb esetben egyszerű, mivel a visszamenőleges kompatibilitás biztosított.
-----
 ===== easyHTML sablonhoz készülő kreatívokról =====
-**Ennek használatát javasoljuk, és az erről szóló dokumentációnk itt érhető el: [[https://dev.adverticum.net/creatives:ehtml]]**
+**Ennek használatát javasoljuk, és az erről szóló dokumentációnk itt érhető el: [[http://dev.adverticum.com/creatives:ehtml]]**
-Új megoldásunk célja, hogy megkönnyítsük az egyre terjedő, és a Flash-t leváltó HTML alapú kreatívok kezelését a kampánymanagerek és a kreatívosok számára egyaránt. Ezt egy Markup sablon formályában alakítottuk ki, melyet mindeki számára díjmentesen elérhetővé teszünk.
+Megoldásunk célja, hogy megkönnyítsük az egyre terjedő HTML alapú kreatívok kezelését a kampánymanagerek és a kreatívosok számára egyaránt. Ezt egy Markup sablon formájában alakítottuk ki, melyet mindneki számára díjmentesen elérhetővé teszünk.
 A kreatív elkészítése szempontjából sokkal egyszerűbb a folyamat, mert kreatívnak lényegesen kevesebb megkötésnek kell megfelelnie. Címszavakban a következő előnyökkel jár, szemben a HTML banner használatával:
@@ Line 75: / Line 54: @@
 <code html>
-<link type=”text/css” href=”[fájlnév.kiterjesztés]” />
+<link type="text/css" href="[file:fájlnév.kiterjesztés]" />
 </code>
@@ Line 81: / Line 60: @@
 <code html>
-<div style=”background:[fáljnév.kiterjesztés]”></div>
+<div style="background:url([file:fáljnév.kiterjesztés])"></div>
 </code>
@@ Line 118: / Line 97: @@
 <code html>
-<a id="clickTAG" target="_blank" href="[cthref]" onclick="(function () document.getElementById('clickTAG').href=HttpGetVars.cthref})();"></a>
+<a id="clickTAG" target="_blank" href="[cthref]" onclick="(function(){document.getElementById('clickTAG').href=HttpGetVars.cthref})();"></a>
 </code>
@@ Line 183: / Line 162: @@
 <code html>
-<img alt=”” src=”[fáljnév.kiterjesztés]”></img>
+<img alt=”” src=”[file:fáljnév.kiterjesztés]”></img>
 </code>
@@ Line 237: / Line 216: @@
 | [cthref]          | A CT URL                             |
 | [zone]            | Zóna azonosító                       |
-| [goal]            | Goal (alkampány) azonosító           |
+| [goal]            | Goal (terv) azonosító           |
 | [banner]          | Banner azonosító                     |
 | [ord]             | Page impression ID                   |
-| [uniqueID]        | Page impression ID                   |
 | [imgpre]          | A banner helye teljes URL-lel        |
 | [zona]            | Zóna azonosító                       |
@@ Line 361: / Line 339: @@
 :!: **Figyelem! A HTML bannert az AdServer iframe-ben jeleníti meg, így Markup bannerekre az itt írtak nem alkalmazhatóak. Az itt megadott linkeket egy iframe-ben megjelenítve végezhető el a mérés a Markup bannerek esetén.**
-A HTML bannerekben (de a Flash bannerben is) megoldható egyes eseményeknek (például a nem cél oldalra vivő kattintásoknak, vagy a tabok használatának) nyomonkövetése is, speciális tracking URL-ek segítségével. A tracking URL-eket és azt az információt, hogy melyik tracking URL-nek melyik eseményt kell mérnie, a kampánymenedzsertől kapja a bannerkészítő. (Ezeket a kampánymenedzsernek külön mérőkampányba érdemes felvennie.)
+A HTML bannerekben megoldható egyes eseményeknek (például a nem cél oldalra vivő kattintásoknak, vagy a tabok használatának) nyomonkövetése is, speciális tracking URL-ek segítségével. A tracking URL-eket és azt az információt, hogy melyik tracking URL-nek melyik eseményt kell mérnie, a kampánymenedzsertől kapja a bannerkészítő. (Ezeket a kampánymenedzsernek külön mérőkampányba érdemes felvennie.)
 :!: ** Figyelem! Az adminfelületen felvehető és az alábbi módon referálható URL-ek beleszámítanak a banner CT adataiba, így trackingre nem ezeket, hanem a tracking linkek direkt beépítését ajánljuk!**
@@ Line 392: / Line 370: @@
 Az összegyűjtött adatokat a rendszer egy ideig tárolja/gyűjti, majd a ciklikus adatküldő juttatja el szervereink felé. Ez 3 másodpercenként történik, amennyiben van küldendő adat, és a böngészőablak is fókuszban van. Ezzel minimalizálható az adatvesztés, de az adatforgalom is jóval csekélyebb, mintha minden mérést egyből küldenénk.
-A különböző banner típusokban (HTML, Flash stb.) különbözőképpen kell meghívni a mérőpontokat. Ezekre mutatunk egy-egy példát lentebb. A bannerhez rendelt mérőpontokat a zónán keresztül lehet elérni, a fentebb bemutatott ''.getZone()'' függvény segítségével.
+A különböző banner típusokban (HTML,stb.) különbözőképpen kell meghívni a mérőpontokat. Ezekre mutatunk egy-egy példát lentebb. A bannerhez rendelt mérőpontokat a zónán keresztül lehet elérni, a fentebb bemutatott ''.getZone()'' függvény segítségével.
 Azt, hogy egy mérőpontot hányszor lehet meghívni egy banner letöltésen belül, lehet korlátozni, ami azt jelenti, hogy például bannerenként maximum 5 nyitásig számoljon a rendszer egy oldalletöltésen belül, mert a túlzott adatgyűjtés az információmennyiség rovására mehet.
@@ Line 441: / Line 419: @@
 goAdverticum3.getZone([zone]).measure.play.fire();
+</code>
+==== Időmérő ====
+Az időmérővel egy kezdő (start) és egy vég (stop) esemény közötti időt lehet mérni. Lényegében úgy működik, mint egy stopperóra. Amennyiben egy mérés már folyamatban van, és újabb ''start()'' utasítást kap a rendszer, az előző mérést leállítja, elküldi a mérést, és egy újat indít el. Lényegében az történik, mintha meghívtuk volna a ''stop()'' funkciót, majd rögtön utána a ''start()''-ot.
+==Határértékei:==
+  * Maximális meghívhatóság
+  * Minimálisan mérhető idő
+  * Maximálisan mérhető idő
+=== HTML banner esetén ===
+Példánkban egy banner nyitott állapotban töltött idejét mérjük. Ehhez az 'Time' mérőt használjuk.
+Időmérés kezdete:
+<code javascript>
+// Küldünk egy üzenetet a legfelső, a Goa3-at futattó window-nak, majd jelezzük
+// a meghívandó mérőt.
+window.top.postMessage('[zone].measure.Time.start', '*');
+</code>
+Időmérés vége:
+<code javascript>
+// Küldünk egy üzenetet a legfelső, a Goa3-at futattó window-nak, majd jelezzük
+// a meghívandó mérőt.
+window.top.postMessage('[zone].measure.Time.stop', '*');
+</code>
+=== Markup banner esetén ===
+A példában szereplő 'Time' időmérő felépítése, a zóna adatainak lekérése után az alábbi formában érhető el.
+<code javascript>
+{
+    0000000: { // A zóna ID a kulcs, és a zónának van tartalma.
+        displayed: {Boolean},
+        ...
+        node: {Object},
+        measures: {
+            Time: {
+                start: function () {...},
+                stop: function () {...},
+            }
+        }
+    }
+}
+</code>
+Példánkban egy banner nyitott állapotban töltött idejét mérjük. Ehhez az 'Time' mérőt használjuk.
+Időmérés kezdete:
+<code javascript>
+// Elindítjuk az időmérést.
+goAdverticum3.getZone([zone]).measure.Time.start();
+</code>
+Időmérés vége:
+<code javascript>
+// Leállítjuk az időmérést.
+goAdverticum3.getZone([zone]).measure.Time.stop();
+</code>
+==== Mennyiségmérő ====
+A mennyiségmérőkkel lehetőség nyílik összesített eredményeket küldeni a rendszernek. Az egyszerű mérővel szemben itt a funkció paramétereként elküldhetünk egy számot, melyet mindenképpen pozitív egész (''int'') számmá alakít a rendszer!
+==Határértékei:==
+  * Maximális meghívhatóság
+  * Minimálisan mérhető mennyiség
+  * Maximálisan mérhető mennyiség
+=== HTML banner esetén ===
+Példánkban egy buborékpusztító játék ereményét mérjük. Ehhez pedig a 'bubbles' mérőt használjuk.
+<code javascript>
+// Küldünk egy üzenetet a legfelső, a Goa3-at futattó window-nak, majd jelezzük
+// a meghívandó mérőt, és zárójelben az értéket.
+window.top.postMessage('[zone].measure.bubbles.fire(5)', '*');
+</code>
+=== Markup banner esetén ===
+A példában szereplő 'bubbles' mennyiségmérő felépítése a zóna adatainak lekérése után az alábbi formában érhető el.
+<code javascript>
+{
+    0000000: { // A zóna ID a kulcs, és a zónának van tartalma.
+        displayed: {Boolean},
+        ...
+        node: {Object},
+        measures: {
+            bubbles: {
+                fire: function ( value ) {...}
+            }
+        }
+    }
+}
+</code>
+Példánkban egy buborékpusztító játék ereményét mérjük. Ehhez pedig a 'bubbles' mérőt használjuk.
+<code javascript>
+// Egyszerűen elsütjük az eseményt.
+goAdverticum3.getZone([zone]).measure.bubbles.fire(5);
 </code>
@@ Line 495: / Line 587: @@
 </code>
-**2. Alternatíva lehet az egyedi zónára való feliratkozás**, ami a kreatív készítőknek jelenthet könnyebbséget. Ezzel kivitelezhető lehet például egy olyan kreatív, mely csak akkor kezdi el az animációját, mikor képernyőre kerül. Ez Markup vagy Flash bannerek esetében működhet.
+**2. Alternatíva lehet az egyedi zónára való feliratkozás**, ami a kreatív készítőknek jelenthet könnyebbséget. Ezzel kivitelezhető lehet például egy olyan kreatív, mely csak akkor kezdi el az animációját, mikor képernyőre kerül. Ez Markup esetében működhet.
 <code javascript>
@@ Line 794: / Line 886: @@
 http://bit.ly/Pjf5Ik
-{{ :html:qr_ko_d.png?nolink&300 |}}
+{{ :creatives:qr_ko_d.png?nolink&300 |}}
 A banner forráskódja az alábbi linken érhető el:
@@ Line 804: / Line 896: @@
 ===== Mobil kombinált display =====
-{{ :html-doc:mobil_kombi_uj.png?nolink&600 |}}
+{{ :creatives:mobil_kombi_uj.png?nolink&600 |}}
 ==== Bázis kreatív ====