Google Universal Analytics died in July 2023. GA4 is now the standard but its learning curve is steeper. Without clean GTM implementation, you fly your e-commerce blind. Here's the stack we deploy at Kolonell on every African e-commerce site.
TL;DR
- Setup: GA4 + GTM + Next.js dataLayer + Consent Mode v2.
- 8 critical e-commerce events to track.
- GDPR/CDP compliance: Consent Mode + cookie banner.
- ROI: data-driven decisions from month 2.
Target architecture
`
[Next.js site]
↓
[dataLayer.push(event)]
↓
[Google Tag Manager]
↓
[GA4 + Meta Pixel + others]
↓
[Consent Mode v2 if user hasn't accepted]
↓
[GA4 Explorations + Looker Studio reporting]
`
Step 1 — install GTM
`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}
);
}
`
Step 2 — Consent Mode v2 (GDPR/CDP)
`tsx
'use client';
import { useEffect } from 'react';
export function ConsentManager() {
useEffect(() => {
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,
});
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;
}
`
Update on cookie acceptance:
`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',
}]);
}
`
Step 3 — critical GA4 e-commerce events
view_item (product 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,
}],
Need a professional website?
Kolonell builds websites that attract clients, optimized for the Sénégalese market. Free quote in 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,
}],
},
});
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 (most important)
`tsx
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,
})),
},
});
}
`
Other key events
| Event | When |
|---|---|
| view_item_list | Category display |
| select_item | Click on product in a list |
| view_cart | Visit cart page |
| remove_from_cart | Cart removal |
| add_payment_info | Payment method selection |
| add_shipping_info | Shipping address entry |
| sign_up | Account creation |
Step 4 — GTM configuration
In GTM (tagmanager.google.com):
- Create a GA4 Configuration tag with your Measurement ID
- For each e-commerce event:
- Trigger: Custom Event matching
event - Tag: GA4 Event, send dataLayer
Custom variables to create:
- ecommerce.value
- ecommerce.currency
- ecommerce.transaction_id
- ecommerce.items
Step 5 — server-side tagging (optional, recommended)
Server-Side GTM cuts ad-blocker dependency and improves data quality:
`yaml
services:
gtm-server:
image: gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable
ports:
- "8080:8080"
environment:
- CONTAINER_CONFIG=...
`
Cost: €5-15/month hosting.
Step 6 — Looker Studio reporting
Connect GA4 to Looker Studio (free) for custom dashboards:
- Funnel dashboard: add_to_cart → begin_checkout → purchase
- Cohort dashboard: customer value at 30/60/90 days
- Source dashboard: ROI per channel (organic, social, paid, email)
- Product dashboard: top SKU, real margin
Common pitfalls
- dataLayer push before GTM loads — use
afterInteractiveGTM script. - Duplicate
purchase— track ONLY on confirmation page, never on payment initiated (often 2x). - Forgotten currency — without
currency, GA4 drops some reports. - Inconsistent client_id — for logged-in users, pass GA4
user_idexplicitly. - Bot traffic — filter in GA4 Settings → Data Filters.
Real case — Dakar fashion shop
Before clean GA4 + GTM:
- Gut-feel piloting
- No channel attribution
- Meta Ads data not surfaced
After implementation (1 week):
- Visible funnel: 100% carts added → 32% checkout → 14% purchase
- Sources: Email 24%, Organic 41%, Paid 15%, Direct 20%
- Visible Meta Ads ROI: 4.2× on acquisition campaigns
- Data-driven decisions: 2× Ads ROI at 6 months
FAQ
Q: GA4 vs Plausible / Fathom?
A: Plausible/Fathom = simple, light, GDPR-friendly. But no advanced e-commerce tracking. GA4 = standard for serious e-commerce.
Q: Senegal CDP compliance?
A: Consent Mode v2 + cookie banner + CDP processing declaration = compliant. See GDPR + Law 2008-12 guide →.
Q: Server-side worth it?
A: For >50K visits/month and 5+ active tags: yes. Otherwise, client-side enough.
Conclusion
Properly configured GA4 + GTM = clear glasses on your e-commerce. 1 week initial implementation + 2-3h/month maintenance. Return: data-driven decisions on acquisition, conversion, retention. Without it, you stay in "I think it works" mode — unacceptable in 2026.
Mohamed Bah
Fondateur, Kolonell
Passionate about digital and entrepreneurship in Africa, Mohamed has been helping Sénégalese businesses with their digital transformation since 2020. Founder of Kolonell, he believes every SME deserves a professional and accessible online présence.

