Comment utiliser Google Tag Manager pour le tracking

Google Tag Manager : pourquoi c’est indispensable

Google Tag Manager (GTM) est un outil gratuit qui vous permet d’installer tous vos codes de tracking (Google Analytics, Facebook Pixel, TikTok Pixel, etc.) depuis une seule interface, sans toucher au code de votre site. Sans GTM, chaque nouvel outil de tracking nécessite de modifier votre thème WordPress. Avec GTM, vous ajoutez et modifiez vos tags en quelques clics.

Ce tutoriel couvre l’installation de GTM sur WordPress, la configuration de Google Analytics 4, le Facebook Pixel, et le suivi e-commerce WooCommerce.

Étape 1 : Créer un compte Google Tag Manager

1. Allez sur tagmanager.google.com
2. Connectez-vous avec votre compte Google
3. Cliquez sur Créer un compte
4. Nom du compte : le nom de votre entreprise
5. Pays : Sénégal
6. Nom du conteneur : votre nom de domaine (votresite.sn)
7. Plateforme cible : Web
8. Acceptez les conditions d’utilisation

Vous obtenez un ID de conteneur au format GTM-XXXXXXX. Notez-le.

Étape 2 : Installer GTM sur WordPress

Méthode recommandée : plugin GTM4WP

1. Dans WordPress : Extensions > Ajouter > Rechercher « GTM4WP »
2. Installez « GTM4WP – Google Tag Manager for WordPress » de Thomas Geiger
3. Activez le plugin
4. Allez dans Réglages > Google Tag Manager
5. Entrez votre ID de conteneur (GTM-XXXXXXX)
6. Emplacement du code : « Custom coded » ou « Footer » (le plugin gère tout)
7. Sauvegardez

Configuration WooCommerce dans GTM4WP

Dans les réglages de GTM4WP, onglet Intégration :

• Cochez WooCommerce
• Activez « Track e-commerce events »
• Sélectionnez « GA4 » comme format de données
• Activez les événements : view_item, add_to_cart, begin_checkout, purchase

GTM4WP injecte automatiquement les données e-commerce dans le dataLayer de GTM. Vous n’avez rien à coder.

Étape 3 : Configurer Google Analytics 4 via GTM

Créer le tag GA4

1. Dans GTM, allez dans Tags > Nouveau
2. Nom : « GA4 – Configuration »
3. Type de tag : Google Analytics : Configuration GA4
4. ID de mesure : G-XXXXXXXX (trouvé dans GA4 > Administration > Flux de données)
5. Déclencheur : All Pages
6. Sauvegardez

Ajouter le suivi e-commerce GA4

1. Créez un nouveau tag : GA4 – E-commerce Events
2. Type : Google Analytics : Événement GA4
3. Tag de configuration : sélectionnez votre tag GA4 Configuration
4. Nom de l’événement : {{Event}} (variable intégrée)
5. Paramètres d’événement : cochez « Envoyer les données de commerce électronique »

Créez un déclencheur personnalisé pour chaque événement e-commerce :

Déclencheur : Événement personnalisé
Nom de l'événement : add_to_cart

Déclencheur : Événement personnalisé
Nom de l'événement : begin_checkout

Déclencheur : Événement personnalisé
Nom de l'événement : purchase

Étape 4 : Installer le Facebook Pixel via GTM

Le Facebook Pixel est essentiel pour les publicités Facebook/Instagram, très utilisées au Sénégal.

Récupérer votre Pixel ID

1. Dans Facebook Business Suite : Paramètres > Sources de données > Pixels
2. Copiez votre Pixel ID (format : 123456789012345)

Créer le tag Facebook Pixel dans GTM

1. Dans GTM : Tags > Nouveau
2. Type de tag : HTML personnalisé
3. Nom : « Facebook Pixel – PageView »
4. Collez le code suivant :

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'VOTRE_PIXEL_ID');
  fbq('track', 'PageView');
</script>

Déclencheur : All Pages

Tracking des événements e-commerce Facebook

Créez des tags supplémentaires pour les événements clés :

<!-- Tag : FB Pixel - AddToCart -->
<script>
  fbq('track', 'AddToCart', {
    content_ids: [{{dlv - ecommerce.items.0.item_id}}],
    content_type: 'product',
    value: {{dlv - ecommerce.value}},
    currency: 'XOF'
  });
</script>

<!-- Tag : FB Pixel - Purchase -->
<script>
  fbq('track', 'Purchase', {
    value: {{dlv - ecommerce.value}},
    currency: 'XOF',
    content_type: 'product'
  });
</script>

Étape 5 : Tester et publier

Mode aperçu (essentiel)

1. Dans GTM, cliquez sur Aperçu en haut à droite
2. Entrez l’URL de votre site
3. Un panneau de débogage s’ouvre en bas de votre site
4. Naviguez sur votre site : ajoutez un produit au panier, allez au checkout
5. Vérifiez que chaque tag se déclenche au bon moment

Vérifications complémentaires

• GA4 Debug View : dans Google Analytics > Administration > DebugView, vérifiez que les événements arrivent en temps réel
• Facebook Pixel Helper : extension Chrome qui vérifie que le Pixel se déclenche correctement
• Tag Assistant : extension Google pour vérifier GTM et GA4

Publier

Une fois tout testé, cliquez sur Soumettre dans GTM, nommez votre version (« V1 – GA4 + FB Pixel + Ecommerce »), et publiez.

Événements avancés à tracker

Bonnes pratiques GTM

• Nommez clairement vos tags : « GA4 – E-commerce – Purchase » plutôt que « Tag 1 »
• Utilisez des dossiers : organisez par plateforme (Google, Facebook, TikTok)
• Testez TOUJOURS en aperçu avant de publier
• Versionnez : chaque publication crée une version. Si quelque chose casse, revenez en arrière
• Un seul GTM par site : ne mélangez pas GTM avec des codes de tracking collés manuellement dans le header
• Vérifiez l’impact sur la vitesse : trop de tags ralentissent votre site. Supprimez ceux que vous n’utilisez plus

Pour étoffer le tableau

• Mesurer le ROI de vos campagnes
• Analyser vos statistiques Facebook/Instagram
• Le remarketing — recibler vos visiteurs
• Première campagne Facebook Ads
• Centre d’aide Google Tag Manager
• Plugin GTM4WP — site officiel

Comprendre ce que GTM apporte vraiment a un site ouest-africain

Google Tag Manager (GTM) est un gestionnaire de tags qui s’intercale entre votre site et l’ensemble des outils de mesure (Google Analytics 4, Meta Pixel, conversion Ads, IndexNow). Au lieu d’editer le theme WordPress ou le code source pour chaque ajout, vous declarez le tag une seule fois dans GTM et il se deploie en production sans toucher au code. Pour une boutique en ligne basee a Dakar ou un media a Cotonou, cela signifie : moins d’aller-retour avec le developpeur, moins de risque de casse, et une mesure unifiee.

L’autre interet est local : la majorite du trafic ouest-africain vient de mobile bas de gamme sur reseau 3G/4G inegal. Charger 5 scripts de tracking en direct sature la page. GTM permet de differer, conditionner ou desactiver les tags non essentiels et de gagner facilement 0,5 a 1,5 seconde de Largest Contentful Paint sur Tecno ou Itel.

Etape 1 — Creer un compte GTM et un conteneur Web

Rendez-vous sur tagmanager.google.com avec votre compte Google professionnel. Creez un compte au nom de votre entreprise, puis un conteneur de type Web. Ne mutualisez jamais plusieurs sites dans un meme conteneur : un par domaine, c’est la regle d’hygiene.

# Convention de nommage recommandee
Compte    : Mon Entreprise SARL
Conteneur : monsite.sn (Web)
Workspace : Default Workspace

GTM genere immediatement deux extraits de code : un <script> a placer dans le <head>, un <noscript> juste apres l’ouverture du <body>. Notez votre identifiant GTM-XXXXXXX, il vous suivra partout. Sans installation correcte de ces deux extraits, aucun tag ne se declenchera, meme parfaitement configure dans l’interface.

Etape 2 — Installer GTM sur WordPress sans casser le theme

N’editez jamais directement header.php du theme principal : la prochaine mise a jour ecrasera vos modifications. Trois approches propres existent.

# Option A : plugin dedie (recommande pour debutants)
- Site Kit by Google (officiel, gratuit)
- GTM4WP (puissant, datalayer e-commerce inclus)

# Option B : theme enfant (developpeur a l'aise avec PHP)
wp-content/themes/parent-child/functions.php
add_action('wp_head', 'inject_gtm_head');
add_action('wp_body_open', 'inject_gtm_body');

# Option C : insertion via header personnalise du theme
Apparence > Personnaliser > Code d'en-tete

Apres installation, ouvrez votre site en navigation privee. L’extension Tag Assistant Companion doit detecter le conteneur GTM-XXXXXXX en moins de 2 secondes. Si non detecte, le script n’est pas charge ou est bloque par un cache LiteSpeed/Rocket trop agressif : purgez le cache et revalidez.

Etape 3 — Activer le mode previsualisation pour tester

Dans GTM, le bouton « Previsualiser » en haut a droite ouvre Tag Assistant. Saisissez l’URL de votre site, validez. Une nouvelle fenetre s’ouvre sur votre site avec un bandeau de connexion. La fenetre Tag Assistant affiche en temps reel chaque tag declenche, chaque variable lue, chaque evenement capture.

Cette etape est non negociable : ne publiez JAMAIS un tag en production sans l’avoir vu se declencher dans Tag Assistant au moins une fois. Cinq minutes de previsualisation evitent des semaines de donnees corrompues dans GA4.

Etape 4 — Installer Google Analytics 4 via GTM

GA4 a remplace Universal Analytics depuis juillet 2023. Recuperez votre ID de mesure (G-XXXXXXXXXX) dans Admin > Flux de donnees de votre propriete GA4. Dans GTM, creez un nouveau tag.

# Configuration du tag GA4
Type de tag       : Google Analytics : evenement GA4 (config)
Mesurement ID     : G-XXXXXXXXXX
Declencheur       : All Pages (Initialization - All Pages)
Nom du tag        : GA4 - Configuration globale

Sauvegardez, repassez en mode previsualisation, rechargez le site. Dans Tag Assistant, vous devez voir « GA4 – Configuration globale » apparaitre des le chargement. Ouvrez ensuite GA4 > Rapports > Temps reel : votre session doit apparaitre dans les 30 secondes. Si rien, verifiez l’ID, la presence d’un AdBlock dans votre navigateur et la zone geographique declaree dans GA4.

Etape 5 — Tracker les clics importants avec des declencheurs personnalises

L’interet de GTM eclate sur les evenements personnalises. Suivons par exemple les clics sur le bouton WhatsApp flottant, frequent sur les sites ouest-africains. Creez d’abord un declencheur de type « Clic – Lien uniquement », filtre sur l’URL contenant « wa.me ».

# Declencheur GTM
Type        : Clic - Liens uniquement
Conditions  : Click URL contains wa.me
Nom         : CLIC - WhatsApp flottant

# Tag d'envoi vers GA4
Type             : Google Analytics : evenement GA4
Mesurement ID    : G-XXXXXXXXXX
Event Name       : whatsapp_click
Parametres event : page_path = {{Page Path}}, link_url = {{Click URL}}
Declencheur      : CLIC - WhatsApp flottant

Apres publication, vous suivrez dans GA4 > Engagement > Evenements le nombre exact de clics WhatsApp par page. Vous devriez obtenir en debut de mois : un classement clair des pages qui generent le plus de contact, donnee directement actionnable pour optimiser les CTAs.

Etape 6 — Mettre en place un dataLayer pour les evenements e-commerce

Pour une boutique WooCommerce ou un site de formation avec paiement, le dataLayer est l’objet JavaScript ou vous deposez les evenements business : ajout panier, debut commande, achat valide. GTM lit ce dataLayer et expedie les evenements vers GA4 ou Meta.

// A pousser apres une commande validee
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "purchase",
  transaction_id: "CMD-2026-00482",
  value: 25000,        // en FCFA
  currency: "XOF",
  items: [{ item_id: "FORM-CYBER-01", item_name: "Formation cybersecurite", price: 25000, quantity: 1 }]
});

Cote GTM, creez un declencheur de type « Evenement personnalise » avec event = purchase, et un tag GA4 evenement de type « purchase » qui mappe les variables item_id, value, currency. Le plugin GTM4WP gere automatiquement ce dataLayer pour WooCommerce sans une ligne de code.

Etape 7 — Bannieres de consentement et Consent Mode v2

L’Afrique de l’Ouest n’impose pas un RGPD strict, mais Google exige depuis 2024 le Consent Mode v2 pour exploiter pleinement Google Ads et la mesure consentie. Installez une CMP (Consent Management Platform) gratuite : Cookiebot Free, Iubenda free tier, ou Complianz pour WordPress.

# Variables Consent Mode obligatoires
ad_storage          : granted | denied
analytics_storage   : granted | denied
ad_user_data        : granted | denied
ad_personalization  : granted | denied

Reglez par defaut tout en « denied », et basculez en « granted » seulement apres clic explicite sur « Accepter » dans le bandeau cookies. GTM expose une fonction gtag('consent', 'update', {...}) dont vous pouvez declencher l’execution via un tag HTML personnalise lie au clic d’acceptation.

Etape 8 — Publier en production et documenter chaque version

Ne quittez jamais GTM sans publier votre workspace. Dans le coin superieur droit, cliquez « Envoyer », nommez la version (ex : « v1.3 – ajout tracking WhatsApp + purchase WooCommerce »), ajoutez une description claire, validez. GTM cree alors un snapshot versionne et le rend public sur tous les visiteurs.

Tenez un journal externe (Notion, Google Doc, README dans Git) ou vous notez chaque version : date, auteur, motif, tags ajoutes/supprimes. En cas de probleme, vous restaurez en un clic une version anterieure. Cette discipline simple evite des heures de debogage trois mois plus tard quand un chiffre GA4 deviendra incoherent et que personne ne se souviendra de la modification responsable.