Nous allons voir comment installer Google Tag Manager sur votre site web. Tout d'abord, assurez-vous d’avoir un compte Google. Si vous avez déjà configuré Google Analytics ou Google Search Console, utilisez le même compte Google, ça simplifiera les choses.
Création du compte GTM
En vous rendant sur https://tagmanager.google.com et en vous connectant avec votre compte Google, vous allez devoir renseigner un nom de compte (mettez simplement le nom de votre société) et sélectionner le pays dans lequel votre société exerce (pour des raisons légales et contractuelles avec Google).
Création de votre premier conteneur GTM
La section suivante vous permet de créer un conteneur (nous verrons en détail ce que c’est dans l’épisode suivant). En guise de nom de conteneur, il est généralement recommandé de mettre le nom de domaine de votre site web mon-site.fr, vous pourrez toujours modifier le nom après si besoin.
Vous avez ensuite le choix entre plusieurs types de conteneurs, nous choisirons le conteneur de type "Web" qui correspond à nos besoins. (là encore, je vous explique tout dans l’épisode suivant).
Une fois ces informations saisies et le formulaire validé, vous arriverez sur le tableau de bord de Google Tag Manager et une popup vous affichera deux codes à intégrer sur votre site web. Mais, en réalité, vous n’en aurez probablement pas besoin, vous pouvez donc cliquer dans le vide pour fermer ce popup.
Trouver l’identifiant du conteneur
En fonction des technologies utilisées par votre site web, vous disposerez de plusieurs méthodes pour installer Google Tag Manager. La plupart du temps, des connecteurs existent pour simplifier son installation.
La seule chose que ces connecteurs vous demandent, c’est un identifiant de conteneur. Vous le trouverez en fermant le popup, puis en cherchant au niveau de la barre blanche, en haut à gauche. Votre identifiant doit avoir un format du type GTM-XXXXXXXX.
Localisez-le et copiez-le si besoin.
Option 1 : Installation de GTM sur WordPress avec Google Site Kit
Si votre site web est réalisé avec le CMS WordPress (comme la majorité des sites aujourd’hui), sachez que Google a publié, sur la marketplace officielle, un plugin appelé "Google Site Kit".
Je vous invite à installer ce plugin et à connecter votre compte Google pour configurer GTM sur votre site WordPress. La configuration de GTM se fait en quelques clics, mais attention, plusieurs configurations sont à réaliser par la suite.
Désactiver l’insertion du code de Google Analytics 4 (recommandé)
Le plugin permet de connecter tous les outils Google via une même interface. En connectant Google Analytics 4, vous disposerez d’un tableau de bord intégré et de certaines fonctionnalités intéressantes. Cependant, si vous le faites, assurez-vous de bien désactiver l’insertion du code de suivi de GA4 (désactiver l’insertion du code permet d’éviter les doublons, le code de GA4 sera également présent dans votre conteneur GTM une fois configuré).
Vérifier que le snippet GTM est bien inséré :
Activer le Consent Mode v2 (recommandé)
Le plugin de Google simplifie la mise en place du Consent Mode v2, je vous recommande d’activer cette fonctionnalité même si ça ne vous dit rien pour le moment (un épisode complet est dédié au Consent Mode v2 dans cette formation).
Installer WP Consent API (optionnel)
Plus récemment, le plugin WordPress "WP Consent API" est sorti proposant un standard de communication entre Google Analytics et les plugins de gestion de consentement des utilisateurs (les bandeaux cookies).
Google Site Kit vous recommande d’installer ce plugin afin de simplifier les échanges de données avec votre plugin de gestion de consentement.
Option 2 : Installation de GTM sur un site web avec le code snippet
Dans le cas de figure où aucun connecteur n’est disponible pour votre CMS ou que votre site web est réalisé sans CMS, vous pouvez toujours opter pour intégrer le code manuellement.
Localiser le code de suivi dans l’interface
Si vous avez fermé le popup initialement affiché, vous pourrez retrouver les codes de suivi à intégrer dans l’administration de votre conteneur. Cliquez sur "Admin", puis dans la partie droite de la page, cliquez sur "Installer Google Tag Manager".
Inclure le code sur chaque page
Le code doit être présent sur l’ensemble des pages de votre site web pour que GTM fonctionne correctement. Pour simplifier l’intégration et la maintenance de GTM, créez un fichier analytics.php et collez l’extrait de code dedans. Ce fichier vous permettra d’isoler la logique de GTM et de simplifier les changements à venir.
Votre extrait de code doit ressembler à ça :
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
Vous n’aurez plus qu’à inclure ce fichier le plus haut possible dans vos pages entre les balises <head>et </head>. (Généralement, je le place juste après la balise <meta charset="utf-8"> ).
Un deuxième code en guise de fallback ?
Vous l’aurez remarqué, GTM dispose de deux extraits de code. Ce second code est ce que l’on appelle un "fallback", c’est un code de secours qui se déclenche uniquement lorsque le code principal ne peut pas fonctionner correctement.
Ce genre de situation arrive lorsque l’appareil de l’utilisateur ne peut pas exécuter de code JavaScript ou que l’utilisateur a intentionnellement bloqué l’exécution du JavaScript sur son navigateur.
Votre extrait de code fallback doit ressembler à ça :
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Ce code entouré de balises <noscript> se déclenchera et exécutera la balise HTML <iframe> permettant de réaliser une collecte de données minimum. Vous devrez le placer le plus haut possible juste après l’ouverture de la balise <body>, sur chaque page également.
Assurez-vous de ne pas bloquer GTM pendant la configuration
Vous allez très prochainement manipuler des balises publicitaires ou de collecte de données comportementales, tout ce que les bloqueurs de publicité aiment. Pour s’assurer d'éviter de rencontrer des blocages durant cette formation, je vais vous inviter à désactiver temporairement (ou à ajouter GTM et votre site web à la liste d’autorisations de votre bloqueur).
Certaines extensions sont plus strictes que d’autres, par exemple, uBlock Origin est particulièrement efficace en termes de blocage et générera des erreurs si vous le laissez actif.
Des navigateurs plus orientés sur la sécurité des données ont fait leur apparition (comme Brave) et peuvent, dans certains cas, bloquer l’exécution de GTM ou de ses balises. Je vous recommande de prendre un navigateur grand public du type Google Chrome, Microsoft Edge, Safari ou Firefox. (Pour Firefox, assurez-vous de ne pas bloquer tous les traqueurs depuis les réglages).
Information pratique : configurer GTM sans avoir accès au site
Une pratique que je réalise souvent pour mes clients, c’est de débuter la mission dès le devis signé, même si je n’ai pas encore les accès à GTM ou qu’il ne soit pas encore implémenté sur le site (ce qui peut prendre plusieurs jours, voir semaines en fonction de la réactivité de chacun).
Je crée un nouveau conteneur sur mon compte. Ensuite je récupère le code de suivi et je l’ajoute à une extension de navigateur du type "User CSS and JavaScript" que j’ai installée au préalable. Cette extension permet d’injecter du code dans des pages web, mais uniquement au niveau de votre navigateur (vous ne faites rien d'illégal, je vous rassure, ce n’est effectif que pour vous).
J’ai ensuite la possibilité de réaliser et de tester toutes les configurations GTM que je souhaite de manière complètement autonome.
Une fois les vrais accès obtenus, j’exporte et réimporte mes balises dans le vrai conteneur du client et le tour est joué. J’ai déjà eu l’occasion de finir des missions avant d’avoir obtenu les accès nécessaires, vous imaginez le temps gagné ?
0 commentaires
Soyez le premier à commenter cet épisode.