Debugger votre conteneur avec Tag Assistant

Vous venez d’ajouter des balises dans votre conteneur Google Tag Manager mais vous suspectez une dysfonctionnement sans pour autant pouvoir identifier le problème rapidement ? Heureusement, GTM dispose d’un outil complet pour vous aider à trouver les erreurs de configuration.

Google Tag Assistant pour vous aider

Pour débugger votre conteneur Google Tag Manager, vous pouvez utiliser un outil appelé “Google Tag Assistant”. Pour y accéder, vous devez activer le mode de prévisualisation en cliquant sur le bouton “Prévisualiser” situé à gauche du bouton “Envoyer”.

Dans un autre onglet, une fenêtre popup vous demande de renseigner l’URL de la page à prévisualiser. Une fois l’URL saisi, cliquez sur “Connecter”, puis “Continuer”.

Vous disposez maintenant de trois onglets : votre Tag Manager (que vous pouvez fermer pour le moment), votre Tag Assistant (à afficher sur un écran ou sur la moitié de votre écran), et la page à débugger (à afficher sur un autre écran ou sur l’autre moitié de votre écran).

Visualiser le bon conteneur

Dans votre onglet “Tag Assistant”, vous retrouverez la liste des balises Google détectées. Dans certains cas, les sites web sur lesquels j'interviens peuvent disposer de plusieurs conteneurs, de script gtag() directement placé dans le code de la page pour Google Analytics ou Google Ads.

Le Tag Assistant détecte toutes ces configurations, ce qui peut prêter à confusion. Assurez-vous de sélectionner le conteneur GTM correct (GTM-XXXXXXX).

Comprendre la timeline des événements

L’interface de Tag Assistant se découpe en deux zones, la première, située à gauche de votre écran, est une timeline des événements détectés par votre Tag Manager. Par “événements”, on entend ici des événements de navigateur comme des clics, des scrolls ou des chargements de page, mais aussi des événements de dataLayer qui permettent de compléter les actions qui ne seraient pas automatiquement transmises par le navigateur.

Par défaut, l’onglet vous affiche un résumé (une somme) de tout ce qui s’est produit sur la page. En cliquant sur un événement dans la liste, vous allez pouvoir regarder plus en détail ce qui s’est produit à ce moment précis, si des balises se sont déclenchées ou encore quelles étaient les valeurs des différentes variables au moment de l’action.

Prévisualisation des balises

Dans la seconde partie de votre écran, vous allez pouvoir voir tous les états liés aux événements de la timeline. Le premier onglet vous affiche toutes les balises déclenchées grâce à l’événement sélectionné, vous avez la possibilité” d’afficher les balises non déclenchées.s

// TODO : A rédiger

Prévisualiser les variables

L’onglet d’après vous permet de visualiser toutes les variables présentes dans votre conteneur et leur valeur au moment de l’événement. Vous pourrez, par exemple, facilement remarquer que les variables de clics sont vides au moment des chargements de page, mais contiennent des valeurs sur les événements liés à la navigation ou au clic sur un élément dans la page. N’hésitez pas à interagir avec votre page pour voir les variables changer et tester votre configuration.

Cet onglet est très pratique pour comprendre ce que le Tag Manager “voit”, je l’utilise pour voir des données textuelles et pour comprendre pourquoi une variable que je pensais renseignée retourne régulièrement des valeurs vides

Prévisualiser le dataLayer

L’onglet suivant vous permet de visualiser les données présentes dans le dataLayer. Pour des utilisateurs plus avancés, il est possible de visualiser le dataLayer de beaucoup d’autres manières qui sont souvent plus flexibles et simples à mettre en œuvre, c’est pour cette raison que j’utilise rarement cette section.

Prévisualiser le consentement

Un onglet a été rajouté plus récemment et permet de visualiser simplement l’état du consentement de l’utilisateur. Avec l’arrivée du Consent Mode v2 à l’été 2024 Google fournit plusieurs outils et options pour faciliter cette mise en place.

Je me sers systématiquement de cet onglet pour valider la bonne prise en charge de mon bandeau cookies avec les standards de Google Tag Manager.

Par défaut, en Europe, tous les consentements doivent être affichés sur “Denied” (en rouge), et ils ne doivent passer sur “Granted” (en vert) qu’une fois que l’utilisateur à confirmé son choix via un bandeau cookies.

On peut rapidement détecter ici une incompatibilité entre le Tag Manager et certaines solutions de consentement.

Prévisualiser les erreurs

Le dernier onglet de cette section ne me sert que très rarement (pour ne pas dire jamais). Il permet de voir les erreurs de code. En utilisant des balises standardisées dans un environnement que vous maîtrisez, il y a rarement des erreurs qui viennent se glisser dans cette rubrique.

Vérifier l’intégrité du conteneur

Une fonctionnalité plus récente (fin d’année 2024) est arrivée dans Google Tag Manager et permet de détecter des anomalies de configuration dans le conteneur.

Vous pouvez maintenant facilement détecter des pages pour lesquelles aucune balise ne se déclenche (avec la fonction “Tag Coverage”), mais à l’heure actuelle, les données remontées ne sont pas super fiables et beaucoup de pages remontent en erreur, bien que des balises se déclenchent dessus.

Tag Assistant : Extension Google Chrome

Il y’a quelques années que Google propose des extensions de navigateur appelées également “Tag Assistant” permettant de vérifier la présence de conteneurs et balises Google sur les pages de vos sites web. Ces extensions n’étaient plus vraiment maintenant et peu utilisées. Google a annoncé fusionner ces anciennes extensions pour en sortir une mise à jour unique et fiable pour l’année 2025.