AdsNG 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 revision Previous revision
Next revision 		Previous revision
Next revision Both sides next revision
conversion:start [2015/09/21 14:41]
avarga [Konvertálás menete] 		conversion:start [2015/10/06 15:16]
avarga
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.
 +
 +====== Swiffy-vel konvertált Flash bannerek átalakítása és felvétele az easyHTML sablonhoz ======
  
 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: 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:
Line 12: Line 17:
 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: 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]]+[[http://dev.adverticum.com/creatives:flash]]
  
 ===== Konvertálás menete ===== ===== 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. **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.
 +
  
 {{ :conversion:screen_shot_2015-08-18_at_5.13.24_pm.png?nolink&600 |}} {{ :conversion:screen_shot_2015-08-18_at_5.13.24_pm.png?nolink&600 |}}
  
 **2.** Kattintsunk az “UPLOAD” gombra a feltöltéshez. **2.** Kattintsunk az “UPLOAD” gombra a feltöltéshez.
 +
 {{ :conversion:screen_shot_2015-08-18_at_5.13.12_pm.png?nolink&600 |}} {{ :conversion:screen_shot_2015-08-18_at_5.13.12_pm.png?nolink&600 |}}
  
 **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. **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 |}} {{ :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 ===== ===== A konvertált állomány átalakítása, Adverticum AdServerben való futtatáshoz =====
  
-A 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.+:!: **Figyelem, a leírás Swiffy 7.x.x-hez, vagy magasabb verziókhoz készült** 
 + 
 +Ezt a banner forrásának elején tudjuk ellenőrizni, a ''swiffy/**v7.3**'' részt keresve: 
 + 
 +<code html> 
 + 
 +<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3/runtime.js"></script> 
 + 
 +</code> 
 + 
 +:!: **Figyelem, az alábbiakra csak akkor van szükség, amennyiben a banner alkalmaz nyitó vagy záró függvényeket, egyébként a banner rögtön felvehető az easyHTML banner felvételi lépéseivel! [[http://dev.adverticum.com/creatives:ehtml#banner_felvetele]]**
  
 **1.** Nyissuk meg a lementett file-t egy szövegszerkesztőben (pl.: Notepad++). **1.** Nyissuk meg a lementett file-t egy szövegszerkesztőben (pl.: Notepad++).
 +
  
 **2.** Keressük meg az alábbi részt a kód vége felé: **2.** Keressük meg az alábbi részt a kód vége felé:
 +
  
 <code html> <code html>
Line 45: Line 65:
  
  
-**3.** Ebbe illesszük be az alábbi sort, a ''stage.start();'' elé:+**3.** Ebbe illesszük be az alábbi sort, a fenti rész elé: 
 <code html> <code html>
-stage.setFlashVars(location.search.split('?')[1]);+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
 </code> </code>
  
Line 53: Line 74:
  
 <code html> <code html>
 +    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
     <script>     <script>
  
Line 58: Line 80:
           swiffyobject, {});           swiffyobject, {});
  
-      stage.setFlashVars(location.search.split('?')[1]); 
       stage.start();       stage.start();
     </script>     </script>
Line 64: Line 85:
  
 **4.** Mentsük el az állományt. **4.** Mentsük el az állományt.
 +
  
 ===== 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]]+====== Adobe Edge kódok átalakítása és felvétele ======
  
-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''.+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:
  
-<code html> +[[https://creative.adobe.com/products/animate]]
-<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]&clickTARGET=[target]" 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:+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]]
-<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 728px; height: 90px; border: none;"></iframe> +
-</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.+===== A banner átalakítása =====
  
-**3.** Ezután menthetjük is a bannert.+**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 ''.html'' file-t, egy szövegszerkesztőben (pl.: Nodepad++).
  
-====== Adobe Edge kódok átalakítása és felvétele ======+**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é:
  
-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:+<code html> 
 +<script src="//ad.adverticum.net/scripts/goa-helper.js"></script> 
 +</code>
  
-[[https://creative.adobe.com/products/animate]]+Ez után valahogy így kell kinéznie az idevágó résznek:
  
-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:+<code html>
  
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/395/0/html5-banner-keszitesi-utmutato]] +    <title>Untitled</title> 
- +    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script> 
-===== A banner átalakítása ===== +<!--Adobe Edge Runtime--> 
- +</code>
-**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++).+**4.** Nyissuk meg a bannerhez tartozó ''.js'' állományt egy szövegszerkesztőben (pl.: Nodepad++).
  
 :!: **Figyelem!** :!: **Figyelem!**
Line 110: Line 130:
   * 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 126: Line 146:
 </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 141: Line 161:
  
 <code javascript> <code javascript>
-decodeURIComponent(location.search.split('?')[1].split('=')[1])+goa.clickTAG
 </code> </code>
  
Line 148: Line 168:
 <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 154: Line 174:
 :!: 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 184: Line 189:
 [[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 194: Line 199:
 **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> </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: +**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.
- +
-<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> +
- +
-**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.+
  
 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 314: Line 222:
 </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 328: Line 245:
  
 <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.txt · Last modified: 2020/12/11 11:06 by zkocsis

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