This shows you the differences between two versions of the page.
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:// |
+ | 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, | 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, | ||
- | [[https://support.adverticum.net/index.php?/ | + | [[http://dev.adverticum.com/creatives: |
===== 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, | **1.** Válasszuk ki a file-t a “Choose File” gomb lenyomása után. Valamint fogadjuk el a felhasználási feltételeket, | ||
+ | |||
{{ : | {{ : | ||
**2.** Kattintsunk az “UPLOAD” gombra a feltöltéshez. | **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. | **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, | ===== A konvertált állomány átalakítása, | ||
- | :!: **Figyelem, | + | :!: **Figyelem, a leírás |
Ezt a banner forrásának elején tudjuk ellenőrizni, | Ezt a banner forrásának elején tudjuk ellenőrizni, | ||
Line 38: | Line 46: | ||
</ | </ | ||
- | Egyéb esetben lementett HTML file még nem áll készen | + | :!: **Figyelem, az alábbiakra csak akkor van szükség, amennyiben |
**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 '' | + | **3.** Ebbe illesszük be az alábbi sort, a fenti rész elé: |
<code html> | <code html> | ||
- | stage.setFlashVars(location.search.split('?' | + | <script src="// |
</ | </ | ||
Line 63: | Line 74: | ||
<code html> | <code html> | ||
+ | <script src="// | ||
< | < | ||
Line 68: | Line 80: | ||
swiffyobject, | swiffyobject, | ||
- | stage.setFlashVars(location.search.split('?' | ||
stage.start(); | stage.start(); | ||
</ | </ | ||
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:// | + | ===== A banner |
- | + | ||
- | A különbség az megszokott banner felvétellel szemben, hogy itt nem a HTML banner tartalmát használjuk forrásként, | + | |
- | + | ||
- | <code html> | + | |
- | <iframe src=" | + | |
- | </ | + | |
- | + | ||
- | **1.** | + | |
- | + | ||
- | <code html> | + | |
- | <iframe src=" | + | |
- | </ | + | |
- | + | ||
- | **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: | ||
---- | ---- | ||
Line 104: | Line 98: | ||
[[https:// | [[https:// | ||
- | A kódon kell kisebb változtatásokat eszközölni, | + | A kódon kell kisebb változtatásokat eszközölni, |
- | [[https://support.adverticum.net/index.php?/ | + | [[http://dev.adverticum.com/creatives: |
===== 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, | **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, | ||
- | **2.** Nyissuk meg a bannerhez tartozó '' | + | **2.** Nyissuk meg a '' |
+ | |||
+ | **3.** Keressük meg az ''< | ||
+ | |||
+ | <code html> | ||
+ | <script src="// | ||
+ | </ | ||
+ | |||
+ | Ez után valahogy így kell kinéznie az idevágó résznek: | ||
+ | |||
+ | <code html> | ||
+ | |||
+ | < | ||
+ | <script src="// | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | **4.** Nyissuk meg a bannerhez tartozó '' | ||
:!: **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: |
'' | '' | ||
Line 135: | Line 146: | ||
</ | </ | ||
- | **4.** A kattintások kezeléséhez, | + | **6.** A kattintások kezeléséhez, |
'' | '' | ||
Line 150: | Line 161: | ||
<code javascript> | <code javascript> | ||
- | decodeURIComponent(location.search.split('?' | + | goa.clickTAG |
</ | </ | ||
Line 157: | Line 168: | ||
<code javascript> | <code javascript> | ||
/*...*/ " | /*...*/ " | ||
- | window.open(decodeURIComponent(location.search.split('?' | + | window.open(goa.clickTAG," |
}); | }); | ||
</ | </ | ||
Line 163: | Line 174: | ||
:!: Itt fontos odafigyelni, | :!: Itt fontos odafigyelni, | ||
+ | **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ó/ | ||
+ | |||
+ | [[http:// | ||
===== A banner felvétele az AdServerbe ===== | ===== A banner felvétele az AdServerbe ===== | ||
- | Az így konvertált bannerek futtatásához | + | Az így konvertált bannerek futtatásához |
- | + | ||
- | [[https://support.adverticum.net/index.php?/ | + | |
- | + | ||
- | A különbség az megszokott banner felvétellel szemben, hogy itt nem a HTML banner tartalmát használjuk forrásként, | + | |
- | + | ||
- | <code html> | + | |
- | <iframe src=" | + | |
- | </ | + | |
- | + | ||
- | **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 '' | + | |
- | + | ||
- | <code html> | + | |
- | <iframe src=" | + | |
- | </ | + | |
- | + | ||
- | **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:// | [[https:// | ||
- | A GWD-vel készült bannerek könnyen átalakíthatóak Adverticum kompatibilis | + | A GWD-vel készült bannerek könnyen átalakíthatóak Adverticum kompatibilis |
- | [[https://support.adverticum.net/index.php?/ | + | [[http://dev.adverticum.com/creatives: |
===== A banner átalakítása ===== | ===== A banner átalakítása ===== | ||
Line 203: | Line 199: | ||
**2.** Nyissuk meg az említett '' | **2.** Nyissuk meg az említett '' | ||
- | **3.** | + | **3.** |
- | + | ||
- | A kódunk tehát valahogy így néz ki kezdetben: | + | |
<code html> | <code html> | ||
- | < | + | <script src="// |
- | < | + | |
- | + | ||
- | <head data-gwd-animation-mode=" | + | |
- | <link href=" | + | |
- | <link href=" | + | |
- | <link href=" | + | |
- | | + | |
- | <meta name=" | + | |
- | <meta name=" | + | |
- | <meta name=" | + | |
- | <meta http-equiv=" | + | |
- | <meta name=" | + | |
- | <style type=" | + | |
- | !A style tag tartalma... | + | |
- | </ | + | |
- | <script data-source=" | + | |
- | <script data-source=" | + | |
- | <script data-source=" | + | |
- | <script data-source=" | + | |
- | <script data-source=" | + | |
- | </ | + | |
- | + | ||
- | < | + | |
- | < | + | |
- | < | + | |
- | <div is=" | + | |
- | <div is=" | + | |
- | <div class=" | + | |
- | <img is=" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | <script type=" | + | |
- | // A script tag tartalma... | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | </html> | + | |
</ | </ | ||
- | Ha elvégezzük a felesleges elemek törlését, | + | Ez után valahogy így fest majd kódunk: |
<code html> | <code html> | ||
- | + | | |
- | | + | <script data-source=" |
- | <link href=" | + | <script src="// |
- | <link href=" | + | </head> |
- | <script data-source=" | + | |
- | <style type=" | + | |
- | | + | |
- | </ | + | |
- | | + | |
- | < | + | |
- | <script data-source=" | + | |
- | <script data-source=" | + | |
- | <script data-source=" | + | |
- | < | + | |
- | < | + | |
- | <div is=" | + | |
- | <div is=" | + | |
- | <div class=" | + | |
- | <img is=" | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | <script type=" | + | |
- | // 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ó ''< | + | **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 '' |
- | + | ||
- | <code html> | + | |
- | <script data-source=" | + | |
- | <style type=" | + | |
- | html, body { | + | |
- | width: 100%; | + | |
- | height: 100%; | + | |
- | margin: 0px; | + | |
- | } | + | |
- | !A style tag további tartalma... | + | |
- | </ | + | |
- | <script data-source=" | + | |
- | </ | + | |
- | + | ||
- | Ehhez a művelethez hozzunk létre egy file-t aminek a neve például '' | + | |
- | + | ||
- | <code css> | + | |
- | html, body { | + | |
- | width: 100%; | + | |
- | height: 100%; | + | |
- | margin: 0px; | + | |
- | } | + | |
- | !A style tag további tartalma... | + | |
- | </ | + | |
- | + | ||
- | Az eredeti HTML állományunkban pedig, a ''< | + | |
- | + | ||
- | <code html> | + | |
- | <script data-source=" | + | |
- | <link href=" | + | |
- | <script data-source=" | + | |
- | </ | + | |
- | + | ||
- | **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: | ||
</ | </ | ||
- | Ezt cserélnünk | + | Ezt módosítanunk |
<code html> | <code html> | ||
- | <img is=" | + | <img is=" |
</ | </ | ||
- | **6.** Kattintások kezeléséhez, | + | **5.** Kattintások kezeléséhez, |
<code html> | <code html> | ||
- | <a href="[cthref]"> | + | <a id=" |
+ | < | ||
+ | (function(){ | ||
+ | |||
+ | var cT = document.getElementById(' | ||
+ | cT.href = goa.clickTAG; | ||
+ | cT.target = goa.clickTARGET; | ||
+ | })(); | ||
+ | </script> | ||
</ | </ | ||
Line 337: | Line 245: | ||
<code javascript> | <code javascript> | ||
- | window.open(' | + | window.open(goa.clickTAG, ' |
</ | </ | ||
- | ===== A banner | + | **5.** Ha a banner |
- | A banner felvétele | + | [[http:// |
+ | ===== A banner felvétele az AdServerbe ===== | ||
- | [[https://support.adverticum.net/index.php?/ | + | Az így konvertált bannerek futtatásához kövessük az általános easyHTML felvételi lépéseket: |
---- | ---- |