Adserver Developer Wiki

User Tools

Site Tools

You are here: start » conversion
Trace:
conversion:start

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
conversion:start [2015/09/21 14:45] – [A konvertált állomány átalakítása, Adverticum AdServerben való futtatáshoz] avargaconversion:start [2020/12/11 11:06] (current) – zkocsis
Line 1: Line 1:
 +====== Bevezető ======
 +
 :!: **Figyelem!** :!: **Figyelem!**
  
 **Az útmutatók ezen dokumentáció publikálásával egy időben aktuális programverziókhoz készültek. Mivel ezek az eszközök is fejlődnek, egy új verzió megjelenésével az útmutatók elavulhatnak. Amennyiben a leírtak nem hoznák a várt eredményt, kérjük ezt jelezze a emailben kollégáinknak a** [[support@adverticum.com]]** címen.** **Az útmutatók ezen dokumentáció publikálásával egy időben aktuális programverziókhoz készültek. Mivel ezek az eszközök is fejlődnek, egy új verzió megjelenésével az útmutatók elavulhatnak. Amennyiben a leírtak nem hoznák a várt eredményt, kérjük ezt jelezze a emailben kollégáinknak a** [[support@adverticum.com]]** címen.**
  
-====== Swiffy-vel konvertált Flash bannerek átalakítása és felvétele ======+Jelen útmutató az easyHTML Banner sablon követelményeinek való megfelelésben nyújt segítséget. Ezeket teljes terjedelmükben itt lelhetőek fel: [[http://dev.adverticum.com/creatives:ehtml]]
  
 +Alább a gyakrabban használt szerkesztő és konvertáló eszközök által előállított bannerek kódjainak átalakításában kívánunk segítséget nyújtani, software specifikus lépéseken keresztül.
  
-A Swiffy egy ingyenesen használható Google termék, mely a legtöbb Flash kreatívot képes HTML kreatívvá konvertálni. Ez a szolgáltatás az alábbi címen érhető el online:+===== Adobe Animate CC-vel készült bannerek átalakítása és felvétele =====
  
-[[https://developers.google.com/swiffy/convert/upload]] 
  
-Az alábbi dokumentáció egyszerű beágyazott Flash alapú bannerek átalakításához nyújt segítséget. A hibátlan működés előfeltétele, hogy olyan kreatívot használjunk, mely megfelel a bannerkészítési útmutatónkban foglaltaknak: 
  
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/413/0/bannerkeszitesi-utmutato-az-adverticum-adserverhez]]+=== 1.) Nyissuk meg a .html file-t egy szövegszerkesztőben (pl.: Notepad++) ===
  
-===== Konvertálás menete ===== 
  
-**1.** Válasszuk ki a file-t a “Choose File” gomb lenyomása után. Valamint fogadjuk el a felhasználási feltételeket, a képen látható check-box-ra kattintva.+=== 2.) A goa-helper.js hozzáadása ===
  
-{{ :conversion:screen_shot_2015-08-18_at_5.13.24_pm.png?nolink&600 |}}+A goa-helper.js beüzemeléséhez csak illesszük az alábbi sort a banner <head> tagjába. Minden funkció, mely ezekre a funkciókra és változókra hivatkozik ez után kell, hogy kerüljön.
  
-**2.** Kattintsunk az “UPLOAD” gombra a feltöltéshez. +<code html> 
-{{ :conversion:screen_shot_2015-08-18_at_5.13.12_pm.png?nolink&600 |}}+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script> 
 +</code>
  
-**3.** A sikeres konvertálást követően a “VIEW CONVERSION” gombra jobb gombbal kattintva, mentsük le az előállított HTML állományt. 
-{{ :conversion:screen_shot_2015-08-18_at_5.13.49_pm.png?nolink&600 |}} 
  
-===== A konvertált állomány átalakítása, Adverticum AdServerben való futtatáshoz =====+=== 3.) Kattintások kezelésének kialakítása ===
  
-:!: **Figyelem, ha a kreatív Swiffy 7.x.x-el, vagy magasabb verzióval készült, nincs szükség a konvertálásra!**+Kattintások kezeléséhez a goa.clickTAG változót kell kiolvasnunk, és az alábbi módon felhasználnunk. 
 +  
 +Az <a> tag azt a felületet teszi kattinthatóvá, mely a nyitó és a záró része között található. Ha azt szeretnénk, hogy a teljes kreatívunk kattintható legyen, a nyitó (<a>) taget a kreatívot tartalmazó wrapper elején, a záró taget (</a>) pedig a végén kell meghívnunk.
  
-Ezt a banner forrásának elején tudjuk ellenőrizni, a ''swiffy/**v7.3**'' részt keresve:+Például:
  
 <code html> <code html>
 +<a id="clickTAG" href="" target="">
 + <div id="animation_container" ... >
 + <!-- A banner HTML kódja -->
 + </div>
 +</a>
  
-<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3/runtime.js"></script>+<!-- A kattintást kezelő script -->
  
 +<script>
 +    (function(){
 + 
 +        var cT = document.getElementById('clickTAG');
 +        cT.href = goa.clickTAG;
 +        cT.target = goa.clickTARGET;
 +    })();
 +</script>
 </code> </code>
  
-Egyébb esetben lementett HTML file még nem áll készen a kiszolgálásra. Ebben el kell végeznünk egy sor módosítást. Ez fogja átadni a bannernek a clickTAG és clickTARGET változókat. Amennyiben a kreatív az utóbbit nem használja, nem probléma. 
  
-**1.** Nyissuk meg a lementett file-t egy szövegszerkesztőben (pl.: Notepad++).+===== A banner felvétele az AdServerbe =====
  
-**2.** Keressük meg az alábbi részt a kód vége felé:+Az így konvertált bannerek futtatásához kövessük az általános easyHTML felvételi lépéseket: [[http://dev.adverticum.com/creatives:ehtml#banner_felvetele]] 
 +----
  
-<code html> +====== Adobe Edge kódok átalakítása és felvétele ======
-    <script> +
-       +
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), +
-          swiffyobject, {}); +
-       +
-      stage.start(); +
-    </script> +
-</code>+
  
 +Az Adobe Edge a Flash helyettesítésére szánt HTML5 képes szerkesztő szoftver, bővebb információ az alábbi linken érhető el:
  
-**3.** Ebbe illesszük be az alábbi sort, a ''stage.start();'' elé: +[[https://creative.adobe.com/products/animate]]
-<code html> +
-stage.setFlashVars(location.search.split('?')[1]); +
-</code>+
  
-Ez után így kell kinéznie a kódunknak:+A kódon kell kisebb változtatásokat eszközölni, hogy minden referencia és a kattintás is megfelelő legyen az easyHTML Bannerként való futtatáshoz. Ennek menetéről és az átalakított kód felvételéről alább. Az easyHTML bannerek megkötéseiről általánosságban az alábbi linken írunk:
  
-<code html> +[[http://dev.adverticum.com/creatives:ehtml]]
-    <script>+
  
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), +===== A banner átalakítása =====
-          swiffyobject, {});+
  
-      stage.setFlashVars(location.search.split('?')[1]); +**1.** Az Edge-el előállított kreatív mappákba rendezi a hivatkozott állományokat. Első lépésként mozgassunk ki minden ilyen állományt, hogy a ''.html'' file-al egy mappában legyenek közvetlenül.
-      stage.start(); +
-    </script> +
-</code>+
  
-**4.** Mentsük el az állományt. +**2.** Nyissuk meg a ''.html'' file-t, egy szövegszerkesztőben (pl.: Nodepad++).
-===== A banner felvétele az AdServerbe =====+
  
-Az így konvertált bannerek futtatásához jelenleg HTML bannerre lesz szükségünk. A HTML bannerek felvételéről általánosságban itt írunk: +**3.** Keressük meg az ''<!--Adobe Edge Runtime-->'' kifejezést a banner ''<head>'' tag elején, és illesszük be az alábbi sort ez elé:
- +
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/127/2/html-banner-ltrehozsa]] +
- +
-A különbség az megszokott banner felvétellel szemben, hogy itt nem a HTML banner tartalmát használjuk forrásként, hanem az alábbi sort. Példánkban a file neve ''embedded_250x250_03.html'', a mérete pedig ''250px'' x ''250px''.+
  
 <code html> <code html>
-<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 250px; height: 250px; border: none;"></iframe>+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
 </code> </code>
  
-**1.** A kódban minden bannerhez módosítani kell a file-nevet és a méretet. Ha tehát a bannerünk neve mondjuk ''example-banner.html'', a mérete pedig ''728px'' x ''90px'', a fenti sor az alábbi szerint módosul:+Ez után valahogy így kell kinéznie az idevágó résznek:
  
 <code html> <code html>
-<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 728px; height: 90px; border: none;"></iframe>+ 
 +    <title>Untitled</title> 
 +    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script> 
 +<!--Adobe Edge Runtime-->
 </code> </code>
  
-**2.** Az következő lépés, a módosított HTML file feltöltése lesz a banner alatti file-lista “File felvétele” gombjára kattintva. +**4.** Nyissuk meg a bannerhez tartozó ''.js'' állományt egy szövegszerkesztőben (pl.: Nodepad++).
- +
-**3.** Ezután menthetjük is a bannert. +
- +
----- +
- +
-====== Adobe Edge kódok átalakítása és felvétele ====== +
- +
-Az Adobe Edge a Flash helyettesítésére szánt HTML5 képes szerkesztő szoftver, bővebb információ az alábbi linken érhető el: +
- +
-[[https://creative.adobe.com/products/animate]] +
- +
-A kódon kell kisebb változtatásokat eszközölni, hogy minden referencia és a kattintás is megfelelő legyen a HTML bannerként való futtatáshoz. Ennek menetéről és az átalakított kód felvételéről alább. A HTML bannerek megkötéseiről általánosságban az alábbi linken írunk, ahonnan a HTML bannerekről szóló megkötéseknek kell megfelelni, a Markup bannerekének nem: +
- +
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/395/0/html5-banner-keszitesi-utmutato]] +
- +
-===== A banner átalakítása ===== +
- +
-**1.** Az Edge-el előállított kreatív mappákba rendezi a hivatkozott állományokat. Első lépésként mozgassunk ki minden ilyen állományt, hogy a ''.html'' file-al egy mappában legyenek közvetlenül. +
- +
-**2.** Nyissuk meg a bannerhez tartozó ''.js'' állományt egy szövegszerkesztőben (pl.: Nodepad++).+
  
 :!: **Figyelem!** :!: **Figyelem!**
Line 119: Line 96:
   * Ezzel szemben 6.x.x esetén minden módosítást a bannerNeve_edge.js-ben kell kivitelezni.   * Ezzel szemben 6.x.x esetén minden módosítást a bannerNeve_edge.js-ben kell kivitelezni.
  
-**3.** Keressünk rá az alábbi kifejezésre:+**5.** Keressünk rá az alábbi kifejezésre:
  
 ''images/'' ''images/''
Line 135: Line 112:
 </code> </code>
  
-**4.** A kattintások kezeléséhez, az alábbi kifejezésre keressünk:+**6.** A kattintások kezeléséhez, az alábbi kifejezésre keressünk:
  
 ''window.open'' ''window.open''
Line 150: Line 127:
  
 <code javascript> <code javascript>
-decodeURIComponent(location.search.split('?')[1].split('=')[1])+goa.clickTAG
 </code> </code>
  
Line 157: Line 134:
 <code javascript> <code javascript>
 /*...*/ "click",function(sym,e){ /*...*/ "click",function(sym,e){
-    window.open(decodeURIComponent(location.search.split('?')[1].split('=')[1]),"_blank");+    window.open(goa.clickTAG,"_blank");
 }); });
 </code> </code>
Line 163: Line 140:
 :!: Itt fontos odafigyelni, hogy az URL mögött ''"_blank"'' szerepeljen, mert különben nem új ablakban nyílik majd meg a cél URL. :!: Itt fontos odafigyelni, hogy az URL mögött ''"_blank"'' szerepeljen, mert különben nem új ablakban nyílik majd meg a cél URL.
  
 +**7.** Ha a banner záró és/vagy nyitó függvényeket alkalmaz, akkor az alábbi leírásban foglalt példakódokat alkalmazzuk a nyitó/záró/eltűntető gombokon:
 +
 +[[http://dev.adverticum.com/creatives:ehtml#funkciok_hasznalata]]
 ===== A banner felvétele az AdServerbe ===== ===== A banner felvétele az AdServerbe =====
  
-Az így konvertált bannerek futtatásához jelenleg HTML bannerre lesz szükségünk. A HTML bannerek felvételéről általánosságban itt írunk: +Az így konvertált bannerek futtatásához kövessük az általános easyHTML felvételi lépéseket: [[http://dev.adverticum.com/creatives:ehtml#banner_felvetele]]
- +
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/127/2/html-banner-ltrehozsa]] +
- +
-A különbség az megszokott banner felvétellel szemben, hogy itt nem a HTML banner tartalmát használjuk forrásként, hanem az alábbi sort. Példánkban a file neve ''embedded_250x250_03.html'', a mérete pedig ''250px'' x ''250px''. +
- +
-<code html> +
-<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]" style="width: 250px; height: 250px; border: none;"></iframe> +
-</code> +
- +
-**1.** A kódban minden bannerhez módosítani kell a file-nevet és a méretet. Ha tehát a bannerünk neve mondjuk ''example-banner.html'', a mérete pedig ''728px'' x ''90px'', a fenti sor az alábbi szerint módosul: +
- +
-<code html> +
-<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]" style="width: 728px; height: 90px; border: none;"></iframe> +
-</code> +
- +
-**2.** Az következő lépés, az összes a bannerhez tartozó állomány feltöltése lesz a banner alatti file-lista “File felvétele” gombjára kattintva. +
- +
-**3.** Ezután menthetjük is a bannert.+
  
 ---- ----
Line 193: Line 155:
 [[https://www.google.com/webdesigner/]] [[https://www.google.com/webdesigner/]]
  
-A GWD-vel készült bannerek könnyen átalakíthatóak Adverticum kompatibilis HTML bannerré. Ennek menetéről és az átalakított kód felvételéről alább. A HTML bannerek megkötéseiről általánosságban az alábbi linken írunk, ahonnan a HTML bannerekről szóló megkötéseknek kell megfelelni, a Markup bannerekének nem:+A GWD-vel készült bannerek könnyen átalakíthatóak Adverticum kompatibilis easyHTML Bannerré. Ennek menetéről és az átalakított kód felvételéről alább. Az easyHTML bannerek megkötéseiről általánosságban az alábbi linken írunk:
  
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/395/0/html5-banner-keszitesi-utmutato]]+[[http://dev.adverticum.com/creatives:ehtml]]
  
 ===== A banner átalakítása ===== ===== A banner átalakítása =====
Line 203: Line 165:
 **2.** Nyissuk meg az említett ''.html'' file-t egy szövegszerkesztő programmal (pl.: Nodepad++). **2.** Nyissuk meg az említett ''.html'' file-t egy szövegszerkesztő programmal (pl.: Nodepad++).
  
-**3.** Mivel a HTML bannerek forrásaként megadott kód a ''<body>'' tagba kerül beírásra, ezért a banner kódja csak a legszükségesebb, a ''<body>'' tagon belül is valid elemeket tartalmazhatja. Így a felesleges elemek általában ''<!DOCTYPE>'', ''<html>'', ''<head>'', ''<body>'' és ''<meta>'' tagok. Ez utóbbi törlése nem kötelező, de a böngésző figyelmen kívül fogja hagyni nagy valószínűséggel, mivel ezeknek csak a ''<head>'' tagban van értelme a szabvány szerint. Amennyiben erre mégis szükség volna, a ''<meta>'' tagok maradhatnak a kódban. +**3.** Keressük meg a ''<head/>'' lezáró elemet, és ez elé illesszük be az alábbi sort:
- +
-A kódunk tehát valahogy így néz ki kezdetben:+
  
 <code html> <code html>
-<!DOCTYPE html> +<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-<html> +
- +
-<head data-gwd-animation-mode="quickMode"> +
-  <link href="gwdimage_style.css" data-version="1.4" data-exports-type="gwd-image" rel="stylesheet"> +
-  <link href="gwddoubleclick_style.css" data-version="1.9" data-exports-type="gwd-doubleclick" rel="stylesheet"> +
-  <link href="gwdpagedeck_style.css" data-version="1.5" data-exports-type="gwd-pagedeck" rel="stylesheet"> +
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script> +
-  <meta name="generator" content="Google Web Designer 1.3.2.0521"> +
-  <meta name="template" content="Banner 2.2.0"> +
-  <meta name="environment" content="gwd-doubleclick"> +
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> +
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> +
-  <style type="text/css" id="gwd-lightbox-style"> +
-    !A style tag tartalma... +
-  </style> +
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script> +
-  <script data-source="gwdpagedeck_min.js" data-version="1.5" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script> +
-  <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> +
-  <script data-source="gwddoubleclick_min.js" data-version="1.9" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script> +
-  <script data-source="gwdimage_min.js" data-version="1.4" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script> +
-</head> +
- +
-<body> +
-  <gwd-doubleclick id="gwd-ad" polite-load=""> +
-    <gwd-metric-configuration></gwd-metric-configuration> +
-    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck"> +
-      <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="250px"> +
-        <div class="gwd-page-content gwd-page-size"> +
-          <img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation"> +
-        </div> +
-      </div> +
-    </div> +
-  </gwd-doubleclick> +
-  <script type="text/javascript" id="gwd-init-code"> +
-    // A script tag tartalma... +
-  </script> +
-</body> +
- +
-</html>+
 </code> </code>
  
-Ha elvégezzük a felesleges elemek törlését, akkor valahogy így fog festeni a végére:+Ez után valahogy így fest majd kódunk:
  
 <code html> <code html>
- +    <script data-source="gwddoubleclick_min.js" data-version="1.9" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script> 
-  <link href="gwdimage_style.css" data-version="1.4" data-exports-type="gwd-image" rel="stylesheet"> +    <script data-source="gwdimage_min.js" data-version="1.4" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script> 
-  <link href="gwddoubleclick_style.css" data-version="1.9" data-exports-type="gwd-doubleclick" rel="stylesheet"> +    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script> 
-  <link href="gwdpagedeck_style.css" data-version="1.5" data-exports-type="gwd-pagedeck" rel="stylesheet"> +</head>
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script> +
-  <style type="text/css" id="gwd-lightbox-style"> +
-    !A style tag tartalma... +
-  </style> +
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script> +
-  <script data-source="gwdpagedeck_min.js" data-version="1.5" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script> +
-  <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> +
-  <script data-source="gwddoubleclick_min.js" data-version="1.9" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script> +
-  <script data-source="gwdimage_min.js" data-version="1.4" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script> +
-  <gwd-doubleclick id="gwd-ad" polite-load=""> +
-    <gwd-metric-configuration></gwd-metric-configuration> +
-    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck"> +
-      <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="250px"> +
-        <div class="gwd-page-content gwd-page-size"> +
-          <img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation"> +
-        </div> +
-      </div> +
-    </div> +
-  </gwd-doubleclick> +
-  <script type="text/javascript" id="gwd-init-code"> +
-    // A script tag tartalma... +
-  </script> +
-</code> +
- +
-**4.** Amennyiben a banner kódja nagyobb még az átalakítások után is mint 63KB, célszerű a bannerhez tartozó ''<style>'' tag tartalmát külön CSS file-ba kiírni. Kódunk idevágó része, valahogy így néz ki normál esetben: +
- +
-<code html> +
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script> +
-  <style type="text/css" id="gwd-lightbox-style"> +
-    html, body { +
-      width: 100%; +
-      height: 100%; +
-      margin: 0px; +
-    } +
-    !A style tag további tartalma... +
-  </style> +
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script> +
-</code> +
- +
-Ehhez a művelethez hozzunk létre egy file-t aminek a neve például ''example-style.css''. A fenti példakód alapján az új file-unk a tartalma a teljes ''<style>'' style tag tartalma legyen: +
- +
-<code css> +
-    html, body { +
-      width: 100%; +
-      height: 100%; +
-      margin: 0px; +
-    } +
-    !A style tag további tartalma... +
-</code> +
- +
-Az eredeti HTML állományunkban pedig, a ''<style>'' tag helyett ''<link>'' tag kell majd, ami után a fenti példa kódunk így módosul: +
- +
-<code html> +
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script> +
-  <link href="example-style.css" rel="stylesheet"> +
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>+
 </code> </code>
  
-**5.** Javítsuk a file-ok elérési útját ahol kell. Mivel a banner relatív URL-eket használ a kódban. Ilyenek általában a kép, CSS és külső javascript hivatkozások.+**4.** Javítsuk a file-ok elérési útját ahol kell, amennyiben a banner alkalmaz mapparendszert. Mivel a banner relatív URL-eket használ a kódban. Ilyenek általában a kép, CSS és külső javascript hivatkozások, ezeket a ''.html'' állománnyal egy mappában kell keresnie.
  
 Amennyiben a kép URL-jét szeretnénk módosítani pl.: Amennyiben a kép URL-jét szeretnénk módosítani pl.:
Line 323: Line 188:
 </code> </code>
  
-Ezt cserélnünk kell, adserver változókra:+Ezt módosítanunk kell, hogy ne almappában keresse a file-okat:
  
 <code html> <code html>
-<img is="gwd-image" source="[file:pingvin.png]" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">+<img is="gwd-image" source="pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
 </code> </code>
  
-**6.** Kattintások kezeléséhez, több megoldás is rendelkezésünkre áll. Ha például ''<a>'' tagot használunk, akkor annak ''href'' értéke legyen ''[cthref]''.+**5.** Kattintások kezeléséhez, több megoldás is rendelkezésünkre áll. Ha például ''<a>'' tagot használunk, akkor annak értékét a ''goa'' objektumból kell kiolvasnunk a ''goa-clickTAG'' változóból. 
 <code html> <code html>
-<a href="[cthref]">Katt...</a> +<a id="clickTAG" href="" target="">Katt...</a>  
 +<script> 
 +    (function(){ 
 +  
 +        var cT = document.getElementById('clickTAG'); 
 +        cT.href = goa.clickTAG; 
 +        cT.target = goa.clickTARGET; 
 +    })(); 
 +</script>
 </code> </code>
  
Line 337: Line 211:
  
 <code javascript> <code javascript>
-window.open('[cthref]', '_blank');+window.open(goa.clickTAG, '_blank');
 </code> </code>
  
-===== A banner felvétele az AdServerbe =====+**5.** Ha a banner záró és/vagy nyitó függvényeket alkalmaz, akkor az alábbi leírásban foglalt példakódokat alkalmazzuk a nyitó/záró/eltűntető gombokon:
  
-A banner felvétele a szokásos módon történhet. HTML bannerre lesz szükségünk. Ennek forrásául a GWD-ben készült és a fentiek alapján átalakított HTML file forrását kell használnunk, majd feltöltenünk a hozzá tartozó JS, CSS és kép fileokat. Általánosságban a HTML bannerekről az következő linken írunk:+[[http://dev.adverticum.com/creatives:ehtml#funkciok_hasznalata]] 
 +===== A banner felvétele az AdServerbe =====
  
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/127/2/html-banner-ltrehozsa]]+Az így konvertált bannerek futtatásához kövessük az általános easyHTML felvételi lépéseket: [[http://dev.adverticum.com/creatives:ehtml#banner_felvetele]]
  
 ---- ----
conversion/start.1442839518.txt.gz · Last modified: 2015/09/21 14:45 by avarga