Tutoriel : comment utiliser les nouveaux modes de prévisualisation et de débogage de GTM

Data Architecture 23 octobre 2020

Comme certains d’entre vous l’ont peut-être remarqué, Google a récemment mis à jour le processus de débogage des workspaces Google Tag Manager (GTM) avec le déploiement de Google Tag Assistant.

Cette méthode possède de nombreux avantages mais complexifie certains tests. Un des problèmes que nous avons rencontré est la déconnexion régulière de l’outil. Mais n’ayez crainte, comme souvent en webanalyse, il existe une solution alternative. 

Vous pouvez activer le mode Preview de GTM sans utiliser le nouveau Google Tag Assistant. Grâce à un outil de redirection comme Requestly, il est possible de modifier l’url d’appel à votre conteneur GTM pour activer la prévisualisation.

 Voici comment vous pouvez procéder:

Prérequis

Assurez-vous que l’extension Requestly soit ajoutée à votre navigateur. Dans le cas contraire, vous pouvez l’installer en cliquant sur l’URL suivante : https://www.requestly.in/

La méthode Redirect Request

Ouvrez Requestly et cliquez sur New Rule, puis sélectionnez Redirect Request

La page suivante vous demande de renseigner l’URL de requête (1) et l’URL de destination (2).

L’URL de requête est l’URL de votre container GTM. Vous pouvez la retrouver dans l’onglet Network de votre navigateur en filtrant par gtm.js et en cliquant sur Copy link address.

Elle a la forme suivante : https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX

Le paramètre GTM-XXXXXXX correspond à l’identifiant du container GTM que vous souhaitez déboguer. 

L’URL de destination va substituer l’URL d’appel de votre conteneur. Voici un exemple : https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX&gtm_debug=&gtm_auth=XXXXXXXXXXXXXXXX&gtm_preview=env-XXX

 

Il est important que le format de l’URL soit le même et qu’il contienne tous les paramètres attendus.

Dans cette URL, vous trouverez 3 paramètres :

  • id : identifiant de votre conteneur
  • gtm_auth : identifiant unique d’authentification
  • gtm_preview : la valeur d’environnement d’aperçu

Pour les renseigner, il faut accéder au workspace de GTM que vous souhaitez tester et cliquer sur Preview.

Une nouvelle fenêtre Tag Assistant apparaît. L’URL de cette page contient les 3 paramètres.

Voici le type d’URL attendu : https://tagassistant.google.com/?cb=5138356542953603&waffles#!#source=TAG_MANAGER&id=GTM-XXXX&gtm_auth=xxxxx_xxxxxxxxxxxxxxx&gtm_preview=env-XXX

Remplacez les valeurs dans l’URL que vous venez de préparer pour Requestly par celles présentes dans la fenêtre Tag Assistant. Votre Rule devrait donc ressembler à ceci : 

Vous pouvez maintenant vérifier et tester votre configuration !

Testez votre configuration

Vous pouvez désormais recharger votre page. Vérifiez également que votre script est actif dans Requestly.

Vous pouvez constater le bon comportement de votre configuration en contrôlant 3 informations :

  1. L’icône de l’extension Requestly est verte 

L’onglet des outils de développement Requestly affiche que votre script est déclenché3. Dans l’onglet Sources, votre script GTM affiche QUICK PREVIEW

Vous pouvez maintenant profiter d’une session de débogage comme au bon vieux temps.

Vous reprendrez bien une tasse de thé ?