Manage click counting
Click counting for HTML5 creatives
This section describes how to ensure appropriate click tracking for HTML5 creatives in Equativ's system.
Add click counting library
In the creative's main index.html file, add the click counting library to the <head> section:
<script src="//ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js">
</script>Assign hyperlink to clickable item
When assigning a hyperlink to a clickable item on the HTML5 creative—for example some text, a button or an image— you can choose from two methods.
Assign hyperlink: method 1
<a id="clickArea"></a>
<script type="text/javascript">
var clickArea = document.getElementById("clickArea");
clickArea.onclick = function(){
window.open(clickTag, "blank");
}
</script>Assign hyperlink: method 2
<a id="clickArea" target="_blank"></a>
<script type="text/javascript">
var clickArea = document.getElementById("clickArea");
clickArea.href = clickTag;
</script>In case of method 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>HTML5 creative with single clickthrough URL
If a single clickthrough URL is required, declare the variable clickTag and assign the clickthrough URL in the HTML5 creative's main index.html file.
<script>
var clickTag = "http://www.theclickthroughurl.com";
</script>Make sure you replace http://www.theclickthroughurl.com 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=""HTML5 creative with multiple clickthrough URLs
If the creative has multiple clickthrough URLs, the clickTags have to be enumerated: 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>- The enumeration of multiple clickTags must always begin with
clickTag0. If the numbering starts with any other value, for example withclickTag1, the clicks will not be counted properly. - 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 clickthrough 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=""HTML5 creatives built with Google Web Designer (GWD)
For creatives which were built with Google Web Designer (GWD), the steps are as follows:
Step 1: 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>Step 2: add the clickTag variable within the <body> section.
<script>
var clickTag = "http://www.equativ.com";
</script>Step 3: search for gwd-events="handlers" in the script and locate the URL between double quotes.
Step 4: replace this URL by clickTag, without any quotes.
Step 5: add the clickArea variable, using the page1 element, right before the </body> element.
<a id="clickArea"></a>
<script type="text/javascript">
var clickArea = document.getElementById("page1");
clickArea.onclick = function() {
window.open(clickTag, "blank");
}
</script>Show mouse pointer
To indicate that an HTML5 creative is interactive, you can change the mouse cursor to a pointer when hovering over a clickable area. To implement this behavior, add the onmouseover attribute to the element that defines the clickable area within the HTML5 creative.
For example, if the clickable area is a <div> with id="page1", add the following:
<div id="page1" onmouseover="this.style.cursor='pointer';"></div>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>Equativ does not recommend using this method as it will cause writing the "object window" string in the ad container after click.
Examples
Example 1: HTML5 creative with 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>Example 2: HTML5 creative with 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>Example 3: HTML5 creative with single clickTag and registered callback
<!DOCTYPE html>
<html>
<head>
<title>HTML5 single clicktag with callback</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>Example 4: HTML5 creative A with various clickTag options (download)
Download the HTML5 creative A, containing a JS file showing various clickTag options.
Encoding of click tracking URLs
A common issue with the encoding of click tracking URLs is that click URL parameters are cut off. For example, this issue occurs when an Equativ ad tag is used in a third party system or when an ad tag from an Equativ network is used in another Equativ network.
To manage the encoding, add the clctenc= parameter to the parameters of the ad tag. This parameter indicates the number of times that Equativ's click URL must be encoded before appending it to the click tracking URL. For example, clctenc=2 means that the click URL is encoded twice.
The allowed values for the clctenc= parameter are: 0, (default), 1, 2, and 3.
The following example shows and ad tag with the clctenc= parameter set to 2:
<script type="text/javascript" src="http://www3.smartadserver.com/ac?pgid=609289&insid=5138306&tmstp=[timestamp]&out=js&clcturl=[countgoEncoded]&clctenc=2"></script>
Append clctenc=1 if you are using an Equativ ad tag from another Equativ network in an insertion in your own network.
Examples
Example click tracking URL:
http://some.adserver.com/click?url=Example click URL:
http://www.google.fr/search?n=10&q=testWith the default encoding level (clctenc=0), Equativ would generate the following URL:
http://some.adserver.com/click?url=http://www.google.fr/search?n=10&q=testWith an encoding level of one (clctenc=1), Equativ would generate the following URL:
http://some.adserver.com/click?url=http%3a%2f%2fwww.google.fr%2fsearch%3fn%3d10%26q%3dtestDepending on the implementation of the third party system, only one of these URLs may be processed correctly.
If the third party system follows the usual scheme for encoding the query string of URLs, the two URLs above would be processed as follows:
- URL generated with
clctenc=0:http://www.google.fr/search?n=10(processing error:q=testis cut off) - URL generated with
clctenc=1:http://www.google.fr/search?n=10&q=test(correct processing)
If the third party system considers whatever follows its url= parameter to be a valid URL, the two URLs above would be processed as follows:
- URL generated with
clctenc=0:http://www.google.fr/search?n=10&q=test(correct processing) - URL generated with
clctenc=1:http%3a%2f%2fwww.google.fr%2fsearch%3fn%3d10%26q%3dtest(processing error)
Note that some third party ad systems recognize both forms of URLs and do not directly fall in one or the other behavior.
Ads with HTTP click URLs delivered on HTTPS websites
When delivering ads with HTTP click URLs on HTTPS websites, the W3C referrer policy requires that the referrer is not shared with the target page, for security reasons. However, preserving the referrer is critical for web analytics tools, such as Google Analytics, which are frequently used by agencies and advertisers to correlate user behavior with the click on an ad.
This section provides a workaround for this issue.
Add meta referrer tag
To preserve the referrer when an ad with an HTTP click URL is clicked on an HTTPS website, you can add the meta referrer tag on the website with referrer set to "always", as specified in the W3C referrer policy.
There are two implementation methods.
Implementation #1: Add meta referrer tag in custom script (recommended)
Go to your insertion and paste the following code in the Custom script field of the creative or of the insertion.
<script>
setTimeout(function(){
var link=document.createElement('meta');
link.name = "referrer";
link.content = "always";
window.top.document.getElementsByTagName('head')[0].appendChild(link);
},2000);
</script>Setting the meta referrer tag using the Custom script of the creative or insertion is recommended since it does not involve any changes on the publisher website.
With this implementation method, all outgoing clicks from the HTTPS publisher page to an HTTP page will forward the referrer whenever the code above is delivered. In some cases, this might represent a security issue.
Implementation #2: Add meta referrer tag in publisher website
Ask the developer in charge of the publisher website to add the following line in the <head> of the website:
<meta name="referrer" content="always" />Make sure you place the meta referrer tag inside the <head> of the website since Firefox is very strict in this regard—do not paste it in the <body>.
Adding the meta referrer tag directly into the website means that the referrer policy will apply to any outgoing traffic without exception. It will apply even if there was no ad delivered by Equativ at all! This might represent a security issue.