In this article
This article describes how to ensure appropriate click tracking for HTML5 creatives in Equativ's system.
Integration types
The table below indicates if this article is relevant for your type of integration with Equativ.
Click counting library
In the creative's main file (index.html), insert the following script within the <head> section:
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js">
</script>
ClickTag variable
<!DOCTYPE html>
<html>
<head>
<title>html5 multi clicktag</title>
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js">
</script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
name="viewport">
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:150px;display:block;}
#click-area2{background-color:blue;height:150px;display:block;}
#click-area3{background-color:yellow;height:150px;display:block;}
#click-area4{background-color:black;height:150px;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var clickTag0 = "http://smartadserver.com";
var clickTag1 = "http://google.com";
var clickTag2 = "http://wp.pl";
var clickTag3 = "http://onet.pl";
</script>
<div id="main-container">
<a id="click-area1"></a> <a id="click-area2"></a> <a id=
"click-area3"></a> <a id="click-area4"></a>
</div>
<script type="text/javascript">
var clickArea1 = document.getElementById("click-area1");
clickArea1.onclick = function(){
window.open(clickTag0, "blank")
}
var clickArea2 = document.getElementById("click-area2");
clickArea2.onclick = function(){
window.open(clickTag1, "blank")
}
var clickArea3 = document.getElementById("click-area3");
clickArea3.onclick = function(){
window.open(clickTag2, "blank")
}
var clickArea4 = document.getElementById("click-area4");
clickArea4.onclick = function(){
window.open(clickTag3, "blank")
}
</script>
</body>
</html>
Single clickthrough URL
In the creative's html file (index.html), declare the variable clickTag and assign the clickthrough URL.
<script>
var clickTag = "http://www.theclickthroughurl.com";
</script>
Keep in mind
The URL http://www.theclickthroughurl.com is an example. Make sure you replace it by the actual clickthrough URL intended for the given creative.
The variable clickTag is optional. If not used, leave the variable value empty, as follows: var clickTag="".
Multiple clickthrough URLs
If the creative has multiple clickable items, the clickTags have to be enumerated (counted):
clickTag0,
clickTag1,
clickTag2...
The enumeration of multiple clickTags must always begin with
clickTag0. If the numbering starts with any other value (e.g.,
clickTag1,
clickTag2, etc.), the clicks will not be counted properly.
<script>
var clickTag0 = "http://www.theclickthroughurl-1.com";
var clickTag1 = "http://www.theclickthroughurl-2.com";
var clickTag2 = "http://www.theclickthroughurl-3.com";
</script>
- In case of multiple clickTags, make sure you leave the Click URL field of the HTML5 creative in your insertion empty. Otherwise, the click URL from the Click URL field would override the click URLs of all clickTags.
- It is not possible to retrieve reports by clickable item. Reports only show the sum of clicks on all clickable items.
The variables clickTag0, clickTag1 etc. are optional. If not used, leave the variable values empty, as follows: var clickTag0="", var clickTag1="" etc.
Click destination
When assigning a hyperlink to a clickable item on the creative (text, button, image etc.), you can choose from these options.
Option 1
<a id="clickArea"></a>
<script type="text/javascript">
var clickArea = document.getElementById("clickArea");
clickArea.onclick = function(){
window.open(clickTag, "blank");
}
</script>
Option 2
<a id="clickArea" target="_blank"></a>
<script type="text/javascript">
var clickArea = document.getElementById("clickArea");
clickArea.href = clickTag;
</script>
When using Option 2, it is necessary to wait for the initialization of the click counting library. The library must first replace the javascript clicktag variables before the ad can be rendered.
To know when the initialization is completed, register the "init" function, which will callback when the click counting library has finished its task:
<script>
function init(){
/* this is a custom function which starts building the ad */
}
sas.clicktag.register(function(){
init();
});
</script>
IAB specifications
In the IAB's specification, you will find the clickTag variable used as follows:
<a href="javascript:window.open(window.clickTag, '_blank')"</a>
We do not recommend using this method as it will cause writing the "object window" string in the ad container after click.
Click counting in apps
Click counting for HTML5 creatives in apps (iOS/Android SDK) is described
here.
HTML5 creative samples
Sample 1: Single clickTag and window.open method
<!DOCTYPE html>
<html>
<head>
<title>html5 single clicktag</title>
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js">
</script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
name="viewport">
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:600px;display:block;}
#click-area2{background-color:blue;height:150px;display:block;}
#click-area3{background-color:yellow;height:150px;display:block;}
#click-area4{background-color:black;height:150px;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var clickTag = "http://smartadserver.com";
</script>
<div id="main-container">
<a id="click-area1"></a>
</div>
<script type="text/javascript">
var clickArea1 = document.getElementById("click-area1");
clickArea1.onclick = function(){
window.open(clickTag, "blank")
}
</script>
</body>
</html>
Sample 2: Multiple clickTags and window.open method
<!DOCTYPE html>
<html>
<head>
<title>html5 multi clicktag</title>
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js">
</script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
name="viewport">
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:150px;display:block;}
#click-area2{background-color:blue;height:150px;display:block;}
#click-area3{background-color:yellow;height:150px;display:block;}
#click-area4{background-color:black;height:150px;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var clickTag0 = "http://smartadserver.com";
var clickTag1 = "http://google.com";
var clickTag2 = "http://wp.pl";
var clickTag3 = "http://onet.pl";
</script>
<div id="main-container">
<a id="click-area1"></a> <a id="click-area2"></a> <a id=
"click-area3"></a> <a id="click-area4"></a>
</div>
<script type="text/javascript">
var clickArea1 = document.getElementById("click-area1");
clickArea1.onclick = function(){
window.open(clickTag0, "blank")
}
var clickArea2 = document.getElementById("click-area2");
clickArea2.onclick = function(){
window.open(clickTag1, "blank")
}
var clickArea3 = document.getElementById("click-area3");
clickArea3.onclick = function(){
window.open(clickTag2, "blank")
}
var clickArea4 = document.getElementById("click-area4");
clickArea4.onclick = function(){
window.open(clickTag3, "blank")
}
</script>
</body>
</html>
Sample 3: Single clickTag and registered callback
<!DOCTYPE html>
<html>
<head>
<title>html5 single clicktag with callback test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js"></script>
<style>
body{width:300px;height:600px;margin:0;padding:0;}
#main-container{width:300px;height:600px;cursor:pointer;}
#click-area1{background-color:red;height:600px;display:block;}
#click-area2{background-color:blue;height:150px;display:block;}
#click-area3{background-color:yellow;height:150px;display:block;}
#click-area4{background-color:black;height:150px;display:block;}
</style>
</head>
<body>
<script type="text/javascript">
var clickTag = "http://smartadserver.com";
</script>
<div id="main-container">
<a id="click-area1" target="_blank"></a>
</div>
<script>
function customerFunc(){
var clickArea1 = document.getElementById("click-area1");
clickArea1.href = clickTag;
}
sas.clicktag.register(function(){
customerFunc();
});
</script>
</body>
</html>
Sample 4: Click counting in HTML5 creatives
Download a sample file here. In this ZIP file, you will find a full HTML5 creative. Its JS file includes various clicktag options.
Samples 5 and 6
Download
Example-HTML5-1.zip or
Example-HTML5-2.zip
HTML5 creatives built in GWD (Google Web Designer)
For creatives which were built in GWD (Google Web Designer), the steps are as follows:
First, add Equativ's click counting library at the end of the <head> section:
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js">
</script>
Within the <body> section, add the clickTag variable:
<script>
var clickTag = "http://www.smartadserver.com";
</script>
Then, search for 'gwd-events="handlers"' in the script and locate the URL between double quotes:
Replace this URL by clickTag (without any quotes):
Right before the </body> element, add the clickArea variable, using the page1 element:
<a id="clickArea"></a>
<script type="text/javascript">
var clickArea = document.getElementById("page1");
clickArea.onclick = function() {
window.open(clickTag, "blank");
}
</script>
Changing mouse cursor to pointer on mouse over (hover)
To indicate that the user can interact with the HTML5 ad, make sure you add the onmouseover property to the element containing the clickable area within the banner.
For instance, if the clickable area is represented by a div container with id="page1", add the attribute as follows:
<div id="page1" onmouseover="this.style.cursor='pointer';"></div>
