User Tools

Site Tools


conversion:start

This is an old revision of the document!


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

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.

2. Kattintsunk az “UPLOAD” gombra a feltöltéshez.

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.

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

    <script>
 
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});
 
      stage.start();
    </script>

3. Ebbe illesszük be az alábbi sort, a stage.start(); elé:

stage.setFlashVars(location.search.split('?')[1]);

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

    <script>
 
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});
 
      stage.setFlashVars(location.search.split('?')[1]);
      stage.start();
    </script>

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.

<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 250px; height: 250px; border: none;"></iframe>

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:

<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 728px; height: 90px; border: none;"></iframe>
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):

/*...*/ ;var im='images/',aud='media/',vid='media/',js='js/',fonts= /*...*/

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:

/*...*/ ;var im='',aud='',vid='',js='',fonts= /*...*/

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

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

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:

decodeURIComponent(location.search.split('?')[1].split('=')[1])

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

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

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

<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]" style="width: 250px; height: 250px; border: none;"></iframe>

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:

<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]" style="width: 728px; height: 90px; border: none;"></iframe>
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:

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

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

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

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:

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

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:

    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
    !A style tag további tartalma...

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:

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

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

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

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

<img is="gwd-image" source="[pingvin.png]" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">

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

<a href="[cthref]">Katt...</a> 

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

window.open('[cthref]', '_blank');

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


You could leave a comment if you were logged in.
conversion/start.1441117019.txt.gz · Last modified: 2015/09/01 16:16 by avarga