Differences

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

--- conversion-faq-en:start [2015/12/10 09:15] – avarga
+++ conversion-faq-en:start [2016/10/03 15:43] (current) – dczipperer
@@ Line 1: / Line 1: @@
 ====== 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 =====
@@ Line 90: / Line 92: @@
 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: Usage of Gemius specifications ====