Adserver Developer Wiki

User Tools

Site Tools

You are here: start » creatives » ehtml-en
Trace:
creatives:ehtml-en

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
creatives:ehtml-en [2015/09/29 16:54] – [HTML example] avargacreatives:ehtml-en [2015/12/08 14:48] (current) – [Handling clicks in case of multiple URLs] avarga
Line 45: Line 45:
 </code> </code>
  
-**3.** All files have to have unique names, related to the banner, because they will be copied in teh same folder as the other banners running in the same campaign.+**3.** All files have to have unique names, related to the banner, because they will be copied in the same folder as the other banners running in the same campaign.
  
 **4.** All file size has to be under 300KB! **4.** All file size has to be under 300KB!
 +
 +==== Prepare for serving  ====
 +
 +We have to prepare for the fact, that our banner will be served in an iframe. This document will not contain anything other then what we insert, so we have to make sure that CSS margins, paddings, etc. are reseted, and hide the scroll bars in certain cases.
 +
 +For this, we recommend using the snippet below, but other properties might be needed in some banner structures. This should be placed before any other CSS, to avoid overwriting of other CSS properties the banner needs.
 +
 +<code html>
 +
 +<style>
 +    body {
 +        margin: 0;
 +        padding: 0;
 +        border: none;
 +        
 +        overflow: hidden;
 +    }
 +</style>
 +
 +</code>
 +
 ==== Including goa-helper.js ==== ==== Including goa-helper.js ====
  
-To include ''goa-helper.js'', just paste the following code in the ''<head>'' of teh banner. All the functions and references to ''goa'' has to be after this script.+To include ''goa-helper.js'', just paste the following code in the ''<head>'' of the banner. All the functions and references to ''goa'' has to be after this script.
  
 <code html> <code html>
Line 93: Line 114:
 <script> <script>
     (function(){     (function(){
 +    
         var cT = document.getElementById('clickTAG');         var cT = document.getElementById('clickTAG');
         cT.href = goa.clickTAG;         cT.href = goa.clickTAG;
Line 118: Line 140:
 Handling multiple CT URLs shoud **not** be done through ''goa.clickTAG''. We have the option to set custom variables, thorugh adding extra parameters when uploding to our servers. Handling multiple CT URLs shoud **not** be done through ''goa.clickTAG''. We have the option to set custom variables, thorugh adding extra parameters when uploding to our servers.
  
-We have to attach a ''JSON'' object, for the campaign manager to include while uploading the banner. In this we have to use the awaited names of the links as keys, and the URL itself as the value. Attaching it as a separate file with teh extension of .txt is recommended. For example:+We have to attach a ''JSON'' object, for the campaign manager to include while uploading the banner. In this we have to use the awaited names of the links as keys, and the URL itself as the value. Attaching it as a separate file with the extension of .txt is recommended. For example:
  
-:!: **It is essential that the ''JSON'' does not contain broken lines, just a single one. To minify it, tehre are several free online tools available, for example: [[http://www.willpeavy.com/minifier/]]**+:!: **It is essential that the ''JSON'' does not contain broken lines, just a single one. To minify it, there are several free online tools available, for example: [[http://www.willpeavy.com/minifier/]]**
  
 :!: **Further neccesity is that the both the keys and values are written in double quotes. To check the validity of the object, we can use the following site: [[http://jsonlint.com/]]** :!: **Further neccesity is that the both the keys and values are written in double quotes. To check the validity of the object, we can use the following site: [[http://jsonlint.com/]]**
  
 <code javascript> <code javascript>
-{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG0": "//check.adverticum.net/"}+{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
 </code> </code>
  
 While displayment, the link will be available by getting the properties form the ''goa'' object we define in this ''JSON''. While displayment, the link will be available by getting the properties form the ''goa'' object we define in this ''JSON''.
  
-=== HTML Example === +=== HTML example ===
- +
-Managing the first URL:+
  
 <code html> <code html>
  
-<a id="clickTAG0" href="" onclick="(function(){var cT=document.getElementById('clickTAG0');cT.href=goa.clickTAG0;cT.target=goa.clickTARGET;})();">CT</a>+<a id="clickTAG0" href="" target="">CT</a> 
 +<script> 
 +    (function(){ 
 +     
 +        var cT = document.getElementById('clickTAG0'); 
 +        cT.href = goa.clickTAG0; 
 +        cT.target = goa.clickTARGET; 
 +    })(); 
 +</script>
  
 </code> </code>
- 
 === JS example === === JS example ===
  
Line 164: Line 191:
  
 **On the topic of available functions of display modules:\\ **On the topic of available functions of display modules:\\
-[[https://wiki.adverticum.net/html-doc:start#display_sablonok_funkcioinak_hasznalata]]**+[[http://dev.adverticum.com/creatives:html-en#using_display_module_functions]]**
  
 ==== Close ==== ==== Close ====
Line 202: Line 229:
 <div id="closeButton"></div> <div id="closeButton"></div>
 <script> <script>
-    document.getElementById('closeButton').onclick = window[goa.closeFunction];+    document.getElementById('closeButton').onclick = window[goa.closeFUNCTION];
 </script> </script>
  
Line 243: Line 270:
 <div id="openButton"></div> <div id="openButton"></div>
 <script> <script>
-    document.getElementById('openButton').onclick = window[goa.openFunction];+    document.getElementById('openButton').onclick = window[goa.openFUNCTION];
 </script> </script>
  
Line 286: Line 313:
 <div id="hideButton"></div> <div id="hideButton"></div>
 <script> <script>
-    document.getElementById('hideButton').onclick = window[goa.hideFunction];+    document.getElementById('hideButton').onclick = window[goa.hideFUNCTION];
 </script> </script>
  
Line 333: Line 360:
 <code javascript> <code javascript>
  
-{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG0": "//check.adverticum.net/"}+{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}
  
 </code> </code>
  
 This will be recieved by the tamplate and passed to the banner. If there is a need for extra parameters, please consult the developer to use the proper variable names.  This will be recieved by the tamplate and passed to the banner. If there is a need for extra parameters, please consult the developer to use the proper variable names. 
 +
 +:!: **Attention! This example won't measure clicks, it's just a sample, or if we want to use 3rd party measure links. To measure clicks please use the example below.
  
 In the example the two parameters are ''clickTAG0'' and ''clickTAG1''. These provide multiple CT URLs fot the banner. In the example the two parameters are ''clickTAG0'' and ''clickTAG1''. These provide multiple CT URLs fot the banner.
Line 348: Line 377:
  
 <code javascript> <code javascript>
-{"clickTAG0": "[url.e:100000]", "clickTAG1": "[url.e:200000]"}+{"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"}
 </code> </code>
  
-:!: It very important to use double quotes, and ''url.e'' expression. Also the inserted object has to be a single line, with no line breaks.+:!: It very important to use double quotes both on the key and value.
  
 When done in reality, the numbers will be the URL IDs. When done in reality, the numbers will be the URL IDs.
  
 ---- ----
creatives/ehtml-en.1443538445.txt.gz · Last modified: 2015/09/29 16:54 by avarga