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.
Google Analytics 4 remplace Universal Analytics. Le 1er juillet 2023, toutes les propriétés Universal Analytics standard cesseront de traiter les nouvelles occurrences. Les propriétés de 360 Universal Analytics cesseront de traiter les nouvelles occurrences le 1er juillet 2024. Pour savoir comment procéder à la migration, consultez la section Passer à Google Analytics 4.
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. - Remarque
Nous vous recommandons de placer le code dans l'élément
<body-end>, car même si Google Tag Manager se charge de manière asynchrone, le problème lié au chargement asynchrone est qu'il commencera tout de même à télécharger des ressources et à exécuter du code. Cette activité est en concurrence avec d'autres ressources du téléphone/de l'ordinateur pour la bande passante, l'utilisation du processeur, etc. Si vous placez le code dans l'élément<head>, vous lui donnez toujours la priorité sur d'autres ressources que le navigateur pourrait vouloir télécharger, comme : le style et la mise en page du site, le contenu principal, les images qui se trouvent au-dessus de la ligne de flottaison, etc.Duda a toujours constaté que les sites Web qui placent le code GTM dans l'élément
<head>fonctionnent moins bien que ceux qui ne le font pas. Nous avons optimisé notre site pour donner la priorité au contenu visible, conformément aux signaux Web essentiels (Core Web Vitals) et aux indicateurs connexes FCP et LCP. - 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.
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
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.
- 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.
Si le déclencheur fixé à Toutes les pages a déjà été appliqué, veuillez le supprimer. Seul le déclencheur personnalisé est requis.
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.htmldu 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é.