Content

These are instructions for adding click counting support to your HTML5 creatives when served via Fusion ad serving system.
The instructions does not contain size, animation or script limitations/requirements, since they might vary between the different sites of our clients. Each site should provide such document separately from this one.

All HTML5 ads will be served into closed iframes (aka. none friendly iframe (cross domain) where the domain of the url of the iframe is separate from domain of webpage where it is shown), the iframe will be generated by Fusion ad templates.

Each html5 ad should be archived as a zip file, containing all files needed to display your ad.

1. Preparing your html5 creative to count clicks with Fusion ad serving system.

Before sending your html5 ad you need to include Fusion specific support for click counting.
Since the ad will load inside an iframe all click redirects must be opened in a new browser window.

1.1 Include Fusion script file.

First include the Fusion specific script file named html5clickcount.js into the file that initiates the ad (e.g. index.html).

Script code to include is:
<script src=”http://assets.adtomafusion.net/spl/html5clickcount.js”></script>

This file will fetch the click counter url (when ad served through Fusion) and assign it to a javascript variable named clickTag.
So the important thing is that the script loads before any references to the clickTag variable is made in your html5 code.
Preferably add it into the <head> part of your ad html code like this:
<!doctype html>

<html>

<head>

<style>

...

</style>

<script src="http://assets.adtomafusion.net/spl/html5clickcount.js"></script>

</head>

<body>

[HTML code of your HTML5 ad]

</body>

</html>

You can also download the file and have it included into your html5 zip package.
Then above script inclusion would use a relative url like this e.g. (if file is placed in a folder named “js”)
<script src=”/js/html5clickcount.js”></script>

1.2 Add clickTag variable.

Now you need to include the clickTag variable together with your redirect url’s (the url’s that are initiated when clicking the ad)

There are three different scenarios for which clicks can be counted (1.2.1, 1.2.2, 1.2.3), and two different for which the clickTag variable can be used (1.2.1, 1.2.2).
Choose the one most suitable for you, however if you plan to change the redirect url’s during the campaign we recommend using the dynamic alternative in option 1.2.2 (so you don’t have to send a new HTML5 ad for each url change)

1.2.1 Redirect url’s hardcoded in html5 ad code.

Then you need to apply Fusion click counter in front of the redirect url.
Fusion click counter will then act as a redirect, so when clicking the ad user will first be directed to Fusion servers which counts a click and then redirects user to the advertiser url from your html5 ad.

For example you have an image in your html5 ad that redirects to http://www.somesite.com
 Before:
 <a href="javascript:window.open('http://www.somesite.com')"><img src="someimage.jpg"></a>
After:
 <a href="javascript:window.open(clickTag+'http://www.somesite.com')"><img src="someimage.jpg"></a>

When you apply click tracking to a url you need to add the clickTag variable in front of it, like above.

Encode Url’s with query strings
If your url contains query strings you should also encode it to ensure all parameters are intact when the redirect occurs, like this:

 <a href="javascript:window.open(clickTag+encodeURIComponent('http://www.somesite.com?a=1&b=2&c=3'))"><img src="someimage.jpg"></a>

1.2.2 Redirect url’s administrated in Fusion system (dynamic url’s)

If redirect url’s are not hardcoded into the ad but instead hosted and administrated in the Fusion system, which makes it easier if one wants to change redirect url during the campaign run.
This means you should completely replace your redirect url’s with the clickTag variable, and send the redirect url’s separately in e.g. a text file together with the zip package.
The redirect url’s will be assigned to the ad by the Adcoordinator when creating the booking in the Fusion system.

For example you have an image in your html5 ad that redirects to http://www.somesite.com
Before:

 <a href="javascript:window.open('http://www.somesite.com')"><img src="someimage.jpg"></a>

After:

 <a href="javascript:window.open(clickTag)"><img src="someimage.jpg"></a>

You completely replace your url with the clickTag variable, like above.

Multiple url’s

If you have multiple url’s in your ad pointing to different destination URL’s then available is also
variables clickTag2,clickTag3… up to clickTag10 for the other URL’s.
Important here is to specify which clickTag variable should be connected with which URL in your text file.

1.2.3 Count clicks separately.

If you have links or actions in your html code where you want to count clicks but without
including Fusion clickcounter to your url, or maybe places where no redirect should occur.
You can add a call to the function fusionclickcount(); which will trigger a click count separately inside your html5 ad.
For example:

 <a href="http://www.somesite.com" onclick="fusionclickcount();" target="_blank">A link I want to count</a>

2. Testing the click counter function

After the ad has been configured according to one of the above click counter options, you can test that the clicks will be counted correctly via this basic test page: http://assets.adtomafusion.net/html5/html5test.html– There is no upload function so the ad has to be on a webserver.- Add the path to the initiating html file and destination URL’s corresponding to the different clickTag variables (if they are not hardcoded in the html). – Test by clicking on the ad and if everything is correct you will get a confirmation page informing you that click will be counted

3. Sending your html5 creative. 

Add all your files and content needed to display you html5 ad into a zip archive file.
If your redirect url’s are not hardcoded into the html5 ad code, add them into a separate text file
(in case of multiple url’s, include instructions for which clickTag variable they should be attached to).
Also include instructions which html file that initiates the ad (shows the ad).

 

Login to leave your feedback!

vedad.mehmedovic

One Response to “HTML5 Click Counting”

  1. vedad.mehmedovic

    dsss

    Reply

Leave a Reply