GTM + GA4 ARCHITECTURE DIAGRAM

Complete Tracking Architecture for Your Website

Slim Laribi · Formation Data Driven ✦ Clique sur chaque bloc 6 nouvelles sections
👤
USER
Interacts with your website
🌐
WEBSITE
Pages load, user performs actions
📦
DATA LAYER
Data pushed to dataLayer
🏷️
GOOGLE TAG MANAGER
GTM collects, processes, fires tags
📊
GOOGLE ANALYTICS 4
Events sent to GA4 for reporting
💡
INSIGHTS & ACTIONS
Reports · Conversions · Audiences
1

Data Layer

détails →
Data pushed from website to dataLayer
// Clear + push ecommerce dataLayer.push({ecommerce:null}); dataLayer.push({ event: 'add_to_cart', ecommerce: { currency: 'EUR', value: 49.99, items: [{ item_id: '12345', item_name: 'Product', price: 49.99, quantity: 1 }] }, page_type: 'product' });
Common Variables
  • eventEvent type
  • page_typehome/product/cart
  • page_urlCurrent URL
  • user_typenew / returning
  • product_idProduct SKU
  • product_nameProduct title
  • priceItem price
  • valueTransaction value
  • items[ ]Products array
2

GTM Container Structure

détails →
2.1 Triggers
👁️Page View Triggers
PV - All Pages
PV - Home (Page Path=/)
PV - Product Page
PV - Category Page
🖱️Click Triggers
Click - Add to Cart
Click - Buy Now
Click - WhatsApp
Click - Banner
📜Scroll / Engagement
Scroll - 90%
Video - Play
Video - 50%
📋Form Triggers
Form Submit - Contact
Form Submit - Newsletter
2.2 Variables
📦Data Layer Variables
DL - event
DL - page_type
DL - product_id
DL - price
DL - currency
DL - value
🔧Built-in Variables
Page URL
Page Path
Page Title
Click Text
Click URL
Referrer
⚙️Custom Variables
Form Element
Video Status
Scroll Depth
2.3 Tags
⚙️GA4 Configuration Tag
GA4
GA4 - Config (All Pages)
📊GA4 Event Tags
GA4
GA4 - home_view
GA4 - view_item
GA4 - add_to_cart
GA4 - begin_checkout
GA4 - purchase
GA4 - whatsapp_click
GA4 - scroll_90
🎯Other Tags (Optional)
ADSMETARMKT
Google Ads Conversion
Meta Pixel Event
Floodlight Tag
3

GA4 Setup

détails →

3.1 Events

Auto + Enhanced Measurement + Custom from GTM
page_viewAuto
session_startAuto
user_engagementAuto
scrollAuto
view_itemCustom
add_to_cartCustom
purchase ★Conv.

3.2 Key Custom Events

home_view
add_to_cart
begin_checkout
purchase
whatsapp_click
call_click
scroll_90
page_404

3.3 Conversions

purchase ★ (Primary)
Dynamic value · 30-day window
begin_checkout
Secondary · Checkout intent signal
submit_form · whatsapp_click
Lead generation signals

3.4 Audiences

🔥 Add to Cart Users
add_to_cart without purchase · 7 days
👁️ Product Viewers
view_item · engaged users · 14 days
✅ Purchasers
purchase event · LTV · Lookalike base
2b

E-commerce Funnel Tracking

détails →
①
Product Impression
view_item_list
item_list_id items[]
②
Product Page
view_item
item_id item_name price
③
Add to Cart
add_to_cart
value currency items[]
④
View Cart
view_cart
value currency items[]
⑤
Begin Checkout
begin_checkout
value coupon items[]
⑥
Add Shipping
add_shipping_info
shipping_tier value
⑦
Add Payment
add_payment_info
payment_type value
⑧
Purchase ★
purchase
transaction_id value tax shipping items[]
4

Les 4 types d'events GA4

NEWdétails →
①

Automatiques

Sans aucune config. Dès l'install GA4.

session_start · first_visit
②

Mesure améliorée

Toggle ON dans GA4 Admin. Zéro GTM.

scroll · file_download
③

Recommandés

Nommage Google. Via GTM + dataLayer.

purchase · add_to_cart
④

Personnalisés

100% custom. Nommage libre via GTM.

page_404 · cta_click
5

Mesure améliorée — stratégie

NEWdétails →
Quoi garder · Quoi remplacer par GTM
page_view (SPA)Remplacer GTM
→ SPAs : push manuel à chaque route
scroll (90%)Remplacer GTM
→ Créer 25 / 50 / 75 / 90% custom
outbound clickRemplacer GTM
→ Ajouter page + position + id
file_downloadGarder
→ OK si extensions PDF/ZIP suffisent
video_* (YouTube)Garder
→ OK si uniquement iframes YouTube
view_search_resultsRemplacer GTM
→ Paramètre URL souvent incorrect
6

Consent Mode v2

NEWdétails →
Obligatoire Europe 2024 · Configuration GTM
🍪

CMP Banner (Cookiebot, Axeptio...)

Collecte le consentement user. Injecte les signaux dans dataLayer.

Requis
🏷️

Tag Consent Initialization

Se déclenche avant tous les tags. Définit l'état par défaut : denied.

Requis
📊

GA4 Config — mode consentement

Attend analytics_storage = granted pour envoyer les données.

Conditionnel
🔬

Modélisation comportementale

GA4 modélise les données des users sans consentement.

Automatique
7

Mode Debug — pas à pas

NEWdétails →
1

Activer GTM Preview

GTM → Aperçu. Saisir l'URL du site. Ouvre Tag Assistant dans un nouvel onglet.

2

Déclencher l'action sur le site

Clic, achat, scroll... L'event apparaît en temps réel dans Tag Assistant.

3

Vérifier le déclencheur

L'event est-il détecté ? Onglet "Tags" : tag en vert (fired) ou rouge (not fired)?

4

Vérifier les variables DLV

Onglet "Variables" : ecommerce.value est-il bien lu ? Valeur correcte ?

5

GA4 DebugView

GA4 → Admin → DebugView. L'event arrive avec les bons paramètres ?

8

Plan de marquage — Tagging Plan Template

NEWdétails →
CatégorieEvent GA4Déclencheur GTMVariables DLVTag GTMPriorité
EcommercepurchaseEvent custom "purchase"DL-value · DL-items · DL-currencyGA4 - purchase🔴 Critique
Ecommerceadd_to_cartClick - Add to CartDL-value · DL-itemsGA4 - add_to_cart🔴 Critique
Ecommercebegin_checkoutEvent custom "begin_checkout"DL-value · DL-itemsGA4 - begin_checkout🟠 Important
EngagementscrollScroll 25/50/75/90%Scroll Depth ThresholdGA4 - scroll🟠 Important
EngagementsearchEvent custom "search"DL-search_termGA4 - search🟡 Utile
Custompage_404Page Title contient "404"Page URL · ReferrerGA4 - page_404🟡 Utile
Customcta_clickClick Text contient CTAClick Text · Page Path · Click IDGA4 - cta_click🟡 Utile
9

Event & Naming Conventions

détails →
CategoryEvent NameUse Case
Ecommerceview_itemProduct page view
Ecommerceadd_to_cartAdd product to cart
Ecommercebegin_checkoutCheckout step started
Ecommerce ★purchaseOrder placed
Engagementhome_viewUser lands on homepage
Engagementscroll_90Scroll 90% on page
Interactionwhatsapp_clickClick on WhatsApp
Interactioncta_clickClick on CTA button
Custompage_404Error page detected
9b

GTM Naming Conventions

détails →
Triggers (Event – Condition)Tags (Platform – Event)
PV - All PagesGA4 - Config (All Pages)
PV - HomeGA4 - home_view
PV - Product PageGA4 - view_item
Click - Add to CartGA4 - add_to_cart
Click - WhatsAppGA4 - whatsapp_click
Scroll - 25/50/75/90%GA4 - scroll
Form Submit - ContactGA4 - submit_form
Variables — convention
DL - page_type DL - value DL - items Page URL Click Text
10

Best Practices

détails →
✓
Events standards en priorité
GA4 recommended events — compatibilité automatique des rapports.
✓
snake_case partout
Tous les events et params en snake_case. Pas d'espaces.
✓
Preview avant chaque publish
GTM Preview + GA4 DebugView. Toujours. Sans exception.
✓
dataLayer pour données dynamiques
Never scrape the DOM. Tout via dataLayer.push().
✓
Clear ecommerce avant chaque push
dataLayer.push(ecommerce: null) obligatoire avant chaque event.
✓
Audit mensuel du tracking
Tag Assistant + GA4 reports. Les bugs coûtent cher en décisions.
A

Tracking formulaires — 2 approches

NEWdétails →
✅ Approche 1 — Recommandée
Un seul event, paramètres différents
Même event generate_lead pour tous les forms. On distingue via form_type
event: 'generate_lead'
form_type: 'contact' | 'devis' | 'newsletter'
form_name: 'Formulaire Contact'
page_location: {{Page URL}}
⚡ Approche 2 — Objectifs différents
Events séparés par objectif business
Quand les formulaires ont des valeurs business radicalement différentes
'generate_lead' → contact / devis
'newsletter_signup' → inscription email
'form_submit' → formulaires génériques
Tableau de décision — quel event pour quel formulaire ?
FormulaireEvent recommandéform_typeConversion ?Priorité
Formulaire contactgenerate_leadcontact✅ Oui🔴 Critique
Demande de devisgenerate_leaddevis✅ Oui🔴 Critique
Newsletternewsletter_signupnewsletter🟡 Optionnel🟠 Important
Formulaire génériqueform_submitgeneric❌ Non🟡 Utile
Inscription comptesign_up—🟡 Optionnel🟠 Important
A2

GTM — config formulaires

NEWdétails →
Un tag GTM pour tous les forms
// Tag : GA4 - generate_lead Type : GA4 Event Event : generate_lead Config : {{GA4 - Config}} Paramètres : form_type → {{DLV - Form Type}} form_name → {{DLV - Form Name}} page_location → {{Page URL}}
Déclencheur
Type : Envoi de formulaire
Activer sur : Tous les formulaires
Ou filtrer par Form ID / Form Classes
⚠️ Activer variable intégrée :
Form ID · Form Classes · Form Target
B

Variables intégrées GTM — activer + utiliser

NEWdétails →
📄 Page
Page URL✅ Activer
→ GA4 param: page_location
Page Path✅ Activer
→ Chemin sans domaine
Page Title✅ Activer
→ GA4 param: page_title
Referrer✅ Activer
→ GA4 param: page_referrer
🖱️ Clic
Click Text✅ Activer
→ Texte du bouton cliqué
Click ID✅ Activer
→ Attribut id de l'élément
Click Classes✅ Activer
→ Classes CSS du clic
Click URL✅ Activer
→ Destination du lien cliqué
📜 Scroll
Scroll Depth Threshold✅ Activer
→ GA4 param: percent_scrolled
Scroll Depth Units✅ Activer
→ "percent" ou "pixels"
Scroll Direction✅ Activer
→ vertical / horizontal
Dans le tag GA4 scroll :
percent_scrolled → {{Scroll Depth Threshold}}
page_location → {{Page URL}}
📋 Formulaire
Form ID✅ Activer
→ Attribut id du form
Form Classes✅ Activer
→ Classes CSS du form
Form Target✅ Activer
→ Action URL du form
Form Text✅ Activer
→ Texte du bouton submit
📍 Où les activer dans GTM : GTM → Variables → Configurer → section "Clics" / "Formulaires" / "Défilement" → cocher chaque variable → Enregistrer
C

Paramètres recommandés par event — obligatoire vs optionnel

NEWdétails →
purchase ★
transaction_idObligatoireDLV
valueObligatoireDLV
currencyObligatoireDLV
items[ ]ObligatoireDLV
couponOptionnelDLV
tax / shippingOptionnelDLV
generate_lead / form_submit
form_typeObligatoireDLV
form_nameObligatoireDLV
page_locationObligatoireIntégrée
form_idOptionnelIntégrée
currencyOptionnelDLV
valueOptionnelDLV
scroll / cta_click / search
scroll
percent_scrolledObligatoireIntégrée
page_locationOptionnelIntégrée
cta_click
cta_textObligatoireIntégrée
cta_positionObligatoireDLV
search
search_termObligatoireDLV
D

Schéma de décision — quel event pour quelle action ?

NEWdétails →
Action utilisateur
→
Achat / Paiement
→
purchase ★
transaction_id · value · currency · items[]
Ajout panier
→
add_to_cart
value · currency · items[]
Formulaire soumis
→
generate_lead
form_type · form_name · page_location
Scroll page
→
scroll
percent_scrolled · page_location
Clic CTA
→
cta_click
cta_text · cta_position · page_location
Recherche site
→
search
search_term
Page erreur 404
→
page_404
page_location · page_referrer
Data Flow Summary
User Action
→
Website
→
dataLayer
→
GTM Trigger
→
GTM Variables
→
GA4 Event Tag
→
GA4
→
Reports & Insights
Legend
Data Source
Processing
Storage
Conversion ★
Best Practice
New Section