Ask Question

Test & Support Center

Adding ClickTAG’s to Banners

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:

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>

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.

{ 
	"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.