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
conversion:start [2015/09/15 14:11]
avarga
conversion:start [2017/05/03 16:58]
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.: 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 banner <​head>​ tagjábaMinden funkciómely ezekre ​funkciókra és változókra hivatkozik ez után kell, hogy kerüljön.
- +
-**2.** Kattintsunk ​az “UPLOAD” gombra ​feltöltéshez. +
-{{ :​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 kattintvamentsü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 ===== +
- +
-A 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 a bannernek a clickTAG és clickTARGET változókat. Amennyiben a kreatív az utóbbit nem használjanem probléma. +
- +
-**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é:+
  
 <code html> <code html>
-    ​<script+<​script ​src="//ad.adverticum.net/​scripts/​goa-helper.js">​</​script>​
-       +
-      var stage new swiffy.Stage(document.getElementById('​swiffycontainer'​),​ +
-          swiffyobject,​ {}); +
-       +
-      stage.start(); +
-    ​</​script>​+
 </​code>​ </​code>​
  
  
-**3.** Ebbe illesszük be az alábbi sort, a ''​stage.start();''​ elé: +=== 3.) Kattintások kezelésének kialakítása ===
-<code html> +
-stage.setFlashVars(location.search.split('?'​)[1])+
-</​code>​+
  
-Ez után így kell kinéznie ​kódunknak:+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. 
 + 
 +Például:
  
 <code html> <code html>
-    ​<script>+<a id="​clickTAG"​ href=""​ target="">​ 
 + <div id="​animation_container"​ ... > 
 + <!-- A banner HTML kódja -->  
 + </​div>​ 
 +</a>
  
-      var stage = new swiffy.Stage(document.getElementById('​swiffycontainer'​),​ +<!-- A kattintást kezelő script -->
-          swiffyobject,​ {});+
  
-      stage.setFlashVars(location.search.split('?')[1]); +<​script>​ 
-      stage.start(); +    ​(function(){ 
-    </​script>​+  
 +        var cT = document.getElementById('clickTAG'); 
 +        cT.href = goa.clickTAG;​ 
 +        cT.target = goa.clickTARGET;​ 
 +    })(); 
 +</​script>​
 </​code>​ </​code>​
  
-**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ünkA 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 HTML banner tartalmát használjuk forráskénthanem az alábbi ​sort. Példánkban a file neve ''​embedded_250x250_03.html'',​ a mérete pedig ''​250px''​ x ''​250px''​.+Az Adobe Edge Flash helyettesítésére szánt HTML5 képes szerkesztő szoftverbő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.** ​kódban ​minden ​bannerhez módosítani kell a file-nevet ​és a méretetHa 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:+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áshozEnnek menetéről és az átalakított kód felvételéről alábbAz 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 bannert.+**1.** Az Edge-el előállított kreatív mappákba rendezi ​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 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 126: 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 141: Line 127:
  
 <code javascript>​ <code javascript>​
-decodeURIComponent(location.search.split('?'​)[1].split('​='​)[1])+goa.clickTAG
 </​code>​ </​code>​
  
Line 148: 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 154: 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 184: 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 194: 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 314: 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 328: 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