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’s to Banners

2.png

There are various methods for adding clickTAGs to HTML5 banner.  Below you will find samples for how to add clickTAG instances on particular elements 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 the banner source file header section.

<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

    Follow these steps to add a clickTAG on a particular div in HTML5 banner

    Set id (or class name) value for clickTAG area/layer:

    <div class="click-layer" id="clickLayer"></div>

    Take this particular element by its id (or by class name) and set the click function to it. Place the below 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 the banner is uploaded to the system getVar returns URL defined in system next to the asset. If you are testing banner locally - the 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. The values should get the landing page url from the Adform system (dhtml.getVar) once the banner is placed there or may use a static value for local testing. Collect all clickTAG instance elements from HTML document by using getElementById or getElementsByClass methods. Set the 'onclick' 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" 
      }
  • 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.