Google Tag Manager : tracking et événements

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