Declencheur : History Change
Ce qu'on va faire sur cette page
Le declencheur History Change fire quand l'URL change SANS rechargement de page (SPA, tabs, filtres). C'est ce qui se passe avec React, Vue, Angular, ou simplement un history.pushState().
- Ouvrir GTM Preview
- Cliquer sur les onglets ci-dessous
- Observer que l'URL change dans la barre d'adresse SANS rechargement
- Voir les events "History" dans le Summary GTM
- Comparer avec un Page View classique
Mini SPA - les onglets changent l'URL sans recharger la page
Vue d'ensemble
Contenu de l'onglet "Vue d'ensemble". Regarde l'URL dans la barre d'adresse - elle contient ?tab=overview.
Quand tu cliques sur un autre onglet, l'URL change via history.pushState() et GTM detecte ce changement avec le trigger History Change.
pushState et variables History Change
// Ce que fait le code quand on clique sur un onglet :
history.pushState({ tab: "analytics" }, "", "?tab=analytics");
// GTM detecte ce changement et fire le trigger History Change
// avec ces variables :
// History Source -> "pushState" (ou "popstate" pour back/forward)
// New History State -> { tab: "analytics" }
// Old History State -> { tab: "overview" }
// New URL Fragment -> (le hash #, si utilise)
// Old URL Fragment -> (ancien hash)
Tracker les pages d'une SPA avec History Change
// Configuration GTM pour tracker les "pages" d'une SPA :
// Trigger : History Change
// (pas de filtre - fire a chaque changement d'URL)
// Tag GA4 Event :
// Event name : page_view (oui, on renvoie un page_view !)
// Parametres :
// page_location = {{Page URL}} (variable built-in, mise a jour automatiquement)
// page_title = {{Page Title}}
// Pourquoi renvoyer un page_view ?
// Parce que GA4 ne detecte pas automatiquement les changements d'URL
// dans les SPA. Sans ce setup, GA4 ne voit qu'UNE seule page vue
// (la page initiale) meme si l'utilisateur navigue dans l'app.Attention
Le History Change fire aussi quand l'utilisateur utilise les boutons Precedent/Suivant du navigateur. Pense a filtrer si besoin avec la variable History Source (pushState vs popstate).