Clics

 

Avant-propos

Avant de commencer l’implémentation du plugin Clics, veuillez-vous assurer d’avoir initialisé le Tracker JavaScript AT Internet et sélectionné le plugin depuis l’interface Tag Composer.

 

Principe

L’objectif de ce plugin est de permettre la mesure des clics de votre site.

 

Paramétrage du plugin

Le plugin Clics peut être configuré depuis l’interface Tag Composer. Deux paramètres sont concernés :

  • Gestion automatique des clics : Lorsqu’un clic déclenche une navigation ou une redirection, les navigateurs empêchent la mesure de ces liens. Cette gestion permet de forcer la mesure.
  • Timeout de la gestion automatique de clic : Durée après laquelle la gestion automatique de clic forcera la navigation même si la mesure n’a pas pu se faire (en millisecondes).
 

Marquage

Pour marquer vos clics, le tracker expose deux objets click et clickListener selon le type de marqueur souhaité.

click expose deux méthodes :

  • send : mesure ponctuelle d’un clic
  • set : s’utilise avec la méthode dispatch du tracker

Paramètres

PropriétéMéthodeDescription
elem send(optionnel) Element du DOM marqué
name send / setLibellé du clic
chapter1 send / setPremier niveau de chapitre
chapter2 send / setDeuxième niveau de chapitre
chapter3 send / setTroisième niveau de chapitre
level2 send / setNiveau 2 du clic
type send / set(obligatoire) type du clic, les valeurs possibles sont : ‘exit’ ‘download’ ‘action’ ou ‘navigation’
customObject send / setParamètres personnalisés (voir “Objet personnalisé”)
event send(optionnel) événement JavaScript (bloque la propagation de l’événement passé en paramètre) – depuis v5.7.0
callback send(optionnel) fonction à exécuter – depuis v5.7.0

clickListener expose une méthode :

  • send : mesure ponctuelle d’un clic

Paramètres

PropriétéDescription
elemElement du DOM marqué
nameLibellé du clic
chapter1Premier niveau de chapitre
chapter2Deuxième niveau de chapitre
chapter3Troisième niveau de chapitre
level2Niveau 2 du clic
type(obligatoire) type du clic, les valeurs possibles sont : ‘exit’ ‘download’ ‘action’ ou ‘navigation’
customObjectParamètres personnalisés (voir “Objet personnalisé”)
callback(optionnel) fonction à exécuter – depuis v5.7.0

Le paramètre « type » est obligatoire pour mesurer un clic.

Par défaut, si le paramètre « nom » n’est pas renseigné (ou est une chaîne vide), et si les attributs de chapitre ne sont pas renseignés (ou sont des chaînes vides), l’URL de la page sera utilisée comme nom de clic dans vos rapports. Dans le cas où votre tag est défini pour ne pas ignorer les valeurs de chapitres vides, alors l’URL de la page ne sera utilisée que si le paramètre « nom » n’est pas renseigné (ou est une chaîne vide) et si les attributs de chapitre sont totalement absents.

Le paramètre « event » n’est pas disponible pour la méthode send exposée par clickListener.

 

Exemples de marquage d’un lien

Le marquage standard d’un lien se fait via le code HTML de celui-ci

L’initialisation du tracker peut être faite avant ou après le code html qui définit l’élément cliquable marqué.

Le paramètre « elem:this » ainsi que le mot clé « return » permettent la gestion automatique des clics.

 

Exemple simple

<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>
 

Exemples avec chapitres

<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>
 

Exemple avec un événement JQuery

Disponible depuis la 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>
 

Exemple avec un callback

Disponible depuis la 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>
 

Marquage dans une méthode JavaScript personnalisée

<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>

Si vous avez une méthode que vous ne souhaitez pas toucher vous devez juste placer notre marqueur à la suite de celle-ci :

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

Marquage d’un formulaire

<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>
 

Marquage d’un lien ou formulaire via un listener d’évènement

Ce marqueur permet de ne pas placer du code JavaScript dans le code HTML.

En revanche il faut pouvoir référencer l’élément cliquable que l’on veut marquer, par exemple en donnant un identifiant à l’élément en question via l’attribut « id », et ensuite utiliser la méthode JavaScript « document.getElementById(<identifiant>) » pour renseigner la propriété de marquage « elem ».

Le code JavaScript contenant l’appel à « clickListener.send() » doit être placé après l’élément que l’on veut marquer (afin que celui-ci existe lorsque le code est exécuté).

Exemple d’un lien :

<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>

Exemple d’un formulaire :

<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>
Dernière mise à jour : 01/03/2019