Jonathan

16 mars 2020 9 minutes

Quelques années auparavant, pour concevoir un plan de taggage, il fallait intégrer des morceaux de code comme gaq.push afin de faire remonter des événements vers une solution de tracking. Mais les beaux jours sont arrivés, en effet, depuis la sortie de Google Tag Manager, configurer des balises en réponse aux événements est devenu bien plus simple.

Que sont les événements Google Tag Manager ?

Les événements dans Google Tag Manager permettent de récupérer bien plus de données que simplement une page vue avec Google Analytics. Vous pourrez par exemple, associer des commandes avec un montant précis à une conversion provenant de Google Ads ou encore connaître le nombre de pages consultées afin d’activer une balise du Pixel Facebook, et bien d’autres usages est possible.

Dans un contexte marketing, si votre site possède du contenu premium comme des livres blancs, guides et tous autres documents qui permettent d’obtenir des informations sur vos visiteurs, vous allez naturellement chercher à mesurer la performance de vos actions.

Ainsi, vous devrez utiliser des événements pour arriver à vos fins en matière de tracking, et obtenir les réponses à vos différentes questions. Rentrons désormais dans le vif du sujet, afin que l’on comprenne un peu plus tout cela.

L’avantage d’utiliser des événements pour votre tracking

Lorsque vous créez des événements dans Google Tag Manager, vous allez pouvoir les organiser dans 4 grandes catégories afin de mieux analyser vos données ensuite dans votre outil d’analyse (comme Google Analytics).

Qui sont :

  • La catégorie de l’événement
  • L’action de l’événement
  • La valeur de l’événement
  • Le libellé de l’événement

Voici un exemple concret dans notre Google Tag Manager, chez Angulaire :

organisation-events-tracking

Les événements natifs

Dès lors que vous aurez installé votre Tag Manager, vous aurez besoin de comprendre trois types de déclencheurs qui permettent le suivi des événements. Chacun d’entre eux a des caractéristiques légèrement différentes, voici un peu plus de contexte :

  • La page vue : les balises se déclenchent lorsque le navigateur commence à charger la page web.
  • Le DOM prêt : les balises se déclenchent lorsque le navigateur a terminé de charger la page en HTML au complet et que GTM peut récupérer les données disponibles.
  • La fenêtre chargée : les balises se déclenchent lorsque toutes les ressources présentent sur la page sont entièrement chargées (HTML, images, scripts, etc.).

Un événement provoque un changement d’état du datalayer

Pour bien comprendre la différence entre ces 3 déclencheurs, il faut aussi savoir ce qui se passe lorsqu’une page se charge dans un navigateur. Une page contient du code qui comporte des dizaines voire des centaines d’éléments de haut en bas, et voici ce qu’il se passe lorsque vous naviguez sur internet :

chargement-page-gtm

GTM.js

Lorsque le navigateur reçoit le code du conteneur Google Tag Manager, qui doit toujours être placé dans la balise <head> de votre site, un ensemble de données est initialisé et un premier événement est déclenché.

C’est sur la base de ce premier événement qui se nomme “All pages” que vous allez déclencher toutes les balises qui nécessitent d’être activées sur l’ensemble des pages où se trouve le conteneur, soit toutes vos pages.

Pour vous donner un peu plus de contexte, vous utilisez ce déclencheur sur tous les scripts comme : Pixel de Facebook, Google Analytics, Tag Insight de LinkedIn, Pixel de Hotjar, Pixel d’Albacross, et ainsi de suite.

GTM.dom

Le navigateur continue de parcourir le fichier de la page (code inclus) et lorsque l’analyse est terminée, il modélise la page qu’il va afficher. C’est là que le DOM est prêt.

Cependant la page n’est pas totalement affichée, le navigateur peut être en train de charger d’autres scripts, images ou fichiers présents dans le code. Mais au moment où le DOM est chargé, un nouvel événement est déclenché, le gtm.dom.

Le datalayer passe donc dans un second état et vous avez un deuxième point d’accroche possible pour déclencher de nouvelles balises. Celui-ci est d’ailleurs utile pour plusieurs raisons :

  • Déclencher des balises ayant certaines conditions en lien avec le DOM.
  • Déclencher des balises qui nécessitent qu’une autre balise ait été exécutée avant elle, cela vous permet de faire un séquençage des balises par vous-même.
  • Étaler le chargement des scripts afin d’optimiser le temps de chargement, puisque oui, votre Tag Manager va influer sur le chargement de vos pages en raison des balises qui le composent.

En règle général, le gtm.dom intervient en moyenne entre 1 et 4 secondes après gtm.js selon la taille et le contenu de la page.

GTM.start

À cette étape, le navigateur a complètement affiché la page et chargé toutes les ressources qui la composent. Ainsi, le troisième événement est déclenché : gtm.start.

Le conteneur GTM passe au troisième état et vous avez un troisième point d’accroche pour déclencher de nouvelles balises. L’événement intervient généralement entre 1 et 5 secondes après gtm.dom selon taille de la page, ce qui signifie qu’entre le moment où la page commence à charger et l’événement gtm.start s’active, il peut facilement se passer 10 secondes.

Il faut donc faire bien attention à ne pas déclencher de balises vitales sur cet événement (au chargement de la fenêtre = gtm.start), car vous risquez de perdre pas mal de données. En effet, un visiteur qui n’est pas convaincu par le contenu d’une page restera moins de 8 secondes.

Activer des variables natives GTM

En activant les variables natives supplémentaires, vous élargissez le champ des possibles, et cela vous donne accès à de nouveaux éléments comme les clics, les formulaires, les vidéos, etc. Afin d’activer ces événements de Google Tag Manager, vous devez vous rendre dans la section des déclencheurs.

Voici la liste de tous les événements natifs :

  • Page vue
  • Clic
  • Visibilité de l’événement
  • Envoi du formulaire
  • Modification de l’historique
  • Erreur JavaScript
  • Profondeur de défilement
  • Minuteur
  • Vidéo
  • Événements personnalisés
  • Groupe de déclencheurs

Les événements personnalisés

Il existe donc de nombreux événements natifs, mais ils ne répondent pas toujours aux besoins que l’on peut avoir. C’est justement pour cette raison que nous avons la possibilité de créer des événements sur-mesure afin d’élargir le champ des possibles.

À quoi servent les événements personnalisés ?

Compenser les limitations des déclencheurs natifs

Il faut savoir que certains formulaires ne sont pas toujours aussi faciles à suivre qu’on le pense, surtout si c’est un iFrame par exemple. Il peut également y avoir un souci de propagation de votre JavaScript empêchant les détecteurs de Google Tag Manager de capter les clics.

Ajouter du contexte à une action réalisée sur votre site

La manière dont vous créez un événement personnalisé vous permet d’ajouter du contexte à l’événement. C’est la technique la plus utilisée pour envoyer des informations e-commerce à Google Analytics.

Par exemple, il est nécessaire de créer une variable personnalisée si vous souhaitez faire remonter la valeur du panier dans une balise GTM, vous pourrez aussi faire remonter l’ID du produit commandé de cette manière.

Vous devrez aussi créer une variable personnalisée si vous souhaitez différencier vos clients B2C des clients B2B, un point plus qu’utile pour gérer efficacement les audiences de vos campagnes marketing.

Fiabiliser votre tracking

Dans le cadre des formulaires de contact, la fiabilité de mesure de certains formulaires est parfois problématique.

Par exemple et dans beaucoup de cas, si un utilisateur essaie d’envoyer un formulaire, mais qui ne l’a pas rempli complètement ou a commis une erreur, l’événement form.submit va quand même se déclencher. Et dans 15% des cas, le visiteur ne va pas renvoyer le formulaire en corrigeant son erreur, il y aura donc de fausses conversions.

Avec les événements personnalisés, on va pouvoir contrer ce problème en passant par un autre déclencheur, par exemple la visibilité message de confirmation afin de détecter l’envoi du formulaire.

L’outil de prévisualisation

L’outil de prévisualisation ou la console de debug est un outil natif de Google Tag Manager qui vous permet de voir en temps réel, tous les tags déployés ou non sur vos pages en fonction de vos actions.

Il vous permet également de voir tous les changements du datalayer afin de vérifier les balises déclenchées à chaque étape du datalayer. Mais aussi celles non déclenchées (en attente de leurs conditions de déclenchement).

Lorsque vous activez la prévisualisation, retournez sur votre site et vous obtiendrez la console en bas de page. Si vous effectuez des modifications sur vos balises et d’autres éléments dans GTM, n’oubliez pas d’actualiser la console.

Conclusion

Maintenant que nous avons passé en revue les événements et que nous avons bien compris le rôle des variables personnalisées, il est de temps de passer à encore plus de concrets en téléchargeant notre modèle de plan de taggage. Si vous avez des questions par rapport à ce document, prenez contact avec nous via le chat ou la page contact.

NEWSLETTER

Vous aussi,
recevez du contenu de qualité.

elements-website-angulaire