Quentin Durantay

Quentin Durantay

Growth Hacker @ Dolead


Google Tag Manager : Les Bases

Le marketing digital se nourrit de la donnée. Quel que soit le type de site web : e-commerce, site personnel, site de PME ou d'une énorme entreprise; il est essentiel de connaître les internautes qui interagissent avec votre site.

Google Analytics peut vous apporter certaines informations importantes, mais si vous l'utilisez seul, l'outil sera vite limité. En utilisant Google Tag Manager, vous aurez bien plus de possibilités à votre disposition quant aux données qui vous faites remonter à Google Analytics (et/ou à Google AdWords !).

Les balises (tags en Anglais, je vais utiliser l'un ou l'autre terme dans l'article tant l'appellation anglaise est courante en France) sont des "bouts" de code que vous ajoutez à votre site pour récupérer toutes sortes d'actions effectuées par les internautes : tracking du scroll sur une page, téléchargement d'un fichier, remplissage d'un formulaire, génération de heatmaps, clics sur un lien spécifique, remarketing, etc.

La plupart des sites utilisent plusieurs balises. Or, ajouter ou enlever le code propre à chaque tag au jour le jour peut vite devenir une tâche consommatrice de temps, particulièrement pour vos développeurs qui ont d'autres choses à faire. Les tags managers (comme Google Tag Manager, mais aussi Segment) évitent tous ces problèmes en vous permettant d'ajouter, retirer ou configurer des tags via une interface web unifiée, et ce, sans toucher au code source de votre site web.

Google Tag Manager (que nous allons abréger en GTM pour la suite de l'article) a beau être un produit gratuit de Google, il ne sert pas exclusivement qu'à installer Google Analytics ou les tags Google AdWords. Il peut aussi être utilisé pour installer des tags d'autres services, comme Twitter, Hotjar ou AB Tasty. Si un tag n'est pas inclus dans la liste précédente, vous pouvez l'ajouter via du code que vous aurez écrit vous-même. Attention tout de même, certains types de balises ne fonctionnent pas avec GTM.

Les avantages et inconvénients de Google Tag Manager

Diminuer le recours aux développeurs

Le plus gros bénéfice de GTM (comme tout tag manager), est de permettre aux marketers non techniques d'implémenter des tags de tracking sans avoir besoin des développeurs. Les développeurs ont souvent mieux à faire que de vous aider à poser 5 lignes de code sur votre site. De plus, certains tags de conversion/tracking ne sont utiles que le temps d'une campagne marketing spécifique. Avec GTM, vous pouvez ajouter et retirer ces tags en quelques clics.

Malgré tout, GTM reste un outil technique

Bien que GTM demande (beaucoup) moins d'interventions de la part des développeurs, l'outil n'élimine pas 100% de ces interventions. Vous aurez tout de même besoin d'ajouter le conteneur de GTM à toutes les pages de votre site. Qui plus est, si vous ajoutez le conteneur de Google Tag Manager à votre site, vous aurez à retirer tous les anciens tags présents sous peine de tout traquer en double. Enfin, certaines balises ou événements très spécifiques ou avancés vous demanderont des connaissances (certes basiques) en HTML/CSS et JavaScript.

La plupart des entreprises auront un avantage à utiliser Google Tag Manager

Quel que soit la taille de votre entreprise, GTM peut vous être utile. Vous êtes une PME ? Vous n'avez sûrement pas accès à un service IT énorme, GTM vous fera donc gagner beaucoup de temps. Vous êtes une énorme entreprise ? Pareil, GTM vous fera gagner du temps pour gérer le tracking de toutes vos campagnes marketing et il rendra votre site plus rapide, en chargeant tous les tags dont vous avez besoin de manière asynchrone.

Les tags peuvent réduire la vitesse de chargement de votre site

Historiquement, les balises de tracking se chargent de manière synchrone, ce qui a pour effet de bloquer temporairement le chargement de la page web. Et plus une page met de temps à charger, plus les chances que l'internaute la quitte sont élevées. Heureusement, les tags gérés par GTM se chargent de manière asynchrone par défaut, ce qui signifie qu'ils ne bloqueront pas le chargement des autres ressources qui composent la page web.

Google Tag Manager peut aussi être utilisé pour les pages AMP et les applications mobiles

GTM ne se résume pas qu'aux sites web classiques. Il existe des conteneurs pour pages AMP et applications mobiles. C'est d'autant plus utile pour les applis mobiles que GTM vous permet de mettre à jour votre tracking sans avoir besoin de pousser une mise à jour de votre application sur l'app store. Dans ce guide, nous allons parler exclusivement de GTM pour les sites web.

Les composants des tags et de Google Tag Manager

GTM est assez simple d'utilisation, mais il existe tout de même quelques termes à connaître avant de commencer à l'utiliser.

Conteneurs

Lorsque vous commencez à utiliser GTM, la toute première chose à faire est de créer un conteneur. Un conteneur "contient" tous les tags pour un site précis.

Après avoir créé ledit conteneur, GTM va vous donner quelques lignes de code à ajouter à votre site web. Il vous faudra l'ajouter à toutes les pages de votre site. Certains CMS, comme WordPress ou Ghost, disposent de plugins ou options pour ajouter ce code sans toucher au code source de votre site. Une fois le code du conteneur ajouté, vous pouvez commencer à ajouter, éditer, mettre en pause ou supprimer des tags sur GTM.

Déclencheurs

Sur un site, chaque tag doit servir un objectif qui lui est propre. Vous voulez sûrement qu'un tag envoie de l'information quand un fichier est téléchargé par l'internaute, ou bien quand il remplit un formulaire de contact. Ces types d'actions sont appelées déclencheurs dans GTM. Chaque tag dans GTM doit être associé à au moins un déclencheur, sinon il ne se lancera jamais.

Les déclencheurs peuvent être décomposés en deux composants : les événements et les filtres. Quand vous configurez un déclencheur dans GTM, vous avez une longue liste de types de déclencheurs pré-établis que vous pouvez choisir. Ce sont en fait des événements. Une fois l'événement choisi, vous pouvez configurer un filtre.

Les filtres peuvent eux aussi se décomposer en trois : les variables, les opérateurs et les valeurs. Nous allons parler des variables dans la suite de l'article, pour l'instant, gardez en tête qu'une variable peut être un type de donnée. L'opérateur configure le déclenchement de la balise si la variable choisie est égale (ou bien supérieure, inférieure, contient un texte, une valeur, etc) à la valeur. Et oui, la dernière composante du déclencheur, la valeur, n'est autre que la valeur contre laquelle vous évaluez votre variable. Cette valeur peut être une chaîne de caractères, un prix, une valeur numérique, une URL, etc.

L'explication a sûrement l'air compliquée, c'est pourquoi nous allons voir un exemple ensemble. Admettons que vous vouliez déclencher un tag pour savoir si les internautes lisent votre blog. Pour ce faire, vous allez créer un tag avec un déclencheur prenant en compte la "profondeur" de scrolling de l'internaute. Si ce dernier scrolle à plus de 75% de la hauteur de la page, vous allez déclencher le tag. Qui plus est, ce tag ne doit se déclencher que sur les pages de blog de votre site.

Pour configurer un tel déclencheur, il faut choisir l'événement "Toutes les pages", ajouter un filtre avec comme variable la profondeur de scrolling, un opérateur supérieur ou égal, et enfin 75% comme valeur. Il faut ajouter à cela un second filtre, avec comme variable l'URL de la page, comme opérateur "contient", et enfin comme valeur, l'URL de base de votre blog (typiquement nomdusite.com/blog).

Profondeur du scrolling sur google tag manager comme déclencheur

Il peut aussi y avoir des occasions où vous souhaitez bloquer un tag. Dans ce cas, vous pouvez créer un déclencheur "de bloquage". Ces types de déclencheurs prennent l'ascendant sur les déclencheurs classiques. Par exemple, si vous configurez un tag sur toutes les pages de votre site avec un déclencheur de bloquage sur certaines pages, ce tag se déclenchera toujours sur les autres pages.

Variables et Constantes

Tandis que les tags dépendent de déclencheurs, les déclencheurs dépendent de variables. Les variables contiennent la valeur qu'un déclencheur doit évaluer pour savoir s'il doit déclencher le tag ou non. Le tag compare la valeur de la variable à la valeur définie dans le déclencheur. Si la condition est vraie, la tag se déclenche.

Les tags utilisent aussi les variables pour collecter des informations sur l'internaute via le data layer. Un exemple classique d'utilisation du data layer est le nombre d'articles ajoutés au panier par un internaute (pour un site e-commerce).

Les variables peuvent souvent être réutilisées entre plusieurs tags. Un exemple connu mais très pratique est de mettre les IDs et codes de tracking de certains outils dans des variables de type "constantes" pour les réutiliser. Concrètement, admettons que vous ayez besoin de déclencher plusieurs tags Google Analytics différents. Au lieu de répéter votre ID de suivi Google Analytics à chaque fois, vous pouvez de stocker dans une variable.

Dans GTM, il existe deux principaux types des variables : celles intégrées dans GTM et celles que vous allez définir. Les variables intégrées dans GTM sont celles les plus utilisées, c'est pour cela que Google a pris les devant et vous les met à disposition sans avoir besoin de les définir :

Variables conçues au sein de google tag manager

Quand vous sélectionnez ce type de variable, Google Tag Manager vous proposera de les customiser. Sachez qu'il en existe d'autres, disponibles via le bouton "Configurer". Vous en aurez aussi d'autres si vous utilisez GTM pour une app mobile ou une page AMP.

Si vous avez besoin d'une variable qui n'est pas intégrée à GTM de base, vous pouvez la créer. Pour ce faire, vous aurez à choisir depuis une liste de types de variables pré-définies dans GTM, et en changer les paramètres.

Les variables peuvent être créées depuis l'écran d'accueil de GTM en cliquant sur l'onglet "Variables" dans le menu de gauche. Vous pouvez aussi en créer lors de la création d'un tag, en cliquant sur le logo en forme de Lego avec un "+".

Data Layer

Les tags doivent souvent obtenir des informations supplémentaires sur l'internaute, ou bien s'ils doivent se lancer ou non. Dans le second cas, le plus simple est d'obtenir ces infos depuis le HTML du site, mais ce n'est pas toujours possible de customiser le code source de votre site.

Pour répondre à ce problème, et à celui des informations sur l'utilisateur, il est possible d'utiliser un data layer. Le data layer est une liste d'objets en JavaScript qui garde des informations séparément du code de votre site. Vos tags n'ont plus qu'à se servir dans le data layer et disposent d'un endroit unique où trouver de la donnée.

Techniquement, le data layer est un élément optionnel de GTM. C'est la partie la plus "technique" de Google Tag Manager, elle est donc souvent ignorée par les marketers qui n'ont pas d'appétence technique. Malgré tout, c'est un outil extrêmement puissant.

Si vous souhaitez l'utiliser, vous pouvez l'initier (avec votre donnée customisée) en haut de votre page comme ceci (avant le code du container de GTM) :

Data layer google tag manager

Si vous ne le faites pas, sachez que GTM en initialise un vide quoi qu'il arrive.

Une fois en place, vous pouvez ajouter de la donnée dans cet objet via le code de votre site, ou bien via certains déclencheurs de GTM, comme par exemple quand un internaute ajoute un article dans son panier.

Travailler avec Google Tag Manager

Créer un compte et un conteneur

Pour commencer, rendez-vous sur tagmanager.google.com et créez un compte. Entrez le nom de votre entreprise et continuez.

Première étape création de compte google tag manager

Ensuite, vous allez configurer le conteneur. Entrez le nom de domaine de votre site comme nom de conteneur (ce n'est pas obligatoire, mais considéré comme une best practice). Choisissez le type Web si c'est un site ou une web app. Si vous choisissez iOS ou Android, choisissez entre le SDK de Firebase ou l'ancien SDK.

Deuxième étape création de compte google tag manager

Il est considéré comme best practice (selon Google) de configurer un conteneur par site. De la même manière, si vous devez tagger un sous-domaine de manière totalement différente (blog, webapp, etc), n'hésitez pas à créer un conteneur pour ce sous-domaine.

Vous n'avez plus qu'à accepter les conditions d'utilisation et vous arriverez sur cet écran :

Code d'implémentation du conteneur google tag manager

Comme mentionné dans le texte explicatif, vous devez placer la première section du code dans la partie "" de chaque page HTML de votre site. La seconde partie va à la fin du "". Elle est moins importante, car elle sert à tracker les internautes ayant bloqué le JavaScript sur leur navigateur (moins de 1% de la population).

Créer un tag

Une fois le conteneur créé, la première chose que vous verrez sera le dashboard de Google Tag Manager. Commencez par créer une nouvelle balise (version francisée du tag par Google) :

Création d'une balise sur google tag manager

Avant de continuer le processus de création de balise, souvenez-vous de toujours bien les nommer. Une fois que vous en aurez une dizaine ou une centaine, il sera bien plus dur de vous y retrouver. Google recommande de nommer vos balises sous la forme : Type de Balise - Détail - Emplacement. Par exemple, une balise Google Analytics mesurant les soumissions de votre formulaire de contact serait nommé : "GA - Soumission Formulaire - Nous Contacter".

Maintenant, continuez sur l'écran suivant. Vous allez pouvoir configurer votre balise en sélectionnant un type de balise parmi la liste de celles qui sont proposées par GTM. Si vous ne voyez pas la balise qui vous convient, vous pouvez toujours créer la votre via le type "HTML personnalisé".

Setup tag sour google tag manager

Il est impossible de vous montrer comment configurer toutes les balises disponibles, aussi allons-nous juste le faire pour Google Analytics. Admettons que vous voulions mesure le nombre de personnes ayant vu notre page de pricing. Pour ce faire, sélectionnez Universal Analytics comme type de balise :

Google Analytics sur google tag manager

Ensuite, dans la partie "Déclenchement", créez un nouveau déclencheur de type "Page vue", mais ajoutez-y un filtre pour signaler que vous ne souhaitez activer la balise que sur la page de pricing :

déclencheur custom google tag manager

Voilà ! Votre balise est enfin prête. Vous n'avez plus qu'à publier votre conteneur en production, et le tour est joué.

Conclusion

Ceci était une brève introduction à Google Tag Manager. Nous reviendront bientôt sur des aspects plus avancés de l'outil dans d'autres articles.

Pour ne pas les manquer, abonnez-vous !

Calculez l'audit gratuit de vos 3 top campagnes !

Tous les articles