Google Tag Manager : tracking et événements web

Google-Tag-Manager Gtm Analytics Tracking Google-Analytics Ga4 Events Conversions Marketing-Digital Data-Layer Tags Triggers No-Code Rgpd

Implémentez Google Tag Manager pour tracker événements, conversions et comportements utilisateurs sans modifier votre code source : guide complet GTM.

Pourquoi Google Tag Manager?

GTM permet: Ajouter et modifier du code de suivi SANS accès au code source. Idéal pour les équipes non-techniques.

Avantages

Pas de modification du code source (HTML/JS)
Gestion centralisée des tags (GA4, Facebook Pixel, Hotjar, etc.)
Versioning et rollback facile
Audits et historique complets
Publiable en 1 clic sans déploiement
Déclencheurs avancés (sur événement, sur scroll, temps, etc.)

Comparaison: Code direct vs GTM

SANS GTM (code direct):
- Ajouter Google Analytics directement en HTML
- Risque d'erreurs si mauvaise manipulation
- Nécessite redéploiement du site

AVEC GTM (recommandé):
- Un seul code GTM inséré en HTML
- Tous les autres tags gérés depuis GTM
- Publiable instantanément
- Plus sûr et plus flexib

Configuration initiale

Créer un compte GTM

1. Visite tagmanager.google.com
2. Clique sur "Créer un compte"
3. Renseigne:
   - Nom du compte (ex: "Mon Entreprise")
   - Pays
   - Nom du conteneur (ex: "Mon Site Web")
   - Type de conteneur: "Web"
4. Accepte les conditions et crée

Obtenir l'ID de conteneur

Après création, tu reçevras un ID de conteneur au format:

GTM-XXXXXX

Espaces de travail

Default workspace: Espace principal
Versions: Snapshots du conteneur publiés
Historique: Toutes les modifications passées

Installer le code GTM

Code à ajouter au site

Ajoute ce code dans la section <head> de CHAQUE page HTML:

<!-- Google Tag Manager -->
<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=GTM-XXXXXX'+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Code noscript (après <body>)

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Vérifier l'installation

1. Ouvre DevTools (F12)
2. Va sur "Réseau" ou "Console"
3. Cherche les requêtes "/gtm.js"
4. GTM > Aperçu > Vérifier le trafic en temps réel

Créer des tags

Exemple 1: Tag Google Analytics 4

GTM > Tags > Nouveau
1. Type: Google Analytics: GA4 Configuration
2. Configuration:
   - Meting ID: G-XXXXXXXXXX (ton ID GA4)
   - Envoi de page:Activé
3. Déclenché par: Page View (All Pages)
4. Enregistrer et publier

Exemple 2: Tag événement personnalisé

GTM > Tags > Nouveau
1. Type: Google Analytics: GA4 Event
2. Configuration:
   - Meting ID: G-XXXXXXXXXX
   - Nom événement: button_click
   - Paramètres:
     * button_id: {{buttonId}}
     * button_label: {{buttonLabel}}
3. Déclenché par: custom trigger (ex: "Click - Subscribe Button")
4. Enregistrer et publier

Exemple 3: Tag Facebook Pixel

GTM > Tags > Nouveau
1. Type: Custom HTML
2. Code:
   <img height="1" width="1" style="display:none"
   src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1" />
3. Déclenché par: All Pages
4. Enregistrer

Définir les déclencheurs

Trigger: Page View

GTM > Déclencheurs > Nouveau
- Type: Page View
- Déclenche sur: Toutes les pages
(Utile pour: GA4 config, tags globaux)

Trigger: Click sur élément

GTM > Déclencheurs > Nouveau
- Type: Click - All Elements
- Condition:
  * Click Element matches CSS selector: #subscribe-btn
  * Wait for Tags: 1000 ms
(Utile pour: CTA buttons, formulaires)

Trigger: Scroll

GTM > Déclencheurs > Nouveau
- Type: Scroll Depth
- Vertical Scroll Depth: 50%
(Utile pour: Engagement, lecture d'article)

Trigger: Vue du formulaire

GTM > Déclencheurs > Nouveau
- Type: Form Submission
- Condition:
  * Form ID = "contact-form"
(Utile pour: Conversions, leads)

Trigger: Événement personnalisé

GTM > Déclencheurs > Nouveau
- Type: Custom Event
- Event name: user_signup
- Déclenche quand cet événement est envoyé

// Depuis ton code:
dataLayer.push({
  event: 'user_signup',
  user_plan: 'premium'
});

Utiliser les variables

Variables intégrées

- Page URL
- Page Title
- Referrer
- Event
- Click Element
- Click ID
- Click Classes
- Form ID
- Form Element Name

Créer une variable personnalisée (Data Layer)

GTM > Variables > Nouvelle variable
1. Type: Variable de couche de données
2. Nom de clé de couche de données: user_type
3. Enregistrer

// Depuis ton code:
dataLayer.push({
  'event': 'user_login',
  'user_type': 'premium'
});

Utiliser une variable dans un tag

// Dans un tag GA4, paramètre:
user_id: {{userId}}
user_plan: {{userPlan}}

// Ces variables sont remplacées à l'exécution

Publier et tester

Mode Aperçu & Debug

1. GTM > Aperçu
2. Renseigne l'URL du site
3. La page s'ouvre avec un panneau debug
4. Fais des actions (clics, scrolls, formulaires)
5. Visualise les tags décenchés en temps réel

Publier une version

1. Révise tous tes tags/déclencheurs
2. Clique sur "Soumettre" (haut à droite)
3. Ajoute une description de version
4. Clique sur "Publier"
5. Version en ligne quelques secondes après

Rollback (revenir à l'ancienne version)

GTM > Versions et versions
- Sélectionne une version précédente
- Clique sur "Publier"
(Utile si une tag cause un problème)

Bonnes pratiques

1. Convention de nommage

Tags:
- GA4 - {{nom de l'événement}}
- FB - {{nom du pixel}}

Déclencheurs:
- click - {{selecteur CSS ou ID}}
- scroll - {{profondeur}}
- form - {{form ID}}

Variables:
- userId
- userPlan
- pageCategory

2. Documenter les tags

Ajouter des notes avant de publier
Dire pourquoi le tag existe
Lister les partenaires/dépendances

3. Tester avant de publier

Toujours utiliser le mode Aperçu
Tester tous les cas (clic, scroll, formulaire)
Vérifier que GA4 reçoit les données

4. Gérer les accès

GTM > Administration > Accès
- Propriétaire: Tous les droits
- Éditeur: Peut créer/modifier tags
- Lecteur: Peut voir les rapports
- Gestionnaire de publication: Peut publier

5. Éviter les conflits

Pas 2 tags avec le même déclencheur qui font la même chose
Éviter les tags qui chargent des scripts lourds
Tester la performance du site

Accéder au site officiel →

Questions fréquentes

Google Analytics 4 (GA4) est l'outil d'analyse qui collecte et visualise les données (trafic, conversions, comportement). Google Tag Manager (GTM) est un gestionnaire de balises qui déploie des scripts (dont GA4) sur votre site sans modifier le code source. GTM permet d'ajouter, modifier et supprimer des tags (GA4, Facebook Pixel, LinkedIn Insight, Hotjar...) via une interface web sans intervention des développeurs. Avec GTM, vous n'avez qu'un seul code à intégrer dans votre HTML, puis tout se gère depuis l'interface GTM.

Installation GTM : (1) créez un compte sur tagmanager.google.com et un conteneur pour votre site, (2) copiez le snippet GTM (deux parties) — le premier script va dans le , le second va juste après l'ouverture du , (3) publiez une version de votre conteneur GTM, (4) vérifiez l'installation avec l'extension Chrome "Tag Assistant" ou le mode Aperçu GTM. En Angular, installez le tag GTM dans index.html ou utilisez le package ngx-gtm pour l'intégration dynamique.

Pour tracker les clics sans code : dans GTM, créez un déclencheur "Clic — Tous les éléments" et filtrez par classe CSS ou ID (par ex. classe "btn-download"). Créez un tag GA4 Event avec event_name "click_cta" et les paramètres souhaités. Pour les formulaires, utilisez le déclencheur "Envoi de formulaire". Pour les clics sur des éléments spécifiques, utilisez "Clic — Lien" ou configurez des variables de couche de données (dataLayer) pour transmettre des données dynamiques depuis votre code.

GTM propose un mode Aperçu (Preview) intégré : cliquez "Aperçu" dans l'interface GTM, entrez l'URL de votre site, et un panneau de débogage s'ouvre en bas de page affichant tous les tags déclenchés et non déclenchés pour chaque interaction. L'extension Chrome "Google Tag Assistant" fournit également un tableau de bord de validation en temps réel. Vérifiez dans GA4 → Rapports en temps réel → Événements que vos événements arrivent correctement. Ne publiez jamais une nouvelle version GTM sans valider en mode Aperçu.

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.