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
Previous revision
Last 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 [2017/05/03 16:52]
dczipperer
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 Anime 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.: Nodepad++) ===
  
-===== 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ábaMinden 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 kreatív Swiffy 7.x.x-elvagy magasabb verzióval készültnincs szükség az átalakításra!**+Kattintások kezeléséhez ​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énkhogy 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éb 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 ​kódunknak:+A kódon ​kell kisebb változtatásokat eszközölni,​ hogy minden referencia és 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ányokatElső 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ünkA HTML bannerek felvételéről általánosságban itt írunk: +**3.** Keressük meg az ''​<​!--Adobe Edge Runtime-->​'' ​kifejezést ​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''​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 ''<​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.txt · Last modified: 2017/05/03 16:58 by dczipperer