Adserver Developer Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
:!: **Figyelem! Az útmutatók ezen dokumentáció publikálásával egy időben futó verzió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''**-on.**

====== Swiffy-vel konvertált Flash bannerek átalakítása és felvétele ======


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:

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

===== 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.

{{ :conversion:screen_shot_2015-08-18_at_5.13.24_pm.png?nolink&600 |}}

**2.** Kattintsunk az “UPLOAD” gombra a 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 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 =====

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.

**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>
    <script>
      
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});
      
      stage.start();
    </script>
</code>


**3.** Ebbe illesszük be az alábbi sort, a ''stage.start();'' elé:
<code html>
stage.setFlashVars(location.search.split('?')[1]);
</code>

Ez után így kell kinéznie a kódunknak:

<code html>
    <script>

      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});

      stage.setFlashVars(location.search.split('?')[1]);
      stage.start();
    </script>
</code>

**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 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.** 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]&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.

----

====== 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!**
  * A különböző verziójú Edge-el készült bannerek esetén eléképzelhető,hogy több .js állomány is érkezik a bannerhez.
  * 5.x.x esetén például a **3.** lépést az bannerNeve_edge.js-ben kell elvégezni, még a **4.**-et a bannerNeve_edgeActions.js-ben.
  * 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:

''images/''

Itt egymás után találjuk a következő mappa hivatkozásokat (a kódból csak a fontos részt emeltük ki):

<code javascript>
/*...*/ ;var im='images/',aud='media/',vid='media/',js='js/',fonts= /*...*/
</code>

Ezeket üres ''string''-re kell cserélnünk, hogy a kód ezután így nézzen ki, ezzel elérve, hogy a banner maga mellett keresse a képeket, és ne a mappákban, ahol korábban:

<code javascript>
/*...*/ ;var im='',aud='',vid='',js='',fonts= /*...*/
</code>

**4.** A kattintások kezeléséhez, az alábbi kifejezésre keressünk:

''window.open''

Ekkor a következő kódrészlethez hasonló kódot kell keresnünk (ismét, csak a lényeges részt emeltük ki):

<code javascript>
/*...*/ "click",function(sym,e){
    window.open("http://adverticum.com","_blank");
});
</code>

Ahhoz, hogy ne kelljen beégetni a cél URL-t a kódba, az alábbi kódsort illesszük a meglévő link helyére:

<code javascript>
decodeURIComponent(location.search.split('?')[1].split('=')[1])
</code>

Az átalakítás után, pedig így kell kinéznie a kódnak:

<code javascript>
/*...*/ "click",function(sym,e){
    window.open(decodeURIComponent(location.search.split('?')[1].split('=')[1]),"_blank");
});
</code>

:!: 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.

===== 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 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.

----

====== Google Web Designerrel készült bannerek átalakítása és felvétele ======

A Google Web Designer [röviden: GWD] egy HTML szerkesztő program, mely ingyenesen elérhető az alábbi linken:

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:

https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/395/0/html5-banner-keszitesi-utmutato

===== A banner átalakítása =====

**1.** Navigáljunk a publikált banner mappájába.

**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.

A kódunk tehát valahogy így néz ki kezdetben:

<code html>
<!DOCTYPE html>
<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>

Ha elvégezzük a felesleges elemek törlését, akkor valahogy így fog festeni a végére:

<code html>

  <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>
  <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>

**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.:

<code html>
<img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
</code>

Ezt cserélnünk kell, adserver változókra:

<code html>
<img is="gwd-image" source="[pingvin.png]" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
</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]''.
<code html>
<a href="[cthref]">Katt...</a> 
</code>

Ha kódunk mondjuk javascript segítségével intézi a kattintás kezelését:

<code javascript>
window.open('[cthref]', '_blank');
</code>

===== A banner felvétele az AdServerbe =====

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:

https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/127/2/html-banner-ltrehozsa

----