Gyakrabban előforduló kérdések az easyHTML bannerek esetében

Az alábbi oldalon az easyHTML bannerek elkészítése során a gyakrabban előforduló hibajelenségekről, ezek lehetséges okairól és megoldásaikról írunk. Erről a teljesspecifikációnk itt érhető el:

http://dev.adverticum.com/creatives:ehtml

Amennyiben feltöltés után a banner képei nem jelennek meg, az leggyakrabban annak köszönhető, hogy az állományokat almappákban keresi a kód, ahogy ez az alábbi példában látható:

<img src="images/cica.png" />

Mivel feltöltés után a banner összes állománya egy mappába kerül, ezért az elérési utat az alábbihoz hasonló módon kell módosítani:

<img src="cica.png" />

Előfordul, hogy egy másik dokumentáció alapján készül el a banner, például a korábbi Markup vagy HTML banner leírása alapján. Ilyen esetben a file-ok az alábbi módon kerülnek hivatkozásra:

<img src="[file: cica.png]" />

Mivel az easyHTML banner kódjában nem képes az AdServer módosítást végrehajtani, így a változók helyett relatív URL-ek használatára van szükség (mappa nélkül!).

<img src="cica.png" />

Ez a hiba úgy jelentkezik, hogy a banner kattintáskor két lapot nyit meg. Az egyik valószínűleg a megfelelő céloldal lesz, a másik azonban általában egy üres oldal, amelynek az URL-je /undefined-re végződik.

Ennek az az oka, hogy az útmutatónkban hivatkozott kattintást segítő JavaScript (JS) és HTML kódok keverednek.

Például:

<a id="clickTAG" href="" target="_blank">KATT</a>
 
<script>
  document.getElementById('clickTAG').onclick = function () {
    window.open(goa.clickTAG, goa.clickTARGET);
  }
</script>

Mivel a fenti kódban a clickTAG elem egy anchor tagként (<a> tag) szerepel, így az eleve kattintható lesz. Ha ehhez a leírás JS kódját használjuk, akkor azt mondjuk, hogy a már eleve kattintható elem kattintásra nyisson meg egy új oldalt, párhuzamosan a landing page-el. Így végül két oldal nyílik meg.

Amennyiben nem ezt a kódot használjuk, hanem az anchor taghoz tartozót illesztjük be helyére, akkor megfelelő működés érhető el:

http://dev.adverticum.com/creatives:ehtml#html_pelda

A goa-helper.js végzi el a banner számára azt a feladatot, hogy a kapott URL-eket és egyéb változókat felolvassa az URL-ből, és ezeket egy objektumban adja át. Innen tudja a banner kódja kiolvasni majd a clickTAG URL-t.

A banner elejére, általában a head végére érdemes illeszteni a következő linken található sort, mely betölti nekünk a goa-helper.js-t:

http://dev.adverticum.com/creatives:ehtml#a_goa-helperjs_hozzaadasa

Előfordul, hogy egy másik dokumentáció alapján készül el a banner, például a korábbi Markup vagy HTML banner leírása alapján. Ilyen eset(ek)ben a CT-kezelés a következőképp nézne ki:

<a id="clickTAG" href="[cthref]" target="[target]">KATT</a>

Mivel az easyHTML banner kódjában nem képes az AdServer módosítást végrehajtani, így a változók helyett az alábbi linken található megoldást kell alkalmazni:

http://dev.adverticum.com/creatives:ehtml#html_pelda

Előfordul, hogy a kódok nem a leírás alapján kerülnek be, hanem a script megelőzi a hivatkozott elemet, tehát a dokumentációhoz képest fordított sorrendbe illesztik a banner kódjába.

Például:

<script>
    (function(){
 
        var cT = document.getElementById('clickTAG');
        cT.href = goa.clickTAG;
        cT.target = goa.clickTARGET;
    })();
</script>
 
<a id="clickTAG" href="" target="">CT</a>

Mivel a fenti kód hivatkozik a clickTAG ID-jú elemre, de az csak utána szerepel a kódban, mikor a böngésző futtatja azt hibát fog jelezni, ugyanis az elemet nem fogja megtalálni, mert az egyszerűen még nem jött létre.

A megoldást a kódok megfelelő sorrendjének betartása jelenti, ami az alábbi linken érhető el:

http://dev.adverticum.com/creatives:ehtml#html_pelda

Például:

<a id="clickTAG" href="" target=""></a>
	<div id="bannerContainer">
		<!-- A banner HTML kódja -->	
	</div>
<!-- A kattintást kezelő script -->
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG');
        cT.href = goa.clickTAG;
        cT.target = goa.clickTARGET;
    })();
</script>

Az <a> tag azt a felületet teszi kattinthatóvá, mely a nyitó és a záró rész 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="bannerContainer">
		<!-- 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>

Ha az anchor (<a>) taget egy sorba írjuk valahol a kódban, de azt szeretnénk, hogy a teljes kreatívunk kattintható legyen, lehetőségünk van a tag tulajdonságait CSS-ben beállítani. Nem kell mást tennünk, mint a kreatív szélességét (width) és magasságát(height) átadni az <a> tagnek, valamint, hogy őt kattintsuk és ne a banner egyes részeit, emellett egy magas z-index-et is adnunk kell neki.

Például (tegyük fel, hogy a kreatívunk 300×300-as méretű):

<div id="bannerContainer">
<!--  HTML kód -->	
     <a id="clickTAG" href="" target="" style="width:300px;height:300px;z-index:999;"></a>
<!-- HTML kód -->	
</div>
<!-- A kattintást kezelő script -->
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG');
        cT.href = goa.clickTAG;
        cT.target = goa.clickTARGET;
    })();
</script>

Találkozhatunk olyan esettel, amikor egy bannert a Gemius specifikációja alapján készítenek el, majd végül nekünk adják le AdServerben történő futtatásra. Ilyenkor az alábbi kód fog szerepelni:

	var parsed =
(document.location.href.split('#')[1]||'').split('&');
	var params = parsed.reduce(function (params, param) {
		var param = param.split('=');
		params[param[0]] =
		decodeURIComponent(param.slice(1).join('='));
		return params;
	}, {});
// change link href
document.getElementById('clickTAG').href = params.clickTag;

Mivel a fenti kód hasonlóan működik a goa-helper.js-hez, így csak csekély módosításra van szükség a banner kattinthatóvá tételéhez. A kód második sorában a '#' jelet '?' -re kell cserélnünk, mert az easyHTML banner query paraméterekben adja át a clickTAG-et és egyébb változókat.

	var parsed =
(document.location.href.split('?')[1]||'').split('&');
	var params = parsed.reduce(function (params, param) {
		var param = param.split('=');
		params[param[0]] =
		decodeURIComponent(param.slice(1).join('='));
		return params;
	}, {});
// change link href
document.getElementById('clickTAG').href = params.clickTag;