Améliorez la gestion de vos third parties grâce à Google Tag Manager

Google Tag Manager : qu’est-ce que c’est ? Qu’est-ce que ce n’est pas ?

Google Tag Manager est ce qu’on appelle un système de gestion de balises. Il permet de mettre à jour et déployer rapidement du code de suivi sur votre site web. Même si Google présente cet outil comme permettant au marketing de se passer des développeurs, on verra que dans la réalité, ce n’est pas tout à fait le cas ou du moins, pas sans avoir quelques connaissances techniques.

Grâce à GTM, vous pourrez :

• collecter et envoyer des données de tracking vers divers outils tels que Google Analytics ou AppsFlyer
• mettre en place un suivi de conversion pour vos campagnes publicitaires (Facebook pixel, Google Adwords, etc.)
• ajouter de nouvelles fonctionnalités sur votre site

Et tout cela sans toucher au code source.

Régulièrement, une confusion est faite entre GTM et Google Analytics. Ce sont pourtant 2 outils totalement différents bien que très complémentaires. Il faut plutôt voir GTM comme un orchestrateur qui servira à implémenter Google Analytics. Vous pouvez tout à fait mettre GA sur votre site sans utiliser GTM. Mais GTM vous facilitera cette mise en place et l’envoi de données vers GA.

Pourquoi utiliser Google Tag Manager ?

Pour répondre à cette question, je vais simplement vous présenter quelques pour et contre sur l’utilisation de GTM dans votre projet :

Les avantages :

• vous allez regrouper tous vos third parties (code externe) dans un seul et unique endroit et ainsi faciliter leur maintenance
• GTM propose beaucoup d’intégrations pré-faites qui vous feront gagner beaucoup de temps et éviteront quelques erreurs
• vos intégrations sont chargées de manière asynchrone, ce qui peut améliorer les performances de votre site
• l’ajout / modification / suppression de vos third parties se fait sans avoir à redéployer votre code source
• la possibilité de tester vos changements avant de les publier

Les inconvénients :

• Cela peut prendre du temps de migrer tous vos third parties vers GTM
• Comme indiqué précédemment, il est préférable d’avoir quelques connaissances techniques
• Certaines extensions de navigateurs bloquent toutes les requètes vers googletagmanager.com (ceci dit, ces extensions bloquent également les requètes faites directement vers les domaines des third parties…)

Comment ajouter Google Tag Manager sur mon site ?

Avant de commencer, petit détail qui a son importance: GTM est gratuit ! Il existe une version payante : GTM 360 mais elle n’est vraiment utile que pour les très grosses entreprises. Un comparatif des 2 produits est disponible en ligne.

Afin d’utiliser GTM, il vous faut tout d’abord un compte Google. Vous pouvez ensuite vous rendre sur la page d’accueil de Google Tag Manager. Ici, cliquez sur « Créer un compte » et remplissez le formulaire de création de compte. Je ne couvrirai dans cet article que la partie concernant le Web. Mais sachez qu’il est possible d’utiliser GTM sur une application iOS ou Android ou encore sur une page AMP.

Une fois votre compte créé, on vous demandera d’installer 2 morceaux de code sur votre site web. Quand je vous disais qu’il y avait toujours besoin de développeur ;). C’est le seul morceau de code que vous devrez mettre directement dans votre code source (hors tracking spécifique). Tout le reste se fera directement via l’interface de GTM.

Présentation de l’interface et des fonctionnalités

Conteneur

Lors de la création de votre compte, un conteneur a été créé. Généralement il est lié à un site web. Chaque conteneur possède un ID unique de la forme GTM-xxxxx qui est également présent dans le petit morceau de code que vous avez dû ajouter sur votre site web. Vous pouvez avoir plusieurs conteneurs sur votre compte Google.

Balises

Une balise est un petit morceau de code qui sera exécuté sur votre site web si le ou les déclencheurs qui lui sont liés sont activés. GTM propose par défaut tout un tas de balises toutes faites qu’il n’y a plus qu’à configurer. Mais sachez qu’il est également possible de mettre son propre code directement via l’interface quand les types de balises ne vous conviennent pas.

Quelques exemples de types de balises :

• Google Analytics : Universal Analytics
• Suivi de conversion Google Ads
• Tag universel de Twitter
• Pixel Facebook

Déclencheurs

Comme indiqué précédemment, un déclencheur permet d’indiquer quand une balise sera exécutée. Là encore, GTM propose de nombreux déclencheurs déjà configuré sur lesquels vous pourrez brancher vos balises. Sachez qu’il est également possible d’utiliser les déclencheurs pour indiquer quand une balise ne sera pas exécutée; on parle alors d’exception.

Quelques exemples de déclencheurs :

• Page vue
• Clic sur un lien
• Envoi de formulaire
• Profondeur de défilement dans la page

Variables

Les variables contiennent des valeurs que les déclencheurs ou les balises peuvent utiliser. GTM propose quelques variables comme l’URL de la page mais généralement c’est plutôt nous qui définissons des variables. Un exemple assez classique est d’enregistrer l’ID Google Analytics dans une variable et de l’utiliser lors de la mise en place de la balise GA.

dataLayer

Le dataLayer est un tableau javascript accessible directement depuis votre page web. C’est via cet objet que vous allez envoyer des informations à GTM. Toute l’API est accessible depuis la documentation mais notez que c’est grâce à la méthode push que vous pourrez communiquer avec GTM.

Voici un petit exemple extrait de la documentation: js dataLayer.push({ 'color': 'red', 'conversionValue': 50, 'event': 'customizeCar' });

Charge à vous ensuite de récupérer ces informations côté GTM afin de voir si ces données permettent à un déclencheur de s’activer et ensuite à une balise d’être exécutée. Ce n’est pas obligatoire mais généralement, on passe un attribut event qui peut facilement se brancher sur le déclencheur « Événement personnalisé ». Nous verrons cela plus en détail dans la partie exemples de cet article.

Prévisualiser, débugger et publier

Quand vous faites des modifications, par défaut, ces modifications ne sont pas visibles sur votre site web. Afin de les tester, vous pouvez activer le mode « Prévisualiser » (accessible en haut à droite dans l’interface de GTM). Quand ce mode est activé, vous n’avez plus qu’à retourner sur votre site et le rafraîchir; vous devriez voir apparaître en bas de page un bandeau contenant toutes les informations sur les balises, déclencheurs, variables de votre conteneur.

Pour chacun vous pouvez suivre en temps réel leur valeur, si et pourquoi ils ont été appelés ou non, etc. Si vous ne voyez pas vos modifications, il y a la possibilité de forcer le rafraichissement du mode prévisualisation, directement depuis l’interface de GTM.

Quand toutes vos modifications vous conviennent, il ne vous reste plus qu’à les publier. Pour cela, cliquez sur le bouton « Envoyer » (en haut à droite de l’interface de GTM). On vous demandera si vous souhaitez « Publier et créer une version » ou simplement « Créer une version ». Une version est une sauvegarde à un instant T de l’état de votre conteneur. Le numéro des version s’incrémente automatiquement à chaque fois que vous en créez une.

Il n’y a qu’une seule version à la fois qui peut être « live » c’est-à-dire publiée sur votre site web. Si finalement votre version publiée ne convient plus, vous avez toujours la possibilité de re-publier une version antérieure.

Espace de travail

Si vous travaillez à plusieurs en même temps sur GTM, le suivi des modifications non versionnées peut devenir assez compliqué. Pour parer à cela, vous pouvez créer des espaces de travail. Ainsi, chacun travail sur son espace de travail et c’est au moment de la publication que les autres espaces seront prévenus qu’il y a eu des changements. Par défaut, la version gratuite de GTM propose d’avoir jusqu’à 3 espaces.

Quelques exemples

Ajouter Google Analytics

Avant toute chose, vous devez posséder un compte sur Google Analytics et en connaître l’ID de suivi. Il est de la forme UA-XXXXXXXXX-X. Vous devez également avoir ajouté les script de GTM sur votre site.

Une fois que vous avez tout cela, allez sur votre interface GTM, sous-menu « Balises » et cliquez sur « Nouveau ». Une interface de création d’une nouvelle balise s’ouvre. Donnez-lui un titre (ex: « Google Analytics – main tag »), au niveau de la Configuration de la balise, cliquez dessus et choisissez la balise pré-enregistrée « Google Analytics : Universal Analytics ». Par défaut, cette balise va tracker les pages vues.

Dans le champ « Paramètre Google Analytics », choisissez « Nouvelle variable », donnez-lui un nom (ex: « Google Analytics ID ») et renseignez votre ID de suivi dans le champ correspondant. Comme vous pouvez le voir, GTM vous propose automatiquement de créer une variable pour sauvegarder cette valeur. Ainsi, vous pourrez facilement la réutiliser si vous ajoutez d’autre code de tracking GA.

Sauvegardez. La variable est maintenant visible au niveau de notre balise.

Pour la partie Déclenchement, choisissez le déclencheur « All Pages » déjà existant. Ainsi, notre balise sera déclenchée sur toutes les pages de notre site. Votre configuration finale devrait ressembler à cela :

Il ne nous reste plus qu’à tester que Google Analytics est bien chargé sur notre site web avant de publier ces changements. Pour cela, cliquez sur « Prévisualiser » en haut de l’interface GTM. Rendez-vous sur votre site web. Vous devriez voir apparaître un bandeau en bas de page; bandeau dans lequel on peut voir que la balise « Google Analytics – main tag » a bien été déclenchée.

C’est parfait, nous pouvons maintenant publier nos changements. Tout d’abord, quitter le mode Aperçu puis cliquez sur « Envoyez ». Gardez l’option « Publier et créer une version » qui est sélectionnée par défaut, donnez un nom à la version ainsi qu’une description (ce n’est pas obligatoire mais c’est plus pratique quand on regarde les versions pour savoir ce qui a été fait exactement).

Cliquez sur « Publier » et ça y est, nos changements sont en ligne et vous pouvez désormais suivre vos utilisateurs sur votre site web. Et tout ceci sans toucher à un seul morceau de code !

Envoyer manuellement un événement à Google Analytics

Dans cet exemple, nous allons voir comment envoyer manuellement un événement à Google Analytics. Par manuellement, je veux dire que nous n’utiliserons pas une des balises Google Analytics proposées par GTM. L’idée étant de montrer comment utiliser l’objet dataLayer et comment en récupérer les informations.

Imaginons que nous ayons un formulaire de souscription à une newsletter situé en bas de page et que nous souhaitions tracker les soumissions de ce formulaire. Pour cela, nous allons envoyer des informations à GTM via l’objet dataLayer qu’il nous fournit. Voici à quoi va ressembler le click sur notre bouton:

<button type="submit">S'inscrire</button>

Ainsi, lors du clique sur le bouton, nous allons envoyer 3 informations à GTM:

• event qui permet d’identifier l’événement que nous déclenchons. Il va nous permettre de lier notre clic à un déclencheur GTM
• eventValue qui permet de savoir de quel type d’événement il s’agit
• location pour savoir quel formulaire a été soumis

> Mise à part la propriété event qui fait parti des conventions, les autres propriétés sont libres donc vous pouvez les nommer comme vous voulez.

Maintenant, dans GTM nous allons créer un déclencheur que nous allons lier à notre événement. Pour cela, dans la partie « Déclencheur », créez-en un nouveau que nous allons nommer « Déclencheur – Newsletter ». Pour le type de déclencheur, il s’agit d’un « Evénement personnalisé » dont la valeur « Nom de l’événement » est donc form_newsletter. On peut maintenant le sauvegarder.

Notre déclencheur étant maintenant créé, nous n’avons plus qu’à le lier à une balise, à récupérer les valeurs de l’événement et les transmettre à GA. Tout d’abord, afin de pouvoir récupérer les valeurs des propriétés que nous avons envoyées dans le dataLayer, il va falloir déclarer les variables correspondantes. Pour cela, dans la partie « Variables », nous allons créer 2 variables de type « Variable de couche de données » et dont le nom et le titre correspondent à ce que nous avons envoyé à savoir eventValue et location.

Dans la partie « Balises », créons une nouvelle balise avec pour titre « Google Analytics – newsletter ». Pour le type de balise, nous allons choisir « HTML personnalisée »; ainsi nous pouvons y mettre le code suivant qui va créer le tracker GA, récupérer les valeurs liées à l’évènement et les envoyer à GA :

Le déclencheur lié est celui que nous avons précédemment créé à savoir « Déclencheur – newsletter ».

Une fois la balise sauvegardée, il ne nous reste plus qu’à tester le résultat via la Prévisualisation et en cliquant sur le bouton de notre formulaire de newsletter.

On peut voir que l’événement est bien déclenché donc nous pouvons publier une nouvelle version de notre conteneur GTM.

> Cet exemple est un peu plus complexe mais c’était pour explorer comment utiliser le dataLayer et en récupérer les informations directement via du Javascript dans GTM. Une meilleure approche aurait été de récupérer ces informations et les envoyer à GA directement via une balise préconfigurée de GTM.

Conclusion

Comme on a pu le voir précédemment, Google Tag Manager est vraiment là pour nous simplifier la vie. Personnellement, ce que j’apprécie énormément avec GTM c’est le fait de regrouper tous mes third parties dans un seul et même outil. Ainsi, il est beaucoup plus simple de les contrôler et de les utiliser.