User Tools

Site Tools


creatives:html

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
Next revision Both sides next revision
creatives:html [2015/09/29 16:26]
avarga [Kattintások kezelése egy link esetén]
creatives:html [2018/06/12 11:33]
zkocsis
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. 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 ===== ===== 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? ==== ==== 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 ===== ===== 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.+Ú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á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: 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> <code html>
-<link type=text/css” href=[fájlnév.kiterjesztés]” />+<link type="text/csshref="[file:fájlnév.kiterjesztés]/>
 </code> </code>
  
Line 81: Line 60:
  
 <code html> <code html>
-<div style=background:[fáljnév.kiterjesztés]></div>+<div style="background:url([file:fáljnév.kiterjesztés])"></div>
 </code> </code>
  
Line 118: Line 97:
  
 <code html> <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> </code>
  
Line 183: Line 162:
  
 <code html> <code html>
-<img alt=”” src=”[fáljnév.kiterjesztés]”></img>+<img alt=”” src=”[file:fáljnév.kiterjesztés]”></img>
 </code> </code>
  
Line 237: Line 216:
 | [cthref]          | A CT URL                             | | [cthref]          | A CT URL                             |
 | [zone]            | Zóna azonosító                       | | [zone]            | Zóna azonosító                       |
-| [goal]            | Goal (alkampány) azonosító           |+| [goal]            | Goal (terv) azonosító           |
 | [banner]          | Banner azonosító                     | | [banner]          | Banner azonosító                     |
 | [ord]             | Page impression ID                   | | [ord]             | Page impression ID                   |
-| [uniqueID]        | Page impression ID                   | 
 | [imgpre]          | A banner helye teljes URL-lel        | | [imgpre]          | A banner helye teljes URL-lel        |
 | [zona]            | Zóna azonosító                       | | [zona]            | Zóna azonosító                       |
Line 441: Line 419:
 goAdverticum3.getZone([zone]).measure.play.fire(); 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> </code>
  
Line 794: Line 886:
 http://bit.ly/Pjf5Ik 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: A banner forráskódja az alábbi linken érhető el:
Line 804: Line 896:
 ===== Mobil kombinált display ===== ===== Mobil kombinált display =====
  
-{{ :html-doc:mobil_kombi_uj.png?nolink&600 |}}+{{ :creatives:mobil_kombi_uj.png?nolink&600 |}}
  
 ==== Bázis kreatív ==== ==== Bázis kreatív ====
creatives/html.txt · Last modified: 2020/07/14 16:15 by dtakacs