Clicks

Foreword

Before beginning implementation of the Clicks plugin, please make sure you have initialised the AT Internet JavaScript tracker and selected the plugin from within the Tag Composer interface.

Principle

This plugin’s objective is to enable measurement of clicks on your site.

Plugin setup

The Clicks plugin can be set up from within the Tag Composer interface. Two parameters are affected:

• Automatic click management: When a click triggers navigation or redirection, browsers prohibit the measurement of these links. This management can force the measurement.
• Automatic click management timeout: Period of time after which the automatic click management will force the navigation, even if measurement was not able to take place (in milliseconds).

Tagging

To tag your clicks, the tracker exposes two objects, click and clickListener, based on the type of tag desired.

click exposes two methods:

• send: regular measurement of a click
• set: is used with the tracker’s dispatch

Parameters

clickListener exposes one method:

• send: regular measurement of a click

Parameters

The parameter “type” is mandatory to measure a click.

By default, if the “name” parameter is not entered (or is an empty string), and if chapter attributes are not entered (or are empty strings), the page URL will be used as the click name in your reports. Keep in mind that if your tag is set to not ignore empty chapter values, the URL will only be used if the “name” parameter is not entered (or is an empty string) and if chapter attributes are totally absent.

“event” parameter is not available for send method exposed by clickListener.

Link tagging examples

Standard tagging of a link is done via its HTML code.

Initialising the tracker can be done before or after the HTML code that defines the tagged clickable element.

The parameter “elem:this” as well as the keyword “return” enable automatic click management.

Simple example

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
</script>
<a href="http://www.site.com" onclick="return tag.click.send({elem:this, name:'clickName', level2:'clickLvl2', type:'navigation'});">Click me</a>

Example with chapters

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
</script>
<a href="http://www.site.com" onclick="return tag.click.send({elem:this, name:'clickName', chapter1:'myChapter1', chapter2:'myChapter2', level2:'clickLvl2', type:'navigation'});">Click me</a>

Example with JQuery event

Available since version 5.7.0

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
</script>
<a id="link" href="http://www.site.com">Click me</a>
<script type="text/javascript">
    $("#link").on( "click", function(event) {
        tag.click.send({
            elem: this,
            name: 'clickName',
            level2: 'clickLvl2',
            type: 'navigation',
            event: event
        });
    });
</script>

Example with callback

Available since version 5.7.0

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
</script>
<a id="link" href="http://www.site.com">Click me</a>
<script type="text/javascript">
    var link = document.getElementById('link');
    var callback = function() {console.log('executed');};
    ATInternet.Utils.addEvtListener(link, 'click', function (event) {
        tag.click.send({
            elem: link,
            name: 'clickName',
            level2: 'clickLvl2',
            type: 'action',
            callback: callback,
            event: event
        });
    });
</script>

Tagging in a custom JavaScript method

<script type="text/javascript">
var tag = new ATInternet.Tracker.Tag();
</script>
<script type="text/javascript">
    function customFunction(element){
        // your code
        return tag.click.send({
               elem:element, // DOM element given
               name:'clickName', 
               chapter1:'myChapter1', 
               chapter2:'myChapter2', 
               chapter3:'myChapter3', 
               level2:'clickLvl2', 
               type:'navigation', 
               customObject:{
                   param1:'val1',
                   param2:2
               }
           });
    }
</script>

<a href="http://www.site.com" onclick="return customFunction(this)">Click me</a>

If you have a method that you don’t wish to touch, you must simply place our tag right after your method:

<a href="http://www.site.com" onclick="customFunction();return tag.click.send({elem:this,...});">Click me</a>

Tagging a form

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
</script>
<form action="..." method="GET" onsubmit="return tag.click.send({elem:this,name:'myFormName',type:'navigation'});">
    <input type="submit" value="submit"/>
</a>

Tagging a link or a form via an event listener

This tag enables you to avoid placing JavaScript code in the HTML code.

However, it is necessary that the clickable element we wish to tag can be referenced, for example, by giving this element an ID via the “id” attribute, and then using the JavaScript method “document.getElementById(<ID>)” to add the tagging property “elem”.

The JavaScript code containing a call to “clickListener.send()” must be placed after the element we wish to tag (so that this element exists with the code is executed).

Example of a link:

<a href="javascript:void(0)" id="mylink">Click me</a>

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
    var callback = function() {console.log('executed');};
    tag.clickListener.send({
        elem: document.getElementById("mylink"),
        name: 'clickName',
        chapter1: 'chap1',
        level2: 'clickLvl2',
        type: 'action',
        callback: callback
    });
    // this will send a hit when the link is clicked
</script>

Example of a form:

<form action="..." method="GET" id="myForm">
    <input type="submit" value="submit"/>
</a>

<script type="text/javascript">
    var tag = new ATInternet.Tracker.Tag();
    tag.clickListener.send({
        elem: document.getElementById("myForm"),
        name: 'clickName',
        chapter1: 'chap1',
        level2: 'clickLvl2',
        type: 'action'
    });
    // this will send a hit when the form is submitted
</script>