612 tutoriels en ligne

Créa-blog

#100JoursPourCoder
Projet Créa-code

Ressources pour développeur web

Théme de la semaine : Search Console

GA4 et Google Tag Manager : Maîtriser vos Données

Temps de lecture estimé : 10 minutes
Accueil SEO GA4 et Google Tag Manager : Maîtriser vos Données

Ses statistiques sur son site web, on sait que des gens viennent, mais on ignore d’où ils viennent, ce qu’ils regardent, et surtout, pourquoi ils repartent sans rien acheter ou sans vous contacter. Pendant longtemps, l’analyse de données semblait réservée à des experts. Mais aujourd’hui, le paysage a changé. Avec l’arrivée de Google Analytics 4 (GA4) et la puissance de Google Tag Manager (GTM), vous avez entre les mains des outils incroyables pour comprendre chaque clic de vos visiteurs.

  • Centraliser la gestion de vos outils marketing pour ne plus jamais avoir à toucher au code source de votre site web.
  • Maîtrisez la compréhension du parcours de vos visiteurs pour identifier précisément les blocages qui freinent votre croissance.
  • Sécurisez la collecte de vos statistiques en harmonisant vos performances techniques avec le respect des réglementations sur la vie privée.

La bonne nouvelle ? Vous n’avez pas besoin d’être un développeur chevronné pour les utiliser. Dans ce chapitre du tutoriel sur Google Analytics 4, nous allons voir ensemble comment fonctionnent Google Tag Manager et GA4, pourquoi ils sont indissociables et comment vous pouvez les installer sur votre propre site. Préparez-vous à transformer votre vision du web : nous allons passer de l’intuition à la précision.

GTM (Google Tag Manger) et GA4 (Google Analytics 4)

Si vous débutez, ces acronymes peuvent faire peur. Pourtant, le concept est très simple si on utilise une image du quotidien. Imaginez que votre site web est une grande bibliothèque.

Google Analytics 4 : Le bibliothécaire observateur

Google Analytics 4, c’est votre bibliothécaire. Son rôle est de noter tout ce qui se passe dans la bibliothèque. Il compte le nombre de visiteurs, regarde quels livres (vos pages) sont les plus consultés, et note combien de temps les gens restent assis dans les fauteuils. GA4 est l’outil qui stocke et organise les données pour vous présenter des rapports détaillés.

Google Tag Manager : Le système de caméras et de capteurs

Google Tag Manager, ou GTM, c’est le système de capteurs que vous installez partout dans la bibliothèque pour aider le bibliothécaire. Au lieu que le bibliothécaire doive courir partout lui-même, vous installez un capteur sur la porte, un autre sur les étagères de BD, et un dernier sur la machine à café.

GTM est un gestionnaire de balises. C’est une interface qui fait le pont entre votre site web et vos outils d’analyse. Au lieu d’aller coller du code manuellement dans chaque recoin de votre site (ce qui est long, risqué et vite désordonné), vous installez GTM une seule fois. Ensuite, c’est depuis l’interface de GTM que vous direz : « Tiens, je veux savoir quand quelqu’un clique sur ce bouton rouge ».

Imaginez le cas d’un boulanger passionné ayant lancé son site pour vendre des cours de pâtisserie en ligne. Il voit du trafic, mais aucune vente. Il peut penser que ses prix soient trop élevés. En installant correctement le duo GTM/GA4, on il pourrait se rendre compte que les gens cliquent massivement sur « Ajouter au panier », mais que le bouton « Valider la commande » est « caché », ou peu visible, tout en bas de la page sur mobile. Sans ces outils, il aurait baissé ses prix pour rien, alors que le problème est juste ergonomique !

Pourquoi devriez-vous utiliser Google Tag Manager ?

Certains vous diront qu’on peut installer GA4 directement sur son site sans passer par GTM. C’est vrai, c’est possible. Mais c’est un peu comme vouloir faire de la menuiserie sans établi : on finit par travailler par terre et par se faire mal au dos. Voici pourquoi utiliser un gestionnaire de balises change la donne.

1. L’autonomie

Le plus gros avantage du Google Tag Manager, c’est qu’une fois le code de base installé par vous ou votre développeur, vous n’avez plus besoin de toucher au code du site. Vous voulez ajouter un pixel Facebook ? Un suivi pour vos publicités Google Ads ? Vous le faites dans l’interface GTM en trois clics. Cela évite d’attendre trois semaines qu’un technicien soit disponible.

2. Un site plus rapide et plus propre

Multiplier les scripts de suivi directement dans le code de votre site peut ralentir le chargement des pages. GTM optimise la manière dont ces scripts (les fameuses balises) sont chargés. De plus, votre code reste « propre » puisque tout est centralisé dans un seul conteneur.

3. Le mode de prévisualisation

C’est LA fonctionnalité. Avant de publier une modification sur votre site, GTM vous permet de la tester en « mode debug ». Vous seul voyez les changements. Vous pouvez cliquer sur vos boutons et vérifier en temps réel si l’information remonte bien vers GA4. Si ça ne marche pas, vous corrigez avant que le public ne le voie.

Dans quel cas utiliser Google Tag Manager ?

Google Tag Manager devient vraiment intéressant dès que vous commencez à vouloir mesurer plus que “juste quelques clics”. Tant que vous avez 3 ou 4 événements bien identifiés, un petit script gtag suffit largement. Mais le jour où vous voulez suivre des actions plus variées (clics sur plusieurs boutons, scroll, liens externes, téléchargements, formulaires, vidéos, conversions publicitaires…), là GTM vous fait gagner un temps énorme.

L’idée, c’est que vous n’avez plus besoin de modifier votre code à chaque nouveau besoin : vous centralisez tout dans une interface, avec des règles claires du style “si l’utilisateur clique ici, alors j’envoie tel événement”, et vous pouvez ajuster ça en quelques minutes.

Autre cas très fréquent : dès que vous utilisez plusieurs outils marketing en même temps. Par exemple Google Analytics, Google Ads, Meta Pixel, du remarketing, ou même des scripts de partenaires. Sans GTM, on finit vite avec un site rempli de morceaux de code partout, difficiles à maintenir et faciles à casser.

Avec GTM, vous posez un conteneur propre une seule fois, puis vous pilotez vos balises comme un tableau de bord. Bref : GTM n’est pas obligatoire, mais dès que votre suivi devient un peu sérieux ou évolutif, c’est l’outil qui transforme un tracking “bricolé” en tracking propre, scalable et beaucoup plus confortable à gérer.

Pour résumé

Installez GTM si vous commencez à vouloir :

Ajouter plein de mesures sans toucher au code :

  • clics sur tous les liens externes
  • clics sur tel bouton partout sur le site
  • scroll 25% / 50% / 90%
  • téléchargement de fichiers
  • tracking de vidéos YouTube intégrées
  • soumissions de formulaires (même sans bouton “submit” classique)

Là, GTM devient un tableau de bord de tracking, super pratique.

Vous voulez “centraliser” pixels & conversions :

  • Meta Pixel
  • Google Ads conversion
  • Remarketing
  • tracking avancé cross-domain
  • plusieurs tags marketing

GTM est clairement pensé pour ça.

— Vous voulez des déclenchements “intelligents” :

  • envoyer l’évènement uniquement si l’utilisateur reste +20 secondes
  • envoyer l’évènement seulement si l’utilisateur est sur mobile
  • déclencher seulement si l’URL contient /formation/ ou /article/

Les concepts clés à comprendre avant de commencer

Pour ne pas être perdu dans l’interface, il faut assimiler trois termes fondamentaux. C’est le vocabulaire de base de tout utilisateur de GTM.

  • La Balise ou Tag : C’est le « QUOI ». C’est le morceau de code qui envoie la donnée.
  • Le Déclencheur ou Trigger : C’est le « QUAND ». C’est la condition qui doit être remplie pour que la balise s’active. Cela pourrait être : « Quand quelqu’un clique sur le bouton de contact ».
  • La Variable : C’est le « DÉTAIL ». Elle sert à donner des informations précises.vPar exemple : Si vous avez plusieurs boutons de contact, la variable permettra de savoir sur lequel l’utilisateur a cliqué exactement.

GTM, c’est comme un serveur dans un resto Imaginez que votre site web est un restaurant.

La Balise (Tag) = le plat qu’on sert

La balise, c’est l’action qui se produit :

  • envoyer un événement à Google Analytics
  • déclencher une conversion
  • lancer un pixel pub

Dans le resto : la balise, c’est le plat qui arrive à votre table (Le résultat final.).

Le Déclencheur (Trigger) = le moment où on envoie le plat

Le déclencheur, c’est la règle qui dit quand la balise doit s’activer :

  • quand quelqu’un clique sur un bouton
  • quand une page se charge
  • quand un formulaire est envoyé

Dans le resto : le déclencheur, c’est le serveur qui reçoit la commande et dit “OK, je l’envoie”. Ça ne se déclenche que si la condition est remplie : « table 12 a commandé ».

La Variable (Variable) = les infos de la commande

La variable, c’est ce que GTM utilise comme information pour décider ou compléter l’action :

  • l’URL de la page
  • le texte du bouton cliqué
  • l’ID d’un produit
  • le montant d’un panier

Dans le resto : la variable, c’est le détail de la commande : “Pizza 4 fromages, taille XL, sans oignons, table 12”. C’est la donnée qui précise quoi faire, et parfois même qui permet de décider si on le fait ou pas.

Résumé ultra simple

  • Variable = avec quelles infos (les données)
  • Balise = ce qui se passe (l’action)
  • Déclencheur = quand ça se passe (la condition)

Étape 1 : Création et installation de Google Tag Manager

Passons maintenant à la pratique. Nous allons partir d’une page blanche. Pour installer Google Tag Manager, vous devez d’abord créer un compte.

  1. Rendez-vous sur le site officiel de GTM.
  2. Créez un compte (souvent au nom de votre entreprise).
  3. Créez un « Conteneur ». Pour un site web, choisissez la plateforme « Web ».
  4. Une fois validé, une fenêtre s’ouvre avec deux blocs de code.
Créer un compte Google Tag Manager

Où placer ces codes ?

C’est la seule fois où vous devrez toucher au code de votre site (ou demander à votre développeur).

Le premier bloc doit être placé le plus haut possible dans la balise <head> de votre site. Voici à quoi cela ressemble schématiquement :

<html>
<head>
  <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>
  <title>Mon superbe site</title>
</head>

Le second bloc est une sécurité. Il doit être placé juste après l’ouverture de la balise <body>.

HTML

<body>
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <h1>Bienvenue sur mon site</h1>
</body>

Si vous utilisez un CMS comme WordPress, il existe des extensions très simples comme GTM4WP qui vous demandent simplement votre identifiant (le code qui commence par GTM-XXXXXXX) et qui s’occupent de placer le code au bon endroit pour vous.

Étape 2 : Connecter GA4 à votre Google Tag Manager

Installer GTM sans y mettre GA4, c’est comme installer une prise électrique sans y brancher d’appareil. Pour que les données circulent de votre site vers vos rapports, nous devons créer une passerelle.

Créer votre flux de données GA4

Avant toute chose, vous devez posséder une « Propriété » GA4. Dans l’interface de Google Analytics, allez dans l’administration et créez un « Flux de données » pour votre site web.

Flux de données dans GA4 pour connecter Google Tag Manager

Google vous donnera alors un ID de mesure (un code commençant par « G-« ). Gardez-le précieusement, c’est votre ticket d’entrée.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Configurer la balise de configuration dans GTM

Retournez sur votre interface GTM. Nous allons créer notre toute première balise ensemble.

  1. Cliquez sur Balises, puis sur Nouvelle.
  2. Nommez-la de façon claire, par exemple : « GA4 – Configuration de base ».
  3. Dans « Configuration de la balise », choisissez Google Analytics : Configuration GA4.
  4. Collez votre ID de mesure G-XXXXXXXX dans le champ correspondant.
  5. Dans « Déclenchement », choisissez All Pages (Toutes les pages).

En faisant cela, vous dites à GTM : « Chaque fois qu’une page de mon site se charge, préviens Google Analytics que quelqu’un est là ». Cliquez sur enregistrer. Félicitations, vous venez de réaliser votre première intégration sans écrire une seule ligne de code complexe !

Aller plus loin avec le suivi des événements : Le cœur de GA4

La grande différence entre l’ancien Google Analytics et GA4, c’est que GA4 ne jure que par les événements. Un clic est un événement, un défilement de page est un événement, un achat est un événement.

Exemple concret : Suivre le clic sur un bouton « Appeler »

Imaginons que vous soyez un artisan. Ce qui vous importe, c’est que les gens cliquent sur votre numéro de téléphone.

Le Déclencheur : Dans Google Tag Manager, créez un nouveau déclencheur de type « Clic – Liens uniquement ». Choisissez « Certains clics sur des liens » et paramétrez la condition sur : Click URL contient tel:.

La Balise : Créez une nouvelle balise « Événement GA4 ».

  • Nom de l’événement : clic_telephone.
  • Déclencheur : celui que vous venez de créer.

Désormais, dès qu’un visiteur cliquera sur votre numéro pour vous appeler, l’information remontera dans vos rapports GA4. Vous saurez enfin si votre site vous apporte réellement des clients.

Le concept crucial du Data Layer : La couche de données

Pour les débutants, le terme « Data Layer » ressemble souvent à un concept obscur. Pourtant, c’est la clé pour devenir un pro de GTM.

Qu’est-ce que le Data Layer ?

Le Data Layer est un objet invisible (un tableau JavaScript pour les plus curieux) qui stocke temporairement les informations de votre site pour les donner à manger à Google Tag Manager.

Imaginez un serveur dans un restaurant. Le site web, c’est la cuisine. GTM, c’est le client. Le Data Layer, c’est le plateau du serveur. La cuisine pose les plats sur le plateau, et le serveur les apporte au client. Sans ce plateau, la communication est beaucoup plus difficile.

Pourquoi est-ce utile ?

Si vous avez un site e-commerce, vous voulez savoir quel est le montant du panier. Le Data Layer va « extraire » le prix du produit et le transmettre proprement à GTM. Voici un exemple de code qu’un développeur pourrait placer sur votre page de confirmation de commande :

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'achat_reussi',
  'transaction_id': '12345',
  'montant_total': 49.90,
  'devise': 'EUR'
});

Grâce à ce petit morceau de code, GTM « voit » l’événement achat_reussi et peut récupérer le montant de 49.90 pour l’envoyer à vos statistiques. C’est ainsi que vous pouvez calculer votre rentabilité avec précision.

Exemple concret : Suivre l’envoi d’un formulaire de contact

C’est souvent la bête noire des débutants. Comment savoir si quelqu’un a vraiment envoyé le formulaire ? Plusieurs méthodes existent, mais la plus fiable via Google Tag Manager est souvent d’utiliser la « Visibilité de l’élément ».

  1. Identifiez le message de succès qui apparaît après l’envoi (ex: « Merci pour votre message »).
  2. Dans GTM, créez un déclencheur « Visibilité de l’élément ».
  3. Utilisez l’ID ou la classe CSS de ce message de succès.
  4. Associez ce déclencheur à une balise d’événement GA4 nommée formulaire_envoye.

Cette méthode est bien plus précise que de simplement suivre le clic sur le bouton « Envoyer », car elle ne s’active que si le message de confirmation apparaît réellement à l’écran du visiteur.

Variables et paramètres : Personnaliser votre analyse

Pour que votre GTM soit vraiment intelligent, vous devez utiliser des variables. Une variable est une information dynamique.

Les variables intégrées

Google Tag Manager en propose plein par défaut. Par exemple, la variable Click URL contient l’adresse du lien sur lequel on a cliqué. La variable Page Path contient l’adresse de la page où se trouve l’utilisateur.

Les variables personnalisées

Vous pouvez créer les vôtres. Imaginons que vous vouliez suivre la profondeur de lecture de vos articles. Vous pouvez créer une variable qui calcule le pourcentage de défilement de la page. Si un utilisateur arrive à 75%, vous déclenchez une balise. Cela vous permet de savoir quels articles sont lus jusqu’au bout et lesquels ennuient vos lecteurs dès le deuxième paragraphe.

Tester avant de publier : Le mode Prévisualisation

C’est ici que vous allez gagner des heures de sommeil. En haut à droite de votre interface GTM, vous trouverez le bouton « Prévisualiser ».

En cliquant dessus, vous entrez dans le Tag Assistant. Vous donnez l’URL de votre site, et une nouvelle fenêtre s’ouvre. Sur votre gauche, vous verrez apparaître en temps réel toutes les balises qui se déclenchent (ou non) au fur et à mesure que vous naviguez sur votre site.

Si vous cliquez sur votre bouton de contact et que votre balise GA4 passe de la colonne « Tags Not Fired » (Balises non déclenchées) à « Tags Fired » (Balises déclenchées), c’est gagné ! Votre configuration est correcte.

Étape 3 : Le respect du RGPD et le Consent Mode v2

On ne peut plus parler de Google Tag Manager ou de GTM sans aborder la question de la vie privée. Vous avez sûrement déjà vu ces bannières de cookies qui surgissent à l’entrée d’un site. En Europe, le Règlement Général sur la Protection des Données (RGPD) nous impose de ne pas traquer un utilisateur sans son accord explicite.

Pourquoi est-ce important ?

Si vous installez vos balises GA4 pour qu’elles se déclenchent sur « Toutes les pages » sans filtre, vous êtes techniquement en infraction. Heureusement, GTM intègre désormais une fonctionnalité appelée Consent Mode v2. C’est un système intelligent qui communique l’état du choix de l’utilisateur (OUI ou NON) à Google.

Comment le mettre en place simplement ?

Pour un débutant, la méthode la plus simple est d’utiliser une plateforme de gestion du consentement (CMP) certifiée par Google (comme Axeptio, Didomi ou Cookiebot). Ces outils proposent souvent des modèles directement dans la galerie de modèles de GTM.

  1. Importez le modèle de votre solution de cookies.
  2. Créez une balise qui va initialiser le consentement.
  3. Pour vos autres balises (comme GA4), allez dans « Paramètres avancés » > « Paramètres de consentement ».
  4. Cochez « Nécessite un consentement supplémentaire » et sélectionnez analytics_storage.

Ainsi, si l’utilisateur clique sur « Tout refuser », votre balise GA4 ne s’allumera pas, ou elle enverra des signaux anonymisés sans utiliser de cookies. C’est le compromis parfait entre légalité et analyse.

Étape 4 : Organiser son conteneur comme un pro

Au début, on crée deux ou trois balises et tout semble simple. Mais au bout de six mois, on se retrouve vite avec trente balises aux noms obscurs comme « Test 1 », « Nouveau pixel » ou « Code JB ». Pour éviter que votre Google Tag Manager ne devienne désordonné, suivez ces règles d’or.

La nomenclature : Votre meilleur ami

Adoptez une structure de nommage systématique. Par exemple :

  • [GA4] – Event – Clic Bouton Contact
  • [Ads] – Conversion – Achat
  • [FB] – Pixel – PageView

En commençant par le nom de l’outil entre crochets, vous regroupez visuellement vos balises par catégorie. C’est un gain de temps phénoménal quand vous devrez faire une mise à jour dans un an.

Utilisez les dossiers

Peu de gens les utilisent, mais GTM permet de créer des dossiers. Vous pouvez en créer un pour « Tracking Marketing », un autre pour « Configuration de base » et un dernier pour « Scripts Techniques ».

Exemples de codes avancés : Le sur-mesure

Parfois, les clics simples ne suffisent pas. Vous voulez peut-être savoir si un visiteur a copié votre adresse e-mail ou s’il a passé plus de deux minutes sur un article de blog.

Suivi de la sélection de texte (Copy-Paste)

Voici un exemple de script que vous pouvez insérer dans une balise « HTML Personnalisée » pour détecter quand quelqu’un copie du contenu sur votre site. C’est très utile pour savoir si vos articles sont cités ou si vos coordonnées sont récupérées.

document.addEventListener('copy', function() {
  window.dataLayer.push({
    'event': 'content_copied',
    'clipboard_text': window.getSelection().toString()
  });
});

Une fois ce script actif, vous n’avez plus qu’à créer un déclencheur de type « Événement personnalisé » nommé content_copied et une balise GA4 pour envoyer l’information. C’est ce genre de détails qui transforme un site classique en une véritable machine à comprendre son audience.

Analyser les résultats dans GA4 : Le moment de vérité

Installer GTM n’est que la moitié du chemin. L’autre moitié se passe dans l’interface de Google Analytics 4. Une fois que vos événements (comme clic_telephone ou formulaire_envoye) remontent, où les trouver ?

  1. Connectez-vous à GA4.
  2. Allez dans Rapports > Engagement > Événements.
  3. Vous y verrez la liste de tout ce que votre Google Tag Manager a envoyé.

Le petit conseil bonus : Si un événement est particulièrement important (comme une vente ou une demande de devis), allez dans l’administration de GA4, section « Événements », et cochez la case « Marquer comme conversion« . Cela permettra à Google de calculer votre taux de conversion automatiquement et de mieux optimiser vos futures publicités.

Prenez le pouvoir sur vos données

Maîtriser le duo GA4 et Google Tag Manager, c’est un peu comme apprendre à lire une langue étrangère. Au début, on déchiffre péniblement chaque lettre, puis on comprend les mots, et enfin, on saisit toute la richesse du récit. Vous avez désormais toutes les clés en main pour passer du stade de spectateur à celui d’acteur de votre stratégie digitale.

N’ayez pas peur de faire des tests. Utilisez le mode prévisualisation de GTM comme un laboratoire sécurisé. Chaque clic que vous traquez, chaque formulaire que vous analysez vous rapproche un peu plus d’une compréhension intime de vos clients. Ce ne sont pas juste des chiffres dans un tableau, ce sont des comportements humains qui vous indiquent comment améliorer votre service ou votre produit.

La route peut sembler longue, mais rappelez-vous que même les plus grands experts ont commencé par poser leur première balise de configuration. Le simple fait d’avoir lu ce guide jusqu’au bout montre que vous avez déjà fait le plus dur : décider de ne plus naviguer à vue. Alors, à vos claviers, et bon taggage !

Chapitre suivant : Quelles métriques surveiller chaque semaine dans GA4 ?