Comprendre le fonctionnement de base de GTM est fondamental. Avant de partir dans une liste exhaustive (et chiante comme la pluie) des fonctionnalités, il est indispensable d’assimiler l’essence même de l’outil, à savoir l’injection de HTML et de Javascript.
Cet article fait partie d’un tutoriel en 7 parties consacré à la domination du monde l’apprentissage de Google Tag Manager. Si vous vous sentez perdu (ou alors que vous trouvez ça beaucoup trop facile et que vous avez envie d’aller à la suite), voici le sommaire :
- Les bases de GTM
- Votre premier tag
- Les variables
- Le data layer
- Les déclencheurs
- La publication
- Le bilan
Insérer le snippet GTM
Une fois notre container créé comme nous l’avons vu dans le premier article, il va falloir insérer le snippet (vous savez, ce petit bout de code à coller sur toutes les pages de votre site). Direction la section « Admin » de l’interface de GTM, où on va cliquer sur « Installer Google Tag Manager » (si vous vous sentez un peu perdus dans l’interface, pas d’inquiétude, nous ferons le tour du propriétaire un peu plus tard) :
Si vous suivez bien, vous vous souvenez que nous avons déjà aperçu ces deux bouts de code, que GTM nous donne dés que l’on créé un compte :
Comme on le voit, rien de bien sorcier ici : deux bout de code à coller, respectivement, au début de la balise <head> et de la balise <body>, à l’identique, sur chacune des pages de votre site.
Apparté technique : comme vous pouvez le voir, le premier snippet est une balise <script>, le second une balise <noscript>. Si le premier est crucial, le deuxième n’est pas franchement indispensable. En théorie, il permet de déclencher des tags même pour les navigateurs ne lisant pas le JS, mais honnêtement, regardons nous dans le blanc des yeux : est ce que ces gens vous intéressent vraiment? Bon. Alors. Hein.
Si vous testez GTM sur une page bidon d’un domaine perso, bien évidemment, l’approche « gitan de Béziers », qui consiste à copier-coller sauvagement ces deux bouts de code dans un éditeur de texte comme Sublime Text, et envoyer sereinement ceci sur un FTP comme FileZilla, fonctionne parfaitement.
Dans le cas où vous installez GTM sur un plus gros site (du blog contenant quelques dizaines de pages jusqu’au site e-commerce présent dans 60 pays), le fonctionnement sera plus ou moins le même : il suffit d’insérer ces éléments dans le template de la page, via un include en PHP, ou équivalent.
Dans le cas d’un CMS type WordPress, il existe en général la possibilité d’éditer le header générique de toutes vos pages (via le menu « Apparence / Éditeur », en éditant le modèle « header.php ») :
Si vous n’avez pas envie de mettre les mains dans le cambouis, des tonnes de plugins existent et font très bien le travail : il suffit en général d’indiquer l’ID de son container GTM (le fameux GTM-XXXXX), et c’est fini.
Apparté technique (encore) : si on prend la partie <script> et qu’on l’indente proprement avec un outil comme JSBeautifier, voilà ce que l’on obtient :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(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-MH5L3L'); |
Pas besoin de connaître ce que nous raconte le snippet dans les moindres détails, mais voici les points à retenir :
- GTM créé une variable JS qui s’appelle « dataLayer », dans le cas où elle n’existe pas encore. Nous verrons plus tard que cette variable est fondamentale.
- Une librairie « gtm.js » est appelée depuis les serveurs de Google.
- L’ID de votre container (ici, GTM-MH5L3L) est invoqué.
Publier le container à vide
Une fois GTM en place sur le site, et avant de vérifier que vous avez bien fait le travail, il va falloir suivre une première étape simple, mais qui peut paraître contre intuitive : publier le container à vide. On rentrera plus tard dans le pourquoi et le comment des publications, mais cette étape est indispensable si vous ne voulez pas vous prendre une belle erreur 404 dans les dents au moment de vérifier que tout fonctionne correctement.
Concrètement, cela prend environ 4 secondes et demi : revenez sur l’onglet « Espace de travail » de GTM, et cliquez sur le bouton rouge « Envoyer » en haut à droite de l’interface. Vous pouvez ignorer l’invitation, et continuer jusqu’au message de validation qui ne devrait pas trop se faire attendre. Vous pouvez suivre, ou pas, l’invitation à chanter comme si personne ne vous écoutait, et c’est tout bon :
Vérifier la bonne installation de GTM
On peut maintenant se rendre sur une des pages où le snippet a été posé, comme cette page de démo que je vous ai préparée avec amour, où nous allons vérifier que GTM a été correctement installé.
Premier réflexe, logique : aller chercher dans le code source de la page, et vérifier que nos deux snippets <script> et <noscript> sont bien présents :
A priori, tout se passe bien, mais ce n’est pas réellement suffisant. Pour être sûr de son coup, le plus simple est d’utiliser le plugin officiel de Google, Tag Assistant. Une fois installé, il suffit de cliquer dessus, d’autoriser le scan de la page en cliquant sur « Allow », puis de la rafraîchir. Si tout se passe bien, le message ci-dessous devrait s’afficher :
Comme vous pouvez le voir, le plugin effectue également la vérification d’autres tags Google (Analytics, Adwords, etc…).
A noter que, parfois, le plugin peut se montrer un peu capricieux, si par exemple le code n’est pas placé assez haut dans le <head>. Globalement, cela n’est en général pas un problème tant que le petit picto à côté de « Google Tag Manager » est jaune ou bleu.
La visite guidée de l’interface
Maintenant que nous avons géré la partie « administrative » de GTM, et que celui-ci tourne correctement sur notre site, il est temps de passer au cœur de l’outil, pour rentrer dans la vraie vie où l’on pose des tags. Et comme promis, nous allons commencer par un petit tour de l’interface.
L’écran sur lequel on passe le plus gros de son temps (et où nous avons déjà fait quelques manipulations) est l’ « Espace de travail » :
vec l’interface de Google Analytics (la toute nouvelle, avec du Material Design trop kikoo), vous ne devriez pas être trop perdus : le menu horizontal, en haut d’écran, permet de naviguer entre les « grandes » parties de GTM, tandis que le menu vertical, à gauche de l’interface, permet quant à lui de naviguer entre les différentes fonctionnalités de l’espace de travail :
- Présentation permet de visualiser rapidement les dernières modifications effectuées dans l’interface. Pour l’instant, forcément, il n’y a pas grand chose à en tirer, mais cela devient très pratique dés lors que plusieurs personnes travaillent sur un même container et/ou qu’on souhaite savoir quelles modifications ont effectuées, à quel moment, et flageller le stagiaire approprié.
- Les concepts de Balises, Déclencheurs et Variables sont, en gros, les trois « briques » de GTM. Nous allons très largement les balayer dans un futur très proche, donc ne m’en voulez pas de garder un peu de suspense.
- Les dossiers permettent de ranger, justement, ces 3 types de « briques » selon votre technique de tri préféré. Là encore, cela peut paraître un peu abstrait, mais pour l’heure, ils sont de toute façon bien vides.
Pour l’instant, il n’est pas nécessaire d’aller plus loin dans le détail, puisque nous n’avons de toute façon encore rien créé, et que ces différents éléments sont tous vides.
On peut continuer à parcourir rapidement les différentes rubriques accessibles via le menu horizontal :
- L’espace de travail est l’écran dans lequel vous êtes présents actuellement, et dans lequel nous passerons la plus grande partie de ce tuto.
- Versions est l’écran récapitulatif des changements effectués au sein d’un container. Il est possible, comme on le verra plus tard, de savoir très précisément quels changements ont été effectués dans le temps, et, si besoin, de revenir en arrière.
- Admin, sans surprise, permet essentiellement de gérer les utilisateurs, ou encore de récupérer le code de suivi, comme on l’a déjà fait un peu plus haut.
- Enfin, si vous cliquez sur le logo de GTM, tout en haut à gauche du header, vous pourrez switcher entre les différents containers GTM auxquels vous avez accès : un peu à la façon de Google Analytics, GTM dispose d’une architecture à deux niveaux. Les « comptes » sont, en général, uniques à une entreprise, et peuvent contenir plusieurs containers. Si vous avez accès à de multiples containers (comme moi, parce que j’ai de l’influence dans le monde de la disruption digitale), cet écran ressemble à ceci :
Votre premier tag GTM
Maintenant que nous avons fait rapidement le tour du propriétaire, il est temps de passer à l’action : revenons dans notre « Espace de Travail », puis rendons-nous sans plus attendre dans la section « Balises », où nous allons cliquer sur « Nouvelle ». Nous allons pour le moment ignorer les différentes options, pour choisir « HTML personnalisé ».
Pour commencer, faisons simple, nous allons créer un script aussi bête que possible :
Comme vous pouvez le voir, j’ai simplement créé un bout de Javascript (encadré par des balises script, car GTM injecte, à la base, du HTML) qui va écrire un simple message dans la console de développement du navigateur où va s’exécuter le tag.
A noter que j’ai choisi, comme le propose GTM par défaut, de déclencher ce script sur « toutes les pages », ce qui est plutôt explicite : dés qu’un utilisateur charge une page où est posé le snippet, le script que nous venons de créer est lui aussi exécuté. Il est évidemment possible de restreindre le déclenchement de ce tag à certaines pages, mais ne nous compliquons pas la vie pour le moment.
Une nouvelle fois, nous allons publier le container, comme nous l’avions fait plus tôt, en cliquant sur le bouton rouge « Envoyer ». On peut ignorer l’invite à donner des informations.
Ensuite, il n’y a plus qu’à revenir sur la page et la rafraîchir.
Une fois ceci fait, on va simplement ouvrir la console de Chrome (ou d’Internet Explorer, si votre entreprise préfère utiliser des navigateurs vraiment sécurisés), et vérifier que nous avons bien fait le travail.
A priori, tout se passe bien. Nous avons, très simplement, inséré une balise <script> en bas du code source de la page, ce qu’on peut vérifier grâce à une simple inspection dans le code source :
De même, n’oublions pas de vérifier que l’on a bien loggué l’event dans la console :
Voilà, fondamentalement, c’est ce que GTM sait faire. Insérer des bouts de Javascript dans vos pages, et ce, sans avoir à éditer directement votre code source. Mais bien évidemment, le meilleur reste à venir…
Faire des vraies choses avec un tag
Bon, insérer un console log, en soi ça ne nous avance pas à grand chose. Ce qui nous intéresse, c’est de gérer nos tags, en particulier, de webanalytics.
Si vous avez déjà entendu parler de ce sympathique outil qu’est Google Analytics (fait par une société californienne pas très connue, mais qui commence à avoir sa petite fanbase), vous devriez être familiers de ceci :
A un moment dans votre vie professionnelle, vous avez dû demander à vos développeurs d’insérer ceci sur chaque page de votre site, de le faire vous-même, ou d’utiliser un plugin quelconque dans un CMS (ce qui revient, en fin de compte, au même).
L’intérêt de GTM (je pense et j’espère que vous voyez un peu le truc venir), c’est de pouvoir insérer ceci sans avoir à toucher au code source, pour peu que le snippet GTM soit inséré une bonne fois pour toutes.
Nous allons donc revenir dans l’interface, et remplacer notre JS tout moisi par notre bon vieux code de suivi GA :
Une publication du container plus tard (toujours le bouton bleu « Envoyer »), et de retour sur notre page, nous allons vérifier le bon fonctionnement de notre tag.
Apparté technique (ah mais celui-là lisez le vraiment par contre, il est super important) : je vous invite vivement, pour vérifier que GA fonctionne correctement, à utiliser le plugin Chrome WASP Inspector, qui est un merveilleux outil de debug d’outils de webanalytics (et même de tags d’Adserving), réalisé par la formidable équipe de l’agence canadienne CardinalPath. Une fois que l’on charge la page en ouvrant WASP, on voit bien la requête « collect » (la case orange) partir du domaine google-analytics.com, avec, sur la droite de la fenêtre, toutes les infos liées à ce tag :
Evidemment, il est aussi possible de vérifier le déclenchement du tag de pag GA « à l’ancienne » en utilisant l’onglet « Network » de votre navigateur :
J’ai très envie de vous entendre hurler « ohhyeah mission accomplie dude » : après tout, nous avons réalisé l’impossible (au moins) : sans aucune intervention d’un développeur (bien sûr, après avoir inséré le snippet GTM), nous avons gentiment placé notre tracking Google Analytics sur une page.
Et les autres tags, alors?
J’ai choisi d’insérer un tag de type « HTML personnalisé », mais j’entends déjà les rageux rager : « hé mais cé un truc de geek le HTML lol ».
Si on choisit de créer un nouveau tag et que l’on revient la liste aperçue subrepticement tout à l’heure, on remarque en effet que de nombreuses options étaient présentes, en plus du « HTML personnalisé » pour lequel nous avons opté. Google Analytics, Adwords, Criteo…certains de ces noms devraient vous être familiers (si ce n’est pas le cas et que vous avez trouvé cet article tout à fait par hasard, peut être que vous êtes simplement à la recherche d’une vidéo sympa pour passer le temps, auquel cas je vous recommande fortement celle-ci).
Nous allons, à tout hasard, créer un nouveau tag, puis cliquer sur « Google Analytics ». Si tout se passe bien, vous devriez être familiers des options qui apparaissent : UA, type de tag…
Je pense que vous me voyez venir avec mes sabots taille 48, et vous avez sûrement compris la relation avec ce que nous avons fait il y a quelques dizaines lignes, où nous avons inséré le code de suivi GA via du HTML custom.
Eh bien c’est exactement. La même. Chose. Le tag est ce qu’on appelle dans le jargon « templatisé » (kikoo l’académie française). Concrètement, cela signifie que plutôt que d’avoir à recopier, à chaque fois, notre bout de Javascript, GTM nous simplifie la vie, et nous demande simplement d’indiquer l’ID de suivi (l’UA).
A noter que, bien sûr, il existe des options supplémentaires dans tout tag templatisé : en particulier dans le cas de ce tag GA, le type de suivi (page vue, événement), ainsi que toutes les options auxquelles on accède en cliquant sur « plus de paramètres » (Custom dimensions, cross-domain tracking, etc…). Je ne vais pas vous apprendre, ici, à faire une implémentation pointue de Google Analytics ; sachez simplement que pour tous ces tags templatisés, les options disponibles permettent de personnaliser à peu près tout le nécessaire.
Nous allons donc créer un nouveau tag en choisissant l’option « Universal Analytics ». Pour l’heure, par la peine de se casser la tête avec des options avancées : on indique seulement l’UA, le type de tag (page vue), et on le déclenche, comme tout à l’heure, sur toutes les pages :
Au passage, nous allons supprimer le premier tag (ça serait dommage d’avoir de l’échantillonnage si tôt, comme on dit chez Google). Pour cela, il suffit de cliquer dessus, puis dans « Supprimer » au niveau du petit menu en haut à droite :
Une nouvelle fois, on publie, puis on se rend sur la page de démo pour vérifier le déclenchement avec WASP. Si tout se passe bien, comme tout à l’heure, le tag se déclenche exactement de la même façon.
Petit aparté technique : en réalité il ne se déclenche pas exactement de la même façon : depuis quelques mois, lorsqu’un tag GA est envoyé via GTM, une redirection 307 est faite du domaine en HTTP vers le HTTPS. C’est pour ça que la case « collect » apparaît d’abord en gris, puis en orange :
Je ne vais pas égrenner toute la liste des tags templatisés (Criteo, RocketFuel, etc…), qui évolue de toute façon assez régulièrement. Si vous êtes amenés à les utiliser, c’est que vous en maîtrisez en principe les spécificités (ou à défaut l’agence d’inbound marketing / disruptive business / digital breakthrough / performance media…). A chaque fois, vous n’aurez donc qu’à remplir les différents champs disponibles selon votre besoin.
Votre tag n’est pas dans la liste? Pas de problème, le tag « HTML Personnalisé » est là pour combler ce manque.
Conclusion
Si j’ai bien fait mon travail, vous avez compris l’essence même de Google Tag Manager : injecter des bouts de Javascript, sans avoir à toucher votre code source. Les tags templatisés vous permettent de le faire sans avoir à vous embêter avec du Javascript brut de décoffrage, en n’ayant à mettre en place que les informations réellement importantes (ID de votre compte, etc…).
Dans le prochain article, nous allons voir comment variabiliser nos tags, c’est à dire les déclencher avec des paramètres (par exemple, l’UA Google Analytics) qui peuvent différer selon le contexte (par exemple, l’URL).
2 commentaires
Bonjour,
A chaque fois que je modifie une balise j’ai une nouvelle version qui se créée. Est-ce normal ? Vous ne marquez rien à ce sujet sur votre article.
Merci.
Bonjour Aude, et merci pour ta question! En principe non, ce n’est pas normal : une nouvelle version n’est créée que lorsque tu publies ton container (ou bien que tu en importes un autre, que tu fais un rollback, mais ce sont des cas plus complexes).
Qu’entends-tu exactement par « une nouvelle version se créée »? Peux-tu m’envoyer un screenshot?