Digimood

Tracker un Pop Up Newsletter via Google Tag Manager

Pouvoir tout tracker sur un site web sans toucher à son code source est un rêve devenu réalité grâce à Google Tag Manager. Je vous explique ici comment tracker entièrement un Pop Up Newsletter uniquement avec GTM. Bonne lecture !

Sommaire

A/ Présentation de Google Tag Manager B/ Notre objectif : tracker sans toucher au site C/ Explication du concept et du raisonnement

Tracker le clic de fermeture et le clic d’inscription

0/ Activation de la Built-In Variabe “Click Element” 1/ Dupliquer le tag google Analytics 2/ Renommer le tag 3/ Configuration du tag 4/ Création d’un nouveau trigger 5/ Choix du type d’Event 6/ Sélection de l’élément à écouter 7/ Construction du matching par sélecteur CSS

Tracker l’affichage du Pop Up

1/ Etape 1 précédente 2/ Etape 2 précédente 3/ Etape 3 précédente 3’/ Tag Firing Options 4/ Création d’un nouveau trigger 5/ La fonction Timer 6/ Configuration du Trigger 7/ Enable When : quand activer le Trigger 8/ Fire One : détection de l’affichage #/ Comptabiliser les Rage Quit #/ Conclusion

Présentation de l’outil

Pour ceux qui ne connaissent pas Google Tag Manager (GTM pour les intimes), il s’agit d’une solution SaaS proposée par… Google ! (T’es sûr c’est pas un outil Bing ?) pour gérer l’ensemble des ses codes de tracking. Et comme souvent avec Google, c’est propre, c’est pro, c’est puissant et c’est gratuit (Oui j’ai des actions chez Google). Au delà de l’aspect de gestion, il s’agit surtout d’externaliser les bouts de code de tracking. Ça permet de ne plus pourrir l’ensemble de son site web avec des pixels blancs, des bouts de code HTML, JavaScript et j’en passe. On pose un seul code sur son site, celui de Google Tag Manager, et ensuite tout se passe sur le Back Office de la solution. Un premier aspect intéressant est qu’on a plus besoin de déranger l’équipe de développement pour poser un tag, une fois qu’on a pris en main le tool. Une bonne manière de réconcilier les équipes marketings et les équipes techniques donc. En revanche, bien que cet aspect soit celui mis en avant par Google, il ne faut pas se faire d’illusion : si on souhaite pousser un peu le potentiel de GTM, il va falloir mettre les mains dans le cambouis. Autrement dit, ne pas avoir peur de faire de l’HTML, du CSS et bien entendu du JavaScript, langage phare du tracking.

Tracker sans intervenir sur le site web

Aujourd’hui je vais vous expliquer comment tracker un Pop Up Newsletter sans toucher à votre site web, en passant uniquement par GTM. Alors attention, il n’y a pas de recette parfaite. En fonction de la situation, il peut y avoir plusieurs possibilités pour arriver à vos fins. Certaines solutions seront à écarter d’emblée et parfois un seul chemin se présentera à vous. Ici, je vais tenter de présenter une méthode qui devrait matcher avec la plupart des cas. Mais en fonction des choix faits en amont par les développeurs, il faudra probablement adapter la méthode pour qu’elle fit à 100% avec votre environnement. Notons qu’il s’agit d’une utilisation relativement avancée, mais assez simple à comprendre et à mettre en oeuvre. Il ne s’agit en revanche peut-être pas d’un exemple idéal pour découvrir GTM. Je vous conseille donc de potasser un peu le sujet avant d’attaquer ce tutoriel, si vous êtes 100% néophyte. Dernière précision : je ne l’ai pas explicité jusqu’alors, mais le tracking se fera bien entendu via un tag Google Analytics.

Notre objectif de tracking

  1. Connaître le nombre d’affichages du Pop Up
  2. Connaître le nombre de fermetures du Pop Up
  3. Connaître le nombre de souscriptions à la Newsletter

Un peu de théorique avant la pratique

Je vais expliquer ici la démarche dans son ensemble, pour que vous compreniez bien le raisonnement au global. Mais les plus fainéants pressés d’entre-vous peuvent passer directement à la pratique. On verra le cas le plus complexe en dernier, à savoir le tracking de l’affichage du Pop Up. Nous allons commencer par tracker la fermeture du Pop Up ainsi que la souscription à la Newsletter, puisqu’il s’agit exactement de la même méthode. Dans les deux cas il suffit d’écouter un clic sur un élément HTML. Au tout départ, Google Tag Manager ne pouvait pas tracker lui-même les events. Il fallait les “pusher” directement dans le code source de sa page et c’est ensuite le tag Google Analytics par exemple qui prenait le relai pour traiter l’Event via GTM. Désormais, on peut écouter des évènements au sein même de Google tag Manager (“auto event”), comme par exemple… Des clics. Et c’est là où ça devient intéressant. Car on va pouvoir directement, dans Google Tag Manager, écouter et tracker nos clics sur la petite croix de fermeture et sur le bouton “Je souscris”. Et là, vous allez vous demander comment dire à Google que c’est CE bouton là et CETTE petite croix-là que nous souhaitons tracker. A ce niveau là, il existe plusieurs solutions. Mais on va en étudier qu’une seule, celle qui me paraît de loin la plus puissante : le matching par sélecteur CSS.

Le matching par sélecteur CSS : une fonctionnalité Rock’n’Roll

Ici, on va indiquer à Google l’élément visé grâce à un sélecteur CSS. Exactement le même sélecteur qu’on aurait utilisé si on avait souhaité styliser cet élément dans une feuille CSS. C’est quand même la classe, non ? Cette fonctionnalité existe depuis février 2015 et permet à mon sens d’exploiter à fond le potentiel de l’outil. Pour réaliser cet exploit, Google s’appuie tout simplement sur les technologies JavaScript et sur le navigateur. Attention donc, si vous utilisez des sélecteurs CSS 3, ce ne sont pas tous les navigateurs qui seront capables de les interpréter.

Tracker l’affichage : plus compliqué que ça en a l’air

Le problème de la plus part des Pop Up Newsletters est qu’il s’agit en réalité plutôt de Pop In que de Pop Up. Autrement dit il n’y a pas de création de nouvelle fenêtre, mais seulement d’un nouveau div. Et techniquement, la création ou l’affichage d’un div n’est pas un évènement (d’un point de vue JavaScript / navigateur). Comment faire alors pour savoir quand notre “div Pop Up” va passer d’un display:none à un display:block ? Si on décide d’intervenir sur le site, c’est simple : la fonction JavaScript qui déclenche l’affichage du Pop Up devra également déclencher un évènement qui sera pushé dans Google Tag Manager via le DataLayer. En revanche, si on décide de rester sur GTM à 100% (ce qui est quand même un petit peu le but de cet article, hein) il va falloir ruser, car il n’existe officiellement pas d’évènement pour écouter le changement d’état d’un div. Ni d’évènement JavaScript, ni de fonction GTM.

La fonction Timer : gardons nos oreilles grandes ouvertes

La ruse va être simple, mais efficace : on crée une fonction qui vérifie si notre Pop Up est en display:none ou en display:block. Si le Pop Up est en display:block, alors on retourne 1. Sinon on retourne zéro. Et grâce à un système de timer, on va déclencher cette fonction à intervalles cours et réguliers. D’un point de vue interface Google Tag Manager, il ne s’agit d’ailleurs pas d’une fonction mais d’une variable de type “Custom JavaScript”. Une fois que notre “variable” est prête, on utilise alors la fonction Timer de Google Tag Manager pour écouter. Merci Google Tag Manager d’avoir pensé à tout 🙂 Vous connaissez désormais tout le schéma théorique pour tracker les deux clics (fermeture / inscription) et l’affichage. Voyons voir ce que ça donne dans la pratique, étape par étape.


Mise en pratique, les pré-requis :

  1. Avoir Google Tag Manager opérationnel sur son site
  2. Avoir le tracking Google Analytics fonctionnel au sein de Google Tag Manager

Ces deux pré-requis feront peut-être l’objet de deux tutoriels dans un avenir proche, mais il existe déjà pas mal de ressources sur la question, y compris en français. On va commencer par créer le tracking clic “Fermeture”. Il suffira de répéter toutes les étapes au complet pour réaliser le tracking du clic “Je m’inscris”, puisqu’il s’agit exactement du même principe.

Etape préliminaire : activer la Built-In Variable “Click Element”

Dans l’onglet Variables, vous retrouvez une liste de variables générées directement par Google Tag Manager. Elles ne sont pas activées par défaut. Il va donc falloir en activer au moins une pour notre tutoriel, celle qui s’appelle “Click Element”. Elle permet de capturer l’élément dans le DOM qui a été cliqué, quand on utilise un Trigger de type “Click”. On se rend donc dans l’onglet variable, on clique sur la checkbox “Click Element” et le tour est joué ! Google Tag Manager

Etape 1) Dupliquer le tag Google Analytics

Afin d’avoir directement toutes les infos de votre compte Google Analytics (notamment le UA), il faut dupliquer l’un de vos tags Google Analytics. Google Tag Manager Google Tag Manager

Etape 2) On renomme le tag

Essayez de respecter une nomenclature. Le nombre de tags augmentant, ça peut vite devenir le bordel. Google Tag Manager

Etape 3) On configure le tag

La première chose à faire est de mettre en place une hiérarchie cohérente grâce aux trois niveaux proposés par Google Analytics :

  1. Category
  2. Action
  3. Label

De mon côté, j’ai opté pour la hiérarchie suivante :

  1. Category : Newsletter
  2. Action : Pop Up Newsletter
  3. Label : Fermeture

Le point le plus important dans l’étape de configuration est de régler correctement l’option Non-Interaction Hit. Ici, le but du jeu est d’éviter que ce tag déclenche un hit lorsqu’il sera appelé. Autrement dit, une nouvelle page vue. On passe donc sur l’option sur True. Google Tag Manager

Etape 4) Création d’un nouveau Trigger

Notre tag est créé, il faut désormais déterminer sur quel évènement on va le déclencher. C’est l’étape Fire-On. Concrètement il s’agit de créer un nouveau trigger. Soit en passant par le bouton “More” dans l’étape 4 de la fenêtre ouverte, soit en passant par le menu principal en allant sur “Triggers”. Google Tag Manager On clique ensuite sur “New”. Google Tag Manager

Etape 5) Choix du type d’Event

On choisit le type d’Event qui va déclencher le Trigger. En l’occurrence, un clic. On clique ensuite sur “Continue”. Google Tag Manager

Etape 6) Sélection des éléments à écouter

On écoute soit uniquement les liens (donc les balises <a>) soit tous les types d’élément. On part du principe que notre petite croix n’est pas un lien, mais un élément de type <div> ou <span>. On sélectionne donc “All Elements”. Google Tag Manager On clique ensuite sur “Continue” et on en arrive à la partie la plus intéressante…

Etape 7) Construction du matching par sélecteur CSS

Mon étape préférée 🙂 C’est ici que la démarche prend tout son sens. On va ici déterminer la condition qui déclenche le trigger lorsque l’internaute effectue un clic. On va donc devoir dire en langage GTM “Je veux déclencher le trigger quand le clic est réalisé sur la petite croix”. “Le clic” est identifié par la variable “Click Element” qu’on a activée au tout début de ce tutoriel. C’est cette variable qui capture l’élément cliqué dans le DOM, à chaque fois que l’internaute effectue un clic. On la sélectionne donc comme variable à analyser. Une fois de plus on peut saluer les équipes de Google pour cette feature. Google Tag Manager Comme type de condition, on choisit notre fameuse fonctionnalité matches CSS selector. Google Tag Manager Et enfin, il ne reste plus qu’à écrire le sélecteur CSS qui ciblera notre élément. Dans mon exemple, il s’agit de cibler l’élément <div> qui a pour classe “popup-newsletter-action-close”. Ce qui donne : div.popup-newsletter-action-close Un autre exemple aurait pu être de cibler l’élément de type <div> qui a pour ID “close-popup-newsletter”. Ce qui aurait simplement donné : div#popup-newsletter-action-close Si le CSS est un langage que vous ne maîtrisez pas, il faudra alors vous rapprocher d’un intégrateur ou d’un développeur qui pourra vous communiquer la bonne sélection CSS pour cibler votre petite croix à vous. Attention : soyez sûr que celle-ci matche uniquement avec votre croix et pas avec un autre élément de votre page, au risque sinon de fausser vos stats. Google Tag Manager Et voilà, c’est terminé ! Il n’y a plus qu’à publier la création du tag et du trigger, désormais toutes les fermetures de Pop Up seront remontées dans Google Analytics, dans les évènements : Google Tag Manager

Tracking de l’affichage du Pop Up

Ici, d’un point de vue technique, soyons clair : le plus simple est de pusher l’évènement en même temps qu’on affiche le Pop Up. Autrement dit, le plus simple est de créer l’évènement en dur sur le site et de l’écouter avec Google Tag Manager. Mais il est très intéressant de savoir créer cet évènement sans passer par le site. Car ça vous assure une totale liberté de manoeuvre, le jour où vous devez tracker un site sur lequel vous ne pouvez ou ne voulez pas avoir la main. Tout d’abord, on commence par répéter les trois premières étapes précédentes, à savoir :

  1. Dupliquer votre Tag Universal Analytics
  2. Renommer votre Tag fraîchement dupliqué
  3. Configurer votre Tag

Etape 3 suite : Tag firing options

Si vous venez d’exécuter les trois premières étapes, alors vous êtes en plein dans la configuration de votre tag. Vous venez de passer sur “True” l’option “Non-Interaction Hit”. Pour le tracking des clics, nous en sommes restés là pour la configuration. Pour le tracking de l’affichage, il va falloir configurer une autre option. Celle qui permet de limiter le déclenchement du tag à une seule fois par page affichée. Notons que cette option reste valable pour tracker les clics, dans le sens où logiquement, l’internaute va soit fermer la fenêtre, soit s’inscrire. Il n’y a donc aucune raison qu’on autorise à déclencher ces évènements plus d’une fois par page. La différence est que techniquement, cela ne peut pas arriver, puisque le Pop Up se ferme une fois qu’on clique sur la croix ou qu’on s’inscrit. Tandis que l’écoute de l’affichage va être infinie. Aussi, dès que le tag d’affichage s’est déclenché, signifiant que le Pop Up est affiché, alors on lui interdit de remonter à nouveau le hit, même si le Pop Up est bel et bien encore là. On passe donc “Tag firing options” à “Once per page ». Google Tag Manager

Etape 4) Création d’un nouveau trigger

Ici, on réitère l’étape 4 pour créer un nouveau Trigger.

Etape 5) Merci Google pour la fonction Timer

Ici, on en arrive à l’étape du choix du type d’Event. On choisit « Timer ». Google Tag Manager

Etape 6) Configuration du Trigger

Event Name : je conseille de laisser celui proposé par défaut, qui respecte la nomenclature des Built-In Events tels que gtm.dom, gtm.window ou bien encore gtm.js. Interval : Ici, on doit déterminer l’intervalle d’exécution du timer, en milliseconde. 500ms permet de ne quasiment pas exploiter les ressources navigateur, tout en étant sûr de ne pas rater d’affichage. Limit : Limit est le nombre de fois où le timer doit s’exécuter. Si on laisse ce champ libre, alors le timer s’exécutera à l’infini. Quand je dis à l’infini, il faut comprendre tant que la page reste ouverte. Pas non plus à l’infini jusqu’à la fin des temps. Google Tag Manager Ensuite on clique sur Continue.

Etape 7) Enable When : lancement du chrono

Ici, on doit déterminer à quel moment on déclenche le Timer. Dès que l’internaute arrive sur une nouvelle page du site semble le moment parfait. On va donc le déclencher dès qu’on a la possibilité de déterminer l’URL de la page. Pour cela, on va utiliser la variable Page URL puis la fonction matches RegEx et enfin la valeur .* qui signifie n’importe quelle valeur en expression régulière. Note n°1 : Si la fonction Timer n’intervenait pas, on aurait certainement des problèmes en utilisant la variable Page URL. Car pouvoir déterminer l’URL de la page ne signifie pas que l’ensemble des scripts GTM soient chargés et prêts à remonter des hits. Il faudrait donc rajouter une seconde condition de sécurité dont je parlerai dans un prochain article 🙂 Note n°2 : on part ici du principe qu’on veut écouter l’ensemble des pages du site. Si en revanche vous souhaitez lancer le Timer uniquement sur un certain type de page, il faudra alors affiner l’expression régulière. Google Tag Manager On clique ensuite sur continue et on passe à la dernière étape.

Etape 8) Fire On

Jusqu’à maintenant, on a créé notre tag, on lui a attribué un Trigger qui tourne sur un Timer toutes les 500ms dès qu’on connaît l’URL de la page affichée. Il nous faut maintenant savoir sur quelle condition déclencher le tag. Cette dernière, dans l’idée, est très simple : lorsque notre variable qui s’occupe de détecter l’affichage du Pop up vaut 1, alors on déclenche le tag : Google Tag Manager Vous pouvez mettre d’emblée le “equals” en type de condition et le « 1 » en valeur. On passe ensuite à l’étape clef qui est la création de la variable : Google Tag Manager On choisit comme type de variable un Custom JavaScript. Ceci va nous permettre de créer une fonction qui retourne 1 si c’est le Pop Up est en display:block et 0 s’il ne l’est pas. Il s’agit donc plus d’une fonction que d’une variable à proprement parler. Google Tag Manager On commence ensuite par donner un nom cohérent à sa variable pour ne pas se perdre : Google Tag Manager Puis on écrit le petit bout de code permettant la détection. Google Tag Manager Ici il faut lire : si la propriété CSS display du div ayant pour ID popup-newsletter a pour valeur block, alors je retourne 1. Sinon je retourne 0. Qu’il s’agisse d’une apparition de Pop Up dès le chargement de la page ou bien d’une apparition au bout de X secondes, cette solution fonctionnera puisque le Timer continue de tourner à l’infini après le chargement de la page et la vérification aura lieu toutes les 500 ms. Voici le code JavaScript en dur pour ceux qui souhaitent le copier / coller :

function() {  	if ( document.getElementById('popup-newsletter').style.display == "block") {  		return 1;  	}  	else return 0;  }


On clique ensuite sur “Create Variable” et on sélectionne notre variable fraîchement créée dans la liste déroulante. Google Tag Manager On vérifie qu’on ait bien « equals 1 » et on enregistre notre Trigger. Google Tag Manager Notre Trigger est désormais créé et attribué à notre tag. On a plus qu’à sauvegarder le tag, et le tour est joué ! Google Tag Manager

Rage Quit : partir sans dire au revoir

Impossible à tracker de manière fiable, une dernière info reste néanmoins intéressante : le nombre de Rage Quit, autrement dit le nombre de personnes ayant fermé la fenêtre de leur navigateur sans prendre le temps de fermer d’abord le Pop-Up. Ces internautes comptabiliseront un affichage, mais ni de fermeture de Pop Up ni d’inscription. Il faut en revanche tenir compte de leur action, car elle n’est pas anodine. Pour connaître ce nombre, il suffit de prendre le nombre total d’affichages et de soustraire les fermetures et inscriptions.

Pour conclure

Vous avez désormais toutes les clefs en main pour tracker intégralement votre Pop Up via Google Tag Manager, sans toucher au site. L’ensemble de la démarche peut paraître fastidieuse à première vue. En réalité, une fois que l’on a saisi le principe dans son ensemble, ça peut être mis en oeuvre très rapidement. N’hésitez pas à vous faire aider par un ami ou collègue développeur pour les petites parties techniques CSS / JS. Si vous avez des questions ou remarques, les commentaires sont là pour ça.