Google Tag Manager (GTM) est installé sur 30 % des sites web (source : BuiltWith, 2025). Son avantage : ajouter, modifier ou supprimer des scripts de tracking sans toucher au code source du site. Fini les allers-retours avec le développeur pour un simple pixel de conversion. Mais GTM mal configuré peut casser ton tracking, ralentir ton site ou créer des fuites de données. Voici comment l'utiliser correctement.
Qu'est-ce que Google Tag Manager ?
Pour approfondir ce sujet, consultez notre article sur SEO WordPress : guide d'optimisation complet.
GTM est un gestionnaire de balises gratuit. Il sert d'intermédiaire entre ton site web et les outils tiers (GA4, Google Ads, Facebook Pixel, Hotjar, etc.). Au lieu d'insérer chaque script directement dans le code HTML, tu les gères tous depuis l'interface GTM.
Les 3 concepts fondamentaux
| Concept | Rôle | Exemple |
|---|---|---|
| Tag (balise) | Le script à exécuter | Balise GA4, pixel Facebook, script Hotjar |
| Trigger (déclencheur) | Quand exécuter le tag | Chargement de page, clic sur bouton, scroll |
| Variable | Données à transmettre | URL de la page, texte du clic, valeur du panier |
Un tag se déclenche quand un trigger est activé, et il utilise des variables pour envoyer les bonnes données.
Installation de GTM
Étape 1 : Créer un compte et un conteneur
- Va sur tagmanager.google.com
- Crée un compte (nom de l'entreprise)
- Crée un conteneur (nom du site, type : Web)
- Note ton ID de conteneur :
GTM-XXXXXXX
Étape 2 : Installer le snippet sur ton site
GTM te donne deux blocs de code :
Bloc 1 — à insérer dans le <head> (le plus haut possible) :
<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>
Bloc 2 — à insérer immédiatement après l'ouverture de <body> :
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0"
width="0"
style="display:none;visibility:hidden"
></iframe
></noscript>
Installation sur WordPress
Deux options :
- Plugin : "GTM4WP" (gratuit) — insère automatiquement les snippets et gère le dataLayer pour WooCommerce
- Manuel : via l'éditeur de thème (functions.php ou header.php) — pour les développeurs
Installation sur Next.js / React
Utilise le composant @next/third-parties (GoogleTagManager) ou insère les snippets manuellement dans le layout racine.
Vérification
Après installation, active le mode Preview dans GTM (bouton "Aperçu" en haut à droite). Un debugger s'ouvre en bas de ton site et montre en temps réel les tags qui se déclenchent, les triggers activés et les variables disponibles.
Configurer GA4 via GTM
Pourquoi passer par GTM plutôt que le snippet GA4 direct ?
- Flexibilité : ajouter des événements personnalisés sans code
- Centralisation : tous les scripts au même endroit
- Consent Mode : gérer le consentement RGPD de manière centralisée
- Versioning : historique des modifications, possibilité de rollback
Tag GA4 : Configuration
- Dans GTM, va dans Tags → Nouveau
- Choisis le type Google Analytics: GA4 Configuration
- Entre ton Measurement ID (G-XXXXXXXXXX) — tu le trouves dans GA4 → Admin → Data Streams
- Trigger : All Pages (toutes les pages)
- Nomme le tag : "GA4 — Configuration"
- Enregistre
Tag GA4 : Événement personnalisé
Pour tracker un clic sur un bouton CTA :
- Tag : Google Analytics: GA4 Event
- Configuration Tag : sélectionne le tag GA4 Configuration créé ci-dessus
- Event Name :
cta_click - Event Parameters :
button_text={{Click Text}} - Trigger : nouveau trigger → type "Click — All Elements" → condition : Click Text contient "Demander un devis"
Les triggers essentiels
| Trigger | Utilisation | Config |
|---|---|---|
| Page View | Chargement de page | All Pages ou URLs spécifiques |
| Click | Clic sur un élément | Filtre par CSS selector, texte, URL |
| Form Submission | Soumission de formulaire | Filtre par form ID ou action |
| Scroll Depth | Profondeur de scroll | Seuils : 25 %, 50 %, 75 %, 90 % |
| Timer | Temps passé sur la page | Intervalle en ms (ex : 30 000 = 30s) |
| YouTube Video | Lecture vidéo | Start, pause, complete, progrès |
| Custom Event | Événement dataLayer | Nom de l'événement personnalisé |
L'astuce du scroll depth
Tracker le scroll est un indicateur d'engagement bien plus fiable que le temps passé (qui est faussé par les onglets inactifs). Un scroll à 75 % sur un article de 2 000 mots signifie que le visiteur a lu la majorité du contenu.
Configuration :
- Nouveau trigger → Scroll Depth
- Type : Vertical Scroll Depths
- Percentages : 25, 50, 75, 90
- Associe ce trigger à un tag GA4 Event avec event name
scroll_depthet parameterscroll_percentage = {{Scroll Depth Threshold}}
Le dataLayer : communiquer entre le site et GTM
Le dataLayer est un tableau JavaScript qui sert de pont entre ton site et GTM. Quand ton site web génère des données (ajout au panier, connexion utilisateur, transaction), il les pousse dans le dataLayer, et GTM peut les lire via des variables.
Exemple : tracker un achat e-commerce
Côté site (JavaScript) :
dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: 'T-12345',
value: 89.9,
currency: 'EUR',
items: [
{
item_name: 'Formation SEO',
item_id: 'FORM-001',
price: 89.9,
quantity: 1,
},
],
},
})
Côté GTM :
- Variable : Data Layer Variable → nom :
ecommerce.value - Trigger : Custom Event → event name :
purchase - Tag : GA4 Event → event :
purchase→ parameters : les variables dataLayer
Consent Mode et RGPD
En France, le consentement est obligatoire avant de déposer des cookies de tracking (directive ePrivacy + RGPD). GTM intègre le Consent Mode de Google, qui adapte le comportement des tags selon le consentement de l'utilisateur.
Configuration
- Active le Consent Mode dans les paramètres du conteneur GTM
- Intègre une CMP (Consent Management Platform) : Axeptio, Didomi, CookieBot, ou Tarteaucitron
- La CMP communique l'état du consentement à GTM via le dataLayer
- Les tags GA4 respectent automatiquement le consentement : données anonymisées si refus, tracking complet si acceptation
Les deux modes
| Mode | Consentement | Comportement |
|---|---|---|
| Granted | Accepté | Cookies déposés, données complètes |
| Denied | Refusé | Pas de cookies, pings anonymisés (données modélisées par GA4) |
Pour approfondir les enjeux de conformité, consulte notre article sur RGPD et analytics.
Les erreurs à éviter
Publier sans tester. Toujours utiliser le mode Preview avant de publier un conteneur. Un tag mal configuré peut casser le tracking de tout le site, ou pire, déclencher une boucle de chargement qui ralentit les pages.
Trop de tags. Chaque tag est un script qui s'exécute au chargement. 5 tags bien configurés valent mieux que 30 tags dont la moitié sont obsolètes. Audite régulièrement et supprime les tags inutilisés.
Variables non testées. Une variable de dataLayer qui retourne undefined parce que le développeur a changé le format des données, c'est un tracking silencieusement cassé. Vérifie les variables dans le debugger après chaque mise à jour du site.
Pas de convention de nommage. Avec 20 tags, 15 triggers et 30 variables, ça devient vite le chaos. Adopte une convention : [Outil] — [Type] — [Description]. Exemple : "GA4 — Event — CTA Click", "FB — Pixel — Purchase".
FAQ
GTM ralentit-il le site ?
Le snippet GTM lui-même est léger (moins de 50 Ko). Ce sont les tags qu'il charge qui peuvent impacter la performance. Chaque tag tiers (Facebook Pixel, Hotjar, etc.) ajoute du poids. Limite le nombre de tags et utilise le chargement asynchrone (par défaut dans GTM).
Peut-on utiliser GTM sans développeur ?
Pour les configurations de base (GA4, pixels publicitaires, scroll tracking), oui. L'interface est visuelle et ne nécessite pas de code. Pour le dataLayer (e-commerce, événements personnalisés), un développeur est nécessaire pour pousser les données côté site.
GTM remplace-t-il le snippet GA4 ?
Non, il le gère. Au lieu d'insérer le snippet GA4 dans le code HTML, tu crées un tag GA4 dans GTM. Le résultat est le même (GA4 collecte les données), mais la gestion est centralisée dans GTM.
Combien de conteneurs GTM par site ?
Un seul. Installer plusieurs conteneurs GTM sur le même site est une source de conflits et de doublons de tracking. Si tu gères plusieurs sites, crée un conteneur par site dans le même compte GTM.
