====== 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|http://dev.adverticum.com/creatives:ehtml]]

===== A banner képei nem látszanak / A banner nem jelenik meg =====

==== Hiba: Relatív mappák használata ====

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

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

==== Megoldás ====

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:

<code html>
<img src="cica.png" />
</code>

==== AdServer változók használata ====

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:

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

==== Megoldás ====

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

<code html>
<img src="cica.png" />
</code>

===== Kattintásra két oldal nyílik meg =====

==== Hiba: Két nem kompatibilis kód együttes használata ====

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:

<code html>
<a id="clickTAG" href="" target="_blank">KATT</a>

<script>
  document.getElementById('clickTAG').onclick = function () {
    window.open(goa.clickTAG, goa.clickTARGET);
  }
</script>
</code>

==== Megoldás ====

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 banner nem kattintható / Rossz oldalra visz =====

==== Hiba: Nem került bele a goa-helper.js ====

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.

==== Megoldás ====

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

==== Hiba: AdServer változók használata ====

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:

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

==== Megoldás ====

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

==== Hiba: A kódok sorrendjének felcserélése ====

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:

<code html>
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG');
        cT.href = goa.clickTAG;
        cT.target = goa.clickTARGET;
    })();
</script>

<a id="clickTAG" href="" target="">CT</a>
</code>

==== Megoldás ====

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

==== Hiba: A kattintás kezelő <a> tag nem a banner körül van ====

Például:

<code html>
<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>
</code>

==== HTML megoldás ====
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:

<code html>
<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>
</code> 


==== CSS megoldás ====

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 300X300-as méretű):

<code html>
<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>
</code> 

==== Hiba: Gemius specifikáció használata ====

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:

<code javascript>
	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;
</code>

==== Megoldás ====

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.

<code javascript>
	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;
</code>