santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

Utiliser Google Tag Manager pour son tracking Universal analytics

Qu'est ce que Google Tag Manager ?

GTM est un conteneur qui permet via une administration graphique de gerer tous les types d'analyse que l'on souhaite :

  • - GA
  • - stat.gif
  • - xiti
  • - ...

 L’intérêt est donc de tous centraliser à un même endroit. Google indique également que grâce à GTM, il y a moins de code à insérer.

Dans les faits, ce n'est pas forcément vrai (en tout cas pour ma part). Si vous souhaitez traquer des événement GA, il faudra la plupart du temps le faire depuis votre code mais différemment qu'avec le code GA. Nous verrons cela un peu plus tard dans un exemple.

 Sans plus tarder nous allons voir comment implémenter et utiliser GTM sur un site

GTM : l'interface utilisateur

GTM est un service gratuit. Il faut y accéder via http://www.google.com/tagmanager/

accueil google tag manager

Cliquez sur "se connecter" et s'identifier avec ses identifiants Gmail.

Une fois connecté, vous arrivez sur l'interface suivante :

configuration compte google tag manager

Cliquez sur "nouveau compte" et suivez la procédure :

compte gtm

A l'étape 2, choisissez "Page web" et entrez un ou plusieurs nom de domaine :

configuration du conteneur

Cliquez sur "créer un compte et un conteneur" pour valider.

Une nouvelle page avec le code à inclure dans votre code HTML est disponible.

code gtm à insérer

Attention à bien placer le code juste après la balise <body> et de ne pas l'inclure dans un tag HTML (genre div, section, aside, etc.) sinon un bug sous IE peut se produire.

Cliquez enfin sur "Ajouter des balises ultérieurement" et vous arrivez alors sur cette page :

liste des conteneur gtm configuré

Les Balises, les Règles et les macros

Arrivé à ce stade, il ne reste plus qu'à configurer vos balises, règles et macros. Mais que sont ces 3 concepts.

Pour faire simple :

  • Une macro est ce que l'on veut collecter comme donnée
  • Une règle est l’évent ou la page vue (ou autre) que l'on veut tracker à un moment précis
  • Une balise est la source statistique utilisée pour collecter une donnée.

Cela peut paraître un peu obscure de prime abord mais avec un exemple c'est beaucoup plus facile à appréhender.

Création d'une balise

Cliquez sur "créer" et choisissez "Balise"

creation d'une balise
créer et configurer une balise

Ajoutez un nom de balise. Dans notre exemple nous allons choisir ceci :

Comme vous pouvez le voir, on crée une balise qui va contenir la source statistique "Universal analytics" et qui va tracker les pages vues. Il ne faut pas oublier de spécifier son ID analytics afin que le conteneur renvoie bien nos données vers Google analytics.

Mais comment va t-il faire pour les envoyer ? Il lui faut un déclencheur.

Pour cela il faut rajouter une règle. Il suffit de cliquer sur "Ajouter" au niveau de "Règles de déclenchement" :

ajouter une regle à une balise

Dès lors une popin apparaît afin de définir notre règle.

ajout et creation de regle

On veut que le tracking de page vue soit envoyé à chaque chargement de page, on choisit donc la règle "Toutes les pages" puis on enregistre notre choix.

N.B. Si la règle ne convient pas, on peut en créer d'autre. On verra ce cas un peu plus loin dans l'article.

On revient sur notre page de configuration de balise qu'il ne reste plus qu'à valider pour enfin revenir sur le conteneur :

balise sauvegardée

Maintenant que l'on a créé notre balise pour tracker les pages vues, il faut maintenant l'activer afin que le tracking soit bien envoyé lors du chargement des pages web.

Prévisualiser / Publier votre conteneur

GTM permet de tester et debugger avant de pousser en production les tracking mis en place dans le conteneur.

Pour cela il suffit de cliquer sur "Prévisualiser" puis cliquer sur "Déboguer".

prévisualisation du conteneur

Je n'en dirai pas plus sur ce sujet, je vous conseille de tester. (Si besoin n'hésiter pas à mettre un commentaire pour me demander)

Enfin pour que le conteneur soit actif en production, il faut cliquer sur "publier". Cela créera une version de votre conteneur et le poussera en production.

Pour tester, il suffira d'aller sur le nom de domaine que vous avez configurer lors de la création du compte et du conteneur (dans mon cas http://127,0,0,1/blog-v2/) et regarder le trafic réseau via un firebug ou un chrome developper toolbar.

Vous verrez alors le gtm.js qui gère le conteneur et également le analytics.js de Universal et le tracking de page vue (via collect) :

page vue UA

Plus loin dans le tracking de page vue avec l’URL virtuelle

La plupart du temps dans le tracking de page vue, on ajoute une URL virtuelle plus simple à visualiser et qui répondra mieux à nos analyses.

Par exemple, il est préférable de tracker :

- /detail/[id]/provenance:home

que

-http://127.0.0.1/blog-v2/[title]-[id].html?provenance=home

Pour se faire nous allons utiliser le dataLayer.

Le dataLayer

C'est l'objet JavaScript qui permet de faire remonter des données particulières de notre page vers GTM (comme des évents particuliers ou des pages vues virtuelles le tout sous forme de variable).

Comment l'utiliser ?

Entre la balise body et votre balise de script, ajouter une balise <script> et insérer le code suivant:

<script>
    dataLayer = [{
        'virtualURL' : '/home/archive/page:3'
    }];
</script>

Ce code nous dit que le dataLayer qui envoie des données vers GTM aura une variable appelée "virtualURL" avec la valeur "/home/archive/page:3"

En somme, on déclare notre URL virtuelle que l'on veut envoyer à GTM.

Notre variable est déclarée et initialisée, mais comment l'utiliser dans GTM pour envoyer l’URL virtuelle vers Universal Analytics ?

Il suffit tous simplement de déclarer une macro que l'on utilisera dans notre balise "Universal analytics" créée précédemment.

La macro étant une variable utilisable dans GTM.

Créer une Macro

Pour déclarer une macro sous GTM, il faut se rendre sur la page du conteneur et cliquer sur "CREER" et choisir macro :

creation d'une macro

une page de création de macro apparaît :

configuration d ela macro

Entrez un nom et choisissez "variable de couche de données" (ou "dataLayer variables") :

utilisation de la variable dataLayer dans la macro

Enfin, il faut donner le nom de la variable, donc dans notre cas, ce que l'on a déclaré dans le JavaScript :

nom de la variable du dataLayer utilisée

Cliquer sur "Enregistrer".

Notre macro est défini, il faut maintenant dire à notre balise de l'utiliser pour générer la page vue avec l’URL virtuelle et non plus l'adresse HTML de notre page.

Pour cela, il faut reconfigurer notre balise "Universal Analytics" en cliquant dessus :

insertion de la macro dans la balise gtm
modification de la balise

Cliquer sur "Paramètres supplémentaires" puis sur "Configuration de base"

parametres supplémentaires de la balise

Dans le champs "Chemin du document" sélectionner votre macro en cliquant sur le "+" :

ajout de la macro dans les parametres

Une fois la macro renseignée, sauvegarder votre balise, puis publiez votre conteneur.

Nous allons re tester la page web précédente (dans mon cas (dans mon cas http://127,0,0,1/blog-v2/) et regarder encore une fois du coté de l'onglet réseau de firebug ou des outils de développeur chrome : 

visualisation du tracking

On constate alors dans le collect envoyé vers GA la présence de notre URL virtuelle.

Envoyer une page vue lors d'un appel AJAX

La façon de faire que l'on a vu précédemment permet de gérer une page vue lors du chargement de la page.

Mais parfois on a besoin de tracker une page lors d'un clic sur un bouton ou encore lors du chargement d'une nouvelle page lors d'une pagination infini.

Pour faire cela, il suffit de créer une nouvelle balise, lui appliquer une règle qui dit que le tracking est effectif si on reçoit une certaine donnée.

Cela peut paraître obscure mais l'exemple suivant va vous aider.

Je crée une balise dans GTM :

creation de la balise
creation de la balise et configuration

Dans le "chemin du document", je choisit de mettre une URL virtuelle que je vais renseigné car je ne veux pas utiliser l’URL courante de ma page.

Avant de sauvegarder, je lui attribue une règle qui dit qu' on envoie une page vue à chaque fois que le container reçoit la variable "{{event}}" contenant la valeur "jsPageView" :

ajout d'une regle

la règle apparaît sur la création de la balise :

ajout de la regle

Enregistrez votre balise, puis publiez votre conteneur.

balise

dataLayer.push()

La partie GTM est terminé, nous allons maintenant dans le code ajouté le JavaScript qui permettra de dire au conteneur GTM d'envoyer une page vue (virtuelle) lors d'un clic sur un bouton.

Pour cela nous allons utiliser l'objet dataLayer et sa méthode push(). Cette méthode permet d'envoyer des variables vers GTM.

Dans notre cas, nous allons ajouter ce code sur le clic d'un bouton avec l'id 'button'

<script>
$(document.getElementById('button')).on('click', function(){
    dataLayer.push({
        'event' : 'jsPageView',
        'virtualURL' : '/clic/button/'
    });
});
</script>

Il suffit de tester en regardant l'onglet console de votre outil pour développeur de votre navigateur. A chaque fois que vous cliquez sur le bouton, un événement de page vues est envoyé vers GA :

envoi de la statistique sur un clic

 

Les Événements Universal Analytics avec GTM

Il y a plusieurs façons de tracker les événements avec GTM. On peut utiliser des balises de type "Écouteurs de clic", "de minuteurs", "de clic de liens", ...

On peut utiliser l’évent selon Universal Analytics. C'est ce que je vais vous montrer dans cette section.

Tout d'abord créez une balise de type "Universal Analytics", nommez la, mette les informations nécessaire et choisir le type de suivi "Event" :

creation de la balise pour gerer les events

A ce stade, il faut alors ajouter 4 macro permettant de remplir les champs "Catégorie", "Action", "Libellé" et "Valeur". Enregistrez la balise, nous y reviendrons plus tard.

Nous allons créer ces macros que nous pourront alors passer au dataLayer dans le code JavaScript:  

ajout de la macro eventCategorie

Les autres macros seront dans le même principe :

creation de la macro eventActioncreation de la macro eventLabelcreation de la macro eventValue

Une fois créés, on édite la balise "Universal Analytics Event", on rajoute les macros dans les "Paramètres de suivi des événements" :

ajout des macro à la balise pour la gestion des events

La fonction hitCallback avec GTM

Si vous êtes familier avec Universal Analytics, vous savez que vous pouvez inclure une fonction de callback qui est exécuté quand GA a bien reçu l’évent.

Pour l'utiliser, il suffit de créer une macro comme précédemment :

ajout de la macro hitCallback

Enregistrez votre macro et retournez sur la balise "Universal Analytics Event" et renseignez votre macro au niveau des "Paramètres supplémentaires" puis "champs à définir"

ajout d'un champ

cliquez sur "Ajouter un champs" et ajouter les valeurs suivantes :

ajout du champ hitCallback

Enfin, il faut définir une règle pour que le tracking se fasse. Pour cela on clique sur "ajouter" au niveau de la partie "Règles de déclenchement".

ajout de la regle

Créez la règle suivante :

ajout de la regle "event"

Enregistrez la règle et enfin enregistrez la balise. Pour finir, publier votre conteneur.

Voila votre balise est prête, on va pouvoir l'utiliser dans notre code JavaScript

Si vous souhaitez tracker un clic d'ouverture de menu par exemple :

<script>
    $(document.getElementById('button-menu')).on('click', function(){
        dataLayer.push({
            'event' : 'event',
            'eventCategorie' : 'menu_bouton',
            'eventAction' : 'clic',
            'eventLabel' : 'ouverture',
            'hitCallback' : function() {
                console.log('event envoye avec succès');
            }
        });
    });
</script>

Encore une fois si on teste dans un navigateur, on voit bien le tracking envoyé et la callback appelée :

visuualiser de l'event et la callback

Conclusion

Le cas que je viens de vous montrer implique une interaction JavaScript, mais vous pouvez très bien demander à envoyer un événement via une règle GTM sans code JS.

Je vous invite à tester cet outil plus profondément, il offre pas mal de possibilités. Vous pouvez par exemple utiliser GTM pour la gestion de tracking avec un stat.gif pour votre propre source de tracking pour alimenter un Data Ware House. Vous pouvez aussi intégrer un code xiti, etc....

Si vous avez une question, n'hésitez pas à poster un commentaire.

 

image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page