Adserver Developer Wiki

User Tools

Site Tools

You are here: start » conversion-faq-en
Trace:
conversion-faq-en:start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
conversion-faq-en:start [2015/12/07 17:54] – created avargaconversion-faq-en:start [2016/10/03 15:43] (current) – dczipperer
Line 1: Line 1:
 ====== Frequently recuring issues with easyHTML banners  ====== ====== Frequently recuring issues with easyHTML banners  ======
  
-Here we discuss the most frequently recurring issues, the possible source of the issue, and recommended solutions.+Here we discuss the most frequently recurring issues regarding teh easyHTML banner template, the possible source of the issue, and recommended solutions. The full specification can be accessed here: 
 + 
 +[[http://dev.adverticum.com/creatives:ehtml-en|http://dev.adverticum.com/creatives:ehtml-en]]
  
 ===== No images are visible / The banner is not visible ===== ===== No images are visible / The banner is not visible =====
Line 7: Line 9:
 ==== Issue: Using folders in relative links ==== ==== Issue: Using folders in relative links ====
  
-In case after upload the images in the banner banner do not show up, is most like due to tehfact, that the banner searches for the resources in sub directories, like in this example:+In case after upload the images in the banner banner do not show up, is most like due to the fact, that the banner searches for the resources in sub directories, like in this example:
  
 <code html> <code html>
Line 31: Line 33:
 ==== Solution ==== ==== Solution ====
  
-Because the AdServer is unable to modify teh files of an easyHTML banner, we have to change the AdServer variables to local (without folders) relative path:+Because the AdServer is unable to modify the files of an easyHTML banner, we have to change the AdServer variables to local (without folders) relative path:
  
 <code html> <code html>
Line 41: Line 43:
 ==== Issue: The usage of two uncompatible code snipets ==== ==== Issue: The usage of two uncompatible code snipets ====
  
-This issue manifests by opening to windows on clicking the banner. One is moste likely is the correct landing page, and the URL of the other end in ''/undefined'', and is most likely blank.+This issue manifests by opening two windows on clicking the banner. One is moste likely is the correct landing page, and the URL of the other end in ''/undefined'', and is most likely blank.
  
 A possible reason is that two suggested code snipets are mixed up - Javascript and HTML. A possible reason is that two suggested code snipets are mixed up - Javascript and HTML.
Line 61: Line 63:
 Because in the example above ''clickTAG'' is an ''anchor'' tag, it will be clickable in itself. If we combine this element with the JS example snippet, we tell the browser to open a web page on click, onto an element that already opens a new page. So in the end we open two windows. Because in the example above ''clickTAG'' is an ''anchor'' tag, it will be clickable in itself. If we combine this element with the JS example snippet, we tell the browser to open a web page on click, onto an element that already opens a new page. So in the end we open two windows.
  
-If we use an ''anchor'' element, we need to insert use the matching code instead of the above, from teh following link:+If we use an ''anchor'' element, we need to insert the matching code instead of the above, from the following link:
  
 http://dev.adverticum.com/creatives:ehtml-en#html_example http://dev.adverticum.com/creatives:ehtml-en#html_example
Line 67: Line 69:
 ===== The banner is not clickable / It redirects to a wrong site ===== ===== The banner is not clickable / It redirects to a wrong site =====
  
-==== Issue: Nem került bele a goa-helper.js ====+==== Issue: The goa-helper.js is missing ====
  
-A goa-helper.js végi 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.+The ''goa-helper.js'' manages the URLs and other variables for the banner, as it parses the query parameters, and compiles an object of them. The banner can read the clickTAG from there.
  
 ==== Solution ==== ==== Solution ====
  
-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:+The ''goa-helper.js'' has to be included in the beginning of the banner, usualy in the end of the ''head'' tag, with the code snippet from the following page:
  
-http://dev.adverticum.com/creatives:ehtml#a_goa-helperjs_hozzaadasa+http://dev.adverticum.com/creatives:ehtml-en#including_goa-helperjs
  
-==== Issue: AdServer változók használata ====+==== Issue: Usage of AdServer variables ====
  
-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:+Sometimes the banner is developed with the usage of previous Markup or HTML banner specification. In these cases CT URLs are refered like below:
  
 <code html> <code html>
Line 87: Line 89:
 ==== Solution ==== ==== Solution ====
  
-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:+Because the AdServer is unable to modify the files of an easyHTML banner, we have to change the AdServer variables to local (without folders) relative path:
  
-http://dev.adverticum.com/creatives:ehtml#html_pelda+http://dev.adverticum.com/creatives:ehtml-en#html_example 
 + 
 +==== Issue: Codes used in wrong order ==== 
 + 
 +Sometimes the codes are not inserted int the order specified, rather the ''script'' comes before the referred element, so the code order is swaped compared to the documentation. 
 + 
 +Example: 
 + 
 +<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> 
 + 
 +==== Solution ==== 
 + 
 +While the above code referrs to the element with the ID ''clickTAG'', but the element itself is only after this, when the browser starts to execute the code, it will throw an errer, because the referred element is simply not created by then. 
 + 
 +The solution for this is to use the right order, which can be found on the link beneath: 
 + 
 +http://dev.adverticum.com/creatives:ehtml-en#html_example 
 + 
 +==== Error: The anchor tag (<a>) responsible for the linking is not containing the banner ==== 
 + 
 +For example: 
 + 
 +<code html> 
 +<a id="clickTAG" href="" target=""></a> 
 + <div id="bannerContainer"> 
 + <!-- HTML code -->  
 + </div> 
 +<!-- Javascript for click handling --> 
 +<script> 
 +    (function(){ 
 +  
 +        var cT = document.getElementById('clickTAG'); 
 +        cT.href = goa.clickTAG; 
 +        cT.target = goa.clickTARGET; 
 +    })(); 
 +</script> 
 +</code> 
 + 
 +==== HTML solution ==== 
 +The <a> tag defines a hyperlink, which is used to link one page to another, and only the area between the opening <a>tag and the closing </a> tag will be clickable. So if we would like to make the whole banner clickable we have to implement the anchor around the container of the banner. 
 + 
 +Example: 
 + 
 +<code html> 
 +<a id="clickTAG" href="" target=""> 
 + <div id="bannerContainer"> 
 + <!-- HTML code -->  
 + </div> 
 +</a> 
 +<!-- Script for clicks --> 
 +<script> 
 +    (function(){ 
 +  
 +        var cT = document.getElementById('clickTAG'); 
 +        cT.href = goa.clickTAG; 
 +        cT.target = goa.clickTARGET; 
 +    })(); 
 +</script> 
 +</code>  
 + 
 + 
 +==== CSS solution ==== 
 + 
 +If we have an anchor tag implemented in our code in one line but we want to make the whole banner clickable, instead of moving the anchor we can use CSS to modify its appearance. We just have to set its width and height attributes to match the width and height of the banner. After that we have to give the anchor tag a high z-index value. It will force the browsers to click it instead of the other parts of the creative. 
 + 
 + 
 +Example: (Let's assume that our banner's 300X300): 
 + 
 +<code html> 
 +<div id="bannerContainer"> 
 +<!--  HTML code -->  
 +     <a id="clickTAG" href="" target="" style="width:300px;height:300px;z-index:999;"></a> 
 +<!-- HTML code -->  
 +</div> 
 +<!-- Script for clicks --> 
 +<script> 
 +    (function(){ 
 +  
 +        var cT = document.getElementById('clickTAG'); 
 +        cT.href = goa.clickTAG; 
 +        cT.target = goa.clickTARGET; 
 +    })(); 
 +</script> 
 +</code> 
  
-==== Issue: Gemius specifikáció használata ====+==== Issue: Usage of Gemius specifications ====
  
-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:+In some cases, the banner is created by the Gemius specification, but are given to run in our AdServer. In these cases, the following code is present:
  
 <code javascript> <code javascript>
Line 110: Line 206:
 ==== Solution ==== ==== Solution ====
  
-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.+While this code is similar to what the ''goa-helper.js'' does, we only need a little modification, to make CTs work. In the second line of the code, the '' '#' '' has to be replaced with '' '?' '', because the easyHTML banner recieves the clickTAG URL among others, as query parameters.
  
 <code javascript> <code javascript>
conversion-faq-en/start.1449507294.txt.gz · Last modified: 2015/12/07 17:54 by avarga