Click counting in HTML5 creatives

A Spanish version of this article is available here.

You can also find the information in this article in the technical documentation here. Its content may be more up-to-date than the article below.

This article covers how Smart AdServer's latest technology allows you to count clicks in HTML5 creatives. This solution follows the IAB's recommendations (see section "2.4 Ad Server Compatibility", page 11).

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.0.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.0.js"></script>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<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>

Multiple clickthrough URLs

If the creative has multiple clickable items, the clickTags have to be enumerated (counted): clickTag0, clickTag1, clickTag2...

<script>
    var clickTag0 = "http://www.theclickthroughurl-1.com";
    var clickTag1 = "http://www.theclickthroughurl-2.com";
    var clickTag2 = "http://www.theclickthroughurl-3.com";
</script>

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.

Overriding the clickthrough URL

While the creative developer has defined the clickthrough URL(s) as values for the clickTag variable, there is also a simple way to change these clickthrough URL using Smart AdServer user interface.

This adds flexibility: the campaign manager (who receives the creative with its clickthrough URLs) can replace (override) these URLs without having to involve the creative developer who provided the creative.

Read more about how to use this feature here.

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.0.js"></script>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<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.0.js"></script>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<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.0.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.

clic

Was this article helpful?
7 out of 7 found this helpful
Powered by Zendesk