Google Universal Analytics est mort en juillet 2023. GA4 est désormais le standard, mais sa courbe d'apprentissage est plus raide. Sans implémentation propre via GTM, vous pilotez votre e-commerce à l'aveugle. Voici la stack qu'on déploie chez Kolonell sur tous les sites e-commerce africains.
TL;DR
- Setup : GA4 + GTM + dataLayer Next.js + Consent Mode v2.
- 8 événements e-commerce critiques à tracker.
- Conformité RGPD/CDP : Consent Mode + bandeau cookies.
- ROI : décisions data-driven dès le mois 2.
Architecture cible
`
[Site Next.js]
↓
[dataLayer.push(event)]
↓
[Google Tag Manager]
↓
[GA4 + Meta Pixel + autres]
↓
[Consent Mode v2 si user n'a pas accepté]
↓
[Reporting GA4 Explorations + Looker Studio]
`
Étape 1 — installer GTM
`tsx
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
{`
(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');
`}
height="0" width="0" style={{display: 'none', visibility: 'hidden'}} />
{children}
);
}
`
Étape 2 — Consent Mode v2 (RGPD/CDP)
`tsx
// components/ConsentManager.tsx
'use client';
import { useEffect } from 'react';
export function ConsentManager() {
useEffect(() => {
// Initialiser avec tout refusé par défaut
window.dataLayer = window.dataLayer || [];
function gtag(...args: any[]) { window.dataLayer.push(args); }
gtag('consent', 'default', {
ad_storage: 'denied',
analytics_storage: 'denied',
ad_personalization: 'denied',
ad_user_data: 'denied',
wait_for_update: 500,
});
// Si utilisateur a déjà accepté
const consent = localStorage.getItem('cookies-consent');
if (consent === 'all') {
gtag('consent', 'update', {
ad_storage: 'granted',
analytics_storage: 'granted',
ad_personalization: 'granted',
ad_user_data: 'granted',
});
}
}, []);
return null;
}
`
Mise à jour à l'acceptation cookies :
`tsx
function acceptCookies() {
localStorage.setItem('cookies-consent', 'all');
window.dataLayer.push(['consent', 'update', {
ad_storage: 'granted',
analytics_storage: 'granted',
ad_personalization: 'granted',
ad_user_data: 'granted',
}]);
}
`
Étape 3 — événements e-commerce GA4 critiques
view_item (page produit)
`tsx
// app/products/[slug]/page.tsx
'use client';
import { useEffect } from 'react';
export function ProductPageTracking({ product }) {
useEffect(() => {
window.dataLayer.push({
event: 'view_item',
ecommerce: {
currency: 'XOF',
value: product.price,
items: [{
item_id: product.sku,
item_name: product.name,
item_category: product.category,
item_brand: product.brand,
price: product.price,
quantity: 1,
Besoin d'un site web professionnel ?
Kolonell crée des sites web qui attirent des clients, optimisés pour le marché sénégalais. Devis gratuit en 2 minutes.
}],
},
});
}, [product.id]);
return null;
}
`
add_to_cart
`tsx
function handleAddToCart(product, quantity) {
window.dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: 'XOF',
value: product.price * quantity,
items: [{
item_id: product.sku,
item_name: product.name,
item_category: product.category,
price: product.price,
quantity,
}],
},
});
// Logique panier
addToCart(product, quantity);
}
`
begin_checkout
`tsx
function handleBeginCheckout(cart) {
window.dataLayer.push({
event: 'begin_checkout',
ecommerce: {
currency: 'XOF',
value: cart.totalAmount,
items: cart.items.map(i => ({
item_id: i.sku,
item_name: i.name,
price: i.price,
quantity: i.qty,
})),
},
});
}
`
purchase (le plus important)
`tsx
// Sur page de confirmation, après le webhook IPN
function trackPurchase(order) {
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: order.id,
value: order.totalAmount,
currency: 'XOF',
tax: order.tax,
shipping: order.shipping,
items: order.items.map(i => ({
item_id: i.sku,
item_name: i.name,
price: i.price,
quantity: i.qty,
})),
},
});
}
`
Autres événements clés
| Event | Quand |
|---|---|
| view_item_list | Affichage catégorie |
| select_item | Click sur produit dans une liste |
| view_cart | Visite page panier |
| remove_from_cart | Suppression panier |
| add_payment_info | Sélection mode paiement |
| add_shipping_info | Saisie adresse livraison |
| sign_up | Création compte |
Étape 4 — configuration GTM
Dans GTM (tagmanager.google.com) :
- Créer un tag GA4 Configuration avec votre Measurement ID
- Pour chaque événement e-commerce :
- Trigger : Custom Event matching
event - Tag : GA4 Event, send dataLayer
Variables custom à créer :
- ecommerce.value
- ecommerce.currency
- ecommerce.transaction_id
- ecommerce.items
Étape 5 — server-side tagging (optionnel, recommandé)
GTM Server-Side réduit la dépendance aux ad-blockers et améliore la qualité des données :
`yaml
# docker-compose.yml — GTM Server hosted
services:
gtm-server:
image: gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable
ports:
- "8080:8080"
environment:
- CONTAINER_CONFIG=...
`
Coût : 5-15 €/mois en hébergement.
Étape 6 — reporting Looker Studio
Connecter GA4 à Looker Studio (gratuit) pour des dashboards custom :
- Dashboard funnel : add_to_cart → begin_checkout → purchase
- Dashboard cohortes : valeur client à 30/60/90 jours
- Dashboard sources : ROI par canal (organic, social, paid, email)
- Dashboard produits : top SKU, marge réelle
Pièges fréquents
- dataLayer push avant que GTM soit chargé — utiliser script GTM
afterInteractive. - Doublons
purchase— ne tracker QUE sur page confirmation, jamais sur paiement initié (souvent 2x). - Currency oublié — sans
currency, GA4 ignore certains rapports. - Client_id incohérent — pour user logged in, passer
user_idGA4 explicitement. - Spam bot trafic — filtrer dans GA4 Settings → Data Filters.
Cas réel — boutique mode Dakar
Avant GA4 + GTM propre :
- Pilotage à l'estime
- Aucune attribution canaux
- Data Meta Ads non remontée
Après implémentation (1 semaine) :
- Funnel visible : 100 % paniers ajoutés → 32 % checkout → 14 % purchase
- Sources : Email 24 %, Organic 41 %, Paid 15 %, Direct 20 %
- ROI Meta Ads visible : 4.2x sur les campagnes acquisition
- Décisions data-driven : ROI Ads doublé à 6 mois
FAQ
Q : GA4 vs Plausible / Fathom ?
R : Plausible/Fathom = simples, light, RGPD-friendly. Mais sans tracking e-commerce avancé. GA4 = standard pour e-commerce sérieux.
Q : Conformité CDP Sénégal ?
R : Consent Mode v2 + bandeau cookies + déclaration CDP du traitement = conforme. Voir guide RGPD + loi 2008-12 →.
Q : Server-side worth it ?
R : Pour > 50K visites/mois et 5+ tags actifs : oui. Sinon, client-side suffit.
Conclusion
GA4 + GTM bien configuré = lunettes claires sur votre e-commerce. 1 semaine d'implémentation initiale + 2-3h de maintenance/mois. Le retour : décisions data-driven sur acquisition, conversion, retention. Sans ça, vous restez en mode "je crois que ça marche" — inadmissible en 2026.
Mohamed Bah
Fondateur, Kolonell
Passionné par le digital et l'entrepreneuriat en Afrique, Mohamed accompagne les entreprises sénégalaises dans leur transformation digitale depuis 2020. Fondateur de Kolonell, il croit que chaque PME mérite une présence en ligne professionnelle et accessible.

