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éthode Description
elem  send (optionnel) Element du DOM marqué
name  send / set Libellé du clic
chapter1  send / set Premier niveau de chapitre
chapter2  send / set Deuxième niveau de chapitre
chapter3  send / set Troisième niveau de chapitre
level2  send / set Niveau 2 du clic
type  send / set (obligatoire) type du clic, les valeurs possibles sont : ‘exit’ ‘download’ ‘action’ ou ‘navigation’
customObject  send / set Paramè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
elem Element du DOM marqué
name Libellé du clic
chapter1 Premier niveau de chapitre
chapter2 Deuxième niveau de chapitre
chapter3 Troisième niveau de chapitre
level2 Niveau 2 du clic
type (obligatoire) type du clic, les valeurs possibles sont : ‘exit’ ‘download’ ‘action’ ou ‘navigation’
customObject Paramè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>
Cet article vous a-t-il été utile ?
Oui
Non
Dernière mise à jour : 01/03/2019