User Tools

Site Tools


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 Both sides next revision
conversion:start [2015/09/28 11:26]
avarga [A konvertált állomány átalakítása, Adverticum AdServerben való futtatáshoz]
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 =====
  
-:!: **Figyelem, ​ha kreatív ​Swiffy 7.x.x-el, vagy magasabb ​verzióval ​készült, nincs szükség az átalakításra!**+:!: **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: Ezt a banner forrásának elején tudjuk ellenőrizni,​ a ''​swiffy/​**v7.3**''​ részt keresve:
Line 38: Line 46:
 </​code>​ </​code>​
  
-Egyéb esetben lementett HTML file még nem áll készen ​kiszolgálásra. Ebben el kell végeznünk egy sor módosítást. Ez fogja átadni ​bannernek a clickTAG és clickTARGET változókatAmennyiben a kreatív az utóbbit nem használja, nem probléma.+:!: **Figyelem, az alábbiakra csak akkor van szükség, amennyiben ​banner alkalmaz nyitó vagy záró függvényeket,​ egyébként ​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 55: 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 63: Line 74:
  
 <code html> <code html>
 +    <script src="//​ad.adverticum.net/​scripts/​goa-helper.js"></​script>​
     <​script>​     <​script>​
  
Line 68: Line 80:
           swiffyobject,​ {});           swiffyobject,​ {});
  
-      stage.setFlashVars(location.search.split('?'​)[1]);​ 
       stage.start();​       stage.start();​
     </​script>​     </​script>​
Line 74: Line 85:
  
 **4.** Mentsük el az állományt. **4.** Mentsük el az állományt.
-===== 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: 
  
-[[https://​support.adverticum.net/​index.php?/​Sales/​Knowledgebase/​Article/​View/​127/​2/​html-banner-ltrehozsa]] +====A banner ​felvétele ​az AdServerbe =====
- +
-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]&​clickTARGET=[target]"​ style="​width:​ 250px; height: 250px; border: none;"></​iframe>​ +
-</​code>​ +
- +
-**1.** ​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]&​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. +
- +
-**3.** Ezután menthetjük is a bannert.+
  
 +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]]
 ---- ----
  
Line 104: Line 98:
 [[https://​creative.adobe.com/​products/​animate]] [[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:+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:
  
-[[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 112: Line 106:
 **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. **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++).+**2.** Nyissuk meg a ''​.html''​ file-t, egy szövegszerkesztőben (pl.: Nodepad++). 
 + 
 +**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é: 
 + 
 +<code html> 
 +<script src="//​ad.adverticum.net/​scripts/​goa-helper.js"></​script>​ 
 +</​code>​ 
 + 
 +Ez után valahogy így kell kinéznie az idevágó résznek: 
 + 
 +<code html> 
 + 
 +    <​title>​Untitled</​title>​ 
 +    <script src="//​ad.adverticum.net/​scripts/​goa-helper.js"></​script>​ 
 +<​!--Adobe Edge Runtime-->​ 
 +</​code>​ 
 + 
 +**4.** Nyissuk meg a bannerhez tartozó ''​.js''​ állományt egy szövegszerkesztőben (pl.: Nodepad++).
  
 :!: **Figyelem!** :!: **Figyelem!**
Line 119: 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 135: 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 150: Line 161:
  
 <code javascript>​ <code javascript>​
-decodeURIComponent(location.search.split('?'​)[1].split('​='​)[1])+goa.clickTAG
 </​code>​ </​code>​
  
Line 157: 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 163: 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 193: 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 203: 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 ''<​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 323: 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 337: 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: 2017/05/03 16:58 by dczipperer