Table of Contents
Bevezető
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.
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.
Adobe Animate CC-vel készült bannerek átalakítása és felvétele
1.) Nyissuk meg a .html file-t egy szövegszerkesztőben (pl.: Notepad++)
2.) A goa-helper.js hozzáadása
A goa-helper.js beüzemeléséhez csak illesszük az alábbi sort a banner <head> tagjába. Minden funkció, mely ezekre a funkciókra és változókra hivatkozik ez után kell, hogy kerüljön.
<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
3.) Kattintások kezelésének kialakítása
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:
<a id="clickTAG" href="" target=""> <div id="animation_container" ... > <!-- A banner HTML kódja --> </div> </a> <!-- A kattintást kezelő script --> <script> (function(){ var cT = document.getElementById('clickTAG'); cT.href = goa.clickTAG; cT.target = goa.clickTARGET; })(); </script>
A banner felvétele az AdServerbe
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
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 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:
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 .html file-t, egy szövegszerkesztőben (pl.: Nodepad++).
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é:
<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
Ez után valahogy így kell kinéznie az idevágó résznek:
<title>Untitled</title> <script src="//ad.adverticum.net/scripts/goa-helper.js"></script> <!--Adobe Edge Runtime-->
4. 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.
5. 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= /*...*/
6. 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:
goa.clickTAG
Az átalakítás után, pedig így kell kinéznie a kódnak:
/*...*/ "click",function(sym,e){ window.open(goa.clickTAG,"_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.
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
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
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 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:
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. Keressük meg a <head/> lezáró elemet, és ez elé illesszük be az alábbi sort:
<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
Ez után valahogy így fest majd kódunk:
<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> <script src="//ad.adverticum.net/scripts/goa-helper.js"></script> </head>
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.:
<img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
Ezt módosítanunk kell, hogy ne almappában keresse a file-okat:
<img is="gwd-image" source="pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
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.
<a id="clickTAG" href="" target="">Katt...</a> <script> (function(){ var cT = document.getElementById('clickTAG'); cT.href = goa.clickTAG; cT.target = goa.clickTARGET; })(); </script>
Ha kódunk mondjuk javascript segítségével intézi a kattintás kezelését:
window.open(goa.clickTAG, '_blank');
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:
http://dev.adverticum.com/creatives:ehtml#funkciok_hasznalata
A banner felvétele az AdServerbe
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