Cet article vous explique comment mettre en œuvre Google Tag Manager dans votre site. Pour savoir comment créer des tags GA4 dans Google Tag Manager, consultez la documentation de Google.
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 :
- Google requiert d'installer le code dans la section
<head>
du site. Cette pratique est pourtant déconseillée car elle ralentit le chargement du site. C'est pourquoi nous l'insérons dans la section<body-end>
, au bas de la page, pour un chargement plus rapide. - 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 dans la section <body-end>
du site. Pour localiser l'élément <body-end>
du site, rendez-vous dans le panneau latéral de l'éditeur et cliquez sur Paramètres, puis sur HTML de l'en-tête.
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
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.
- Allez sur Google Tag Manager et connectez-vous.
- À gauche, cliquez sur Déclencheurs.
- Sur la droite, cliquez sur le bouton Nouveau.
- 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.
- Cliquez sur Configuration du déclencheur personnalisé et sélectionnez Événement personnalisé.
- Dans le champ du nom d'événement, saisissez dPageView.
- 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, mais Google Analytics 4 est la version la plus récente que nous vous recommandons d'utiliser. Pour savoir comment créer et appliquer des déclencheurs à des tags GA4 dans Google Tag Manager, consultez la documentation de Google.
- Dans Tag Manager, allez sur Tags
- Création d'un nouveau tag.
- Saisissez un nom mémorable.
- Cliquez sur Configuration du tag et sélectionnez le tag que vous souhaitez utiliser. Dans le cas présent, Google Analytics Universal.
- 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.
- Sélectionnez une nouvelle variable.
- Sélectionnez Paramètres Google Analytics.
- Saisissez votre identifiant de suivi GA, puis nommez votre variable en haut de l'écran.
- 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é.