Outil de suivi Google Tag Manager

Cet article vous explique comment mettre en œuvre Google Tag Manager dans votre site. Pour obtenir des informations sur le suivi d'un événement spécifique, consultez l'article Suivre un événement spécifique avec Tag Manager.

Remarque

Cet article contient des instructions très précises pour que le gestionnaire de balises Google fonctionne bien avec vos sites. C'est une précaution nécessaire, car nous mettons en œuvre les changements de page AJAX, ce qui signifie que, par défaut, il n'y a pas d'événement de visualisation de page sur lequel le gestionnaire de balises peut s'appuyer après qu'un visiteur du site a changé de page.

Les instructions dans cet article diffèrent légèrement de celles données pas Google. Elles ont toutefois été testées et fonctionnent parfaitement. Nous avons modifié les instructions données par Google pour les raisons suivantes :

  1. Google requiert d'installer le code dans l'<en-tête> du site. Cette pratique est pourtant déconseillée car elle ralentit le chargement du site. C'est pourquoi nous l'insérons en <fin de corps>, au bas de la page, pour un chargement plus rapide.
  2. Il est plus facile de copier le code en un endroit unique.

Ajout de Google Tag Manager

Google donne des codes d'intégration que ressemblent aux exemples ci-dessous. Ces deux éléments doivent être installés en <fin de corps> du site.

Remarque

Le code ci-dessus est fourni à titre d'exemple. Ne le copiez pas directement sur votre site. Veuillez vous assurer d'obtenir le code adéquat auprès de Google.

Section Script

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Section NoScript

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Ajout de Google Tag Manager

Attention

Cette étape est essentielle pour permettre le suivi de Google Tag Manager dans votre site.

Nous devons ensuite remplacer le déclencheur de visualisations de pages fixé par défaut à Toutes les pages par notre événement personnalisé. Nous devons tout d'abord créer ce déclencheur d'événement personnalisé à partir de Tag Manager.

  1. Allez sur Google Tag Manager et connectez-vous.
  2. À gauche, cliquez sur Déclencheurs.
  3. Sur la droite, cliquez sur le bouton Nouveau.
  4. Saisissez un Nom pour le déclencheur dans le coin supérieur gauche. Nous vous conseillons de choisir un nom mémorable et utile, tel que Déclencheur personnalisé de visualisations de pages.
  5. Cliquez sur Configuration du déclencheur personnalisé et sélectionnez Événement personnalisé.
  6. Dans le champ du nom d'événement, saisissez dPageView.
  7. Cliquez sur enregistrer dans Tag Manager.

Une fois le déclencheur créé, nous devons l'appliquer aux tags concernés. Cette étape doit être réalisée pour chaque tag utilisé sur votre site pour déclencher les événements de visualisation de page. Dans cet exemple, nous l'appliquons à Google Analytics Universal.

  1. Dans Tag Manager, allez sur Tags
  2. Création d'un nouveau tag.
  3. Saisissez un nom mémorable.
  4. Cliquez sur Configuration du tag et sélectionnez le tag que vous souhaitez utiliser. Dans le cas présent, Google Analytics Universal.
  5. Une fois le tag configuré, cliquez sur Déclenchement. Sélectionnez le déclencheur personnalisé que nous venons de créer : Custom Page View Trigger.

  6. Remarque

    Si le déclencheur fixé à Toutes les pages a déjà été appliqué, veuillez le supprimer. Seul le déclencheur personnalisé est requis.

  7. Sélectionnez une nouvelle variable.
  8. Sélectionnez Paramètres Google Analytics.
  9. Saisissez votre identifiant de suivi GA, puis nommez votre variable en haut de l'écran.
  10. Sélectionnez la variable et cliquez sur Enregistrer.

Après avoir apporté ces modifications dans Tag Manager, cliquez sur Envoyer puis Publier les modifications afin de les rendre visibles en ligne.

Remarques relatives à Google Tag Manager

  • Ce code ne sera exécuté que sur le site publié en ligne. Veuillez vous assurer de tester ce code sur la version en ligne.
  • Nous avons effectué de nombreux tests, et nous précisons que la section body-end.html du mode développeur permet d'ajouter le code « noscript » et le code par défaut.
  • Ne modifiez pas le paramètre « dataLayer » dans Google Tag Manager, car cela briserait notre code d'intégration personnalisé.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 2 sur 3

Feedback on this article

0 commentaire

Vous devez vous connecter pour laisser un commentaire.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!