From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Adding clickTAG Variables

There are various methods how to add clickTAG for HTML5 banner.  Below you will find samples how to add clickTAG instance on some particular element in HTML document, assign clickTAG on some frame source and etc.

First of all - it is important to know that Adform.DHTML.js library should be added in document's header in all cases.

<script>
document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>
  • Adding clickTAG on particular div

    Folow these steps to add clickTAG on some particular div in HTML5 banner:

    1. Set id (or class name) value for clickTAG area/layer:
      <div class="click-layer" id="clickLayer"></div>
    2. Take this particular element by it's id (or by class name) and set the click function to it. Place such script somewhere below the element in html document (just to make sure the element is created earlier then the code is executed):
      <script>
       var clickArea = document.getElementById('clickLayer');
      
       clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
       landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
      
       clickArea.onclick = function() {
       window.open(clickTAGvalue,landingpagetarget);
       }
      </script>

      Click on click layer area calls a function that opens a window with an inherited clickTAG url value from Adform system or the fallback static url.  If banner is uploaded to system getVar returns URL defined in system next to asset. If we are testing banner locally - fallback url is taken as clickTAG is 'null' so far. 

     Cursor style for clickTAG can be changed to a pointer by adding clickArea.style.cursor = "pointer";  to a click function.

  • Adding multiple clickTAGs

    If there is a need to have multiple clickTAGs on the same banner please do the following:

    1. Set id or (class name) for click elements:
      <body> 
      <div id="element"> 
      <div id="linkbox"> 
      <a id="left">My Link1</a> 
      <a id="center">My Link2</a> 
      <a id="right">My Link3</a> 
      </div> 
      </div>
    2.  Define a clickTAG values for each clickTAG instance. Values should get landing page url from Adform system (dhtml.getVar) once the banner is placed there or may use some static value for local testing. Collect all clickTAG instance elements from HTML document by using getElementById or getElementsByClass methods. Set the 'onlick' function to each separately. Place such script somewhere below the click elements in html document (just to make sure the elements are created earlier then the code is executed):
      <script> 
       clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.adform.com'); 
       clickTAGvalue2 = dhtml.getVar('clickTAG2', 'http://html5toolkit.adform.com/'); 
       clickTAGvalue3 = dhtml.getVar('clickTAG3', 'http://site.adform.com/resources/creative-space/'); 
       landingpagetarget = dhtml.getVar('landingPageTarget', '_blank'); 
      
       var center = document.getElementById('center');  
       var left = document.getElementById('left'); 
       var right = document.getElementById('right'); 
      
       center.onclick = function() { 
       window.open(clickTAGvalue,landingpagetarget); 
       }
       
       left.onclick = function() { 
       window.open(clickTAGvalue2,landingpagetarget); 
       }
       
       right.onclick = function() { 
       window.open(clickTAGvalue3,landingpagetarget); 
       } 
      </script> 

      Click on particular click layer area calls a function that opens a window with an inherited particular clickTAG url value from Adform system or the particular fallback static url (testing locally). If banner is uploaded to system getVar returns URL defined in system next to asset. If we are testing banner locally - fallback url is taken as clickTAG is 'null' so far.

    3. Register multiple clickTAGs to manifest.json file before the banner is uploaded to system, sample:
      { 
      	"version": "1.0", 
      	
      	"title": "Banner-Sample-580x400", 
      	"description": "", 
      	
      	"width" : "580", 
      	"height": "400", 
      
      	"events": { 
      		"enabled": 1, 
      		"list": { } 
      	}, 
      
      	"clicktags": { 
      		"clickTAG": "http://www.adform.com", 
      		"clickTAG2": "http://html5toolkit.adform.com/", 
      		"clickTAG3": "http://site.adform.com/resources/creative-space/", 
      	}, 
      
      	"source": "index.html" 
      }
  • Adding clickTAG as element's attribute

    It is possible to set clickTAG as <a> element's 'href' value. Please follow steps below.

    1. Set an id (or class names) to particular <a> elements. You may leave "href" not defined there:
      <div id="links">
       <div class="links-title"></div>
        <a class="link link-1" id="link-1" target="_blank">My first link</a>
        <a class="link link-2" id="link-2" target="_blank">My second link</a>
        <a class="link link-3" id="link-3" target="_blank">My third link</a>
        <a class="link link-4" id="link-4" target="_blank">My fourth link</a>
      </div>
    2. Below in html banner's code use this script to get particular <a> element and set href attribute for it . Each href may inherit clickTAG variable value from Adform system or some static url if banner is tested locally:
      <script>
      	document.getElementById('link-1').setAttribute('href', dhtml.getVar('clickTAG', 'http://www.example-1.com'));
      	document.getElementById('link-2').setAttribute('href', dhtml.getVar('clickTAG2', 'http://www.example-2.com'));
      	document.getElementById('link-3').setAttribute('href', dhtml.getVar('clickTAG3', 'http://www.example-3.com'));
      	document.getElementById('link-4').setAttribute('href', dhtml.getVar('clickTAG4', 'http://www.example-4.com"')); 
      </script>
    3. Register multiple clickTAGs to manifest.json file before the banner is uploaded to system, sample:
      {
      	"version": "1.0",
      	
      	"title": "Banner-Sample-930x400",
      	"description": "",
      
      	"width" : "930",
      	"height": "180",
      
      	"events": {
      		"enabled": 1,
      		"list": { }
      	},
      	
      	"clicktags": {
      		"clickTAG": "http://www.example-1.com",
      		"clickTAG2": "http://www.example-2.com",
      		"clickTAG3": "http://www.example-3.com",
      		"clickTAG4": "http://www.example-4.com",
      	},
      	
      	"source": "index.html"
      }
  • Code clickTAG inline

    It is possible to create clickTAG element and add JS click functionality straight inline. Please see samples below:

    1. Sample how to make a div with id "clicktagger" clickable and changing mouse pointer on mouse over/mourse out:
      <div id="clicktagger" onclick="javascript:window.open(dhtml.getVar('clickTAG'),'_blank');" 
      onmouseover="javascript:this.style.cursor='pointer';" onmouseout="javascript:this.style.cursor='auto';"></div>
    2. Sample how to create hyperlink element <a href=''>, set clickTAG variable value as href attribute and append it to document body:
      <script>
          window.onload = function() {
              var link = document.createElement('a');
              link.style.display = 'block';
              link.href = dhtml.getVar('clickTAG');
              link.target = dhtml.getVar('landingPageTarget');
              document.body.appendChild(link);
          }
      </script>
  • Using clickTAG with redirect

    In order to dynamically redirect the clickTAG value to another landing page, the ;cpdir= referrer can be used:

    var redirect = 'http://www.example.com';
    var custom = ';cpdir=' + redirect;
    window.open(clickTAG + custom, landingpagetarget);

    Note: the ;cpdir= referrer will not work while testing locally or in HTML 5 Studio environment. The creative must be served through the platform in order for such redirect to function properly.