Comment tracker une Single Page Application (SPA) ?

Le défi des SPA pour l’analytics

Les Single Page Applications (React, Vue, Angular, Next.js, Nuxt) ne rechargent pas la page lors de la navigation. Le contenu est mis à jour dynamiquement via JavaScript et les changements d’URL passent par l’API History (pushState, replaceState). Or, le tracking analytics traditionnel repose sur l’événement de chargement de page pour déclencher un page_view. Sans adaptation, GA4 ne voit qu’une seule page vue par session, quelle que soit la navigation de l’utilisateur.

GA4 avec gtag.js gère partiellement ce problème grâce à la mesure améliorée, qui écoute les événements de l’API History et envoie un page_view à chaque changement d’URL. Cependant, cette détection automatique peut échouer dans certains cas : transitions trop rapides, mise à jour de l’URL après le rendu du contenu, ou frameworks qui utilisent des mécanismes de navigation non standards.

Implémentation avec GTM

Pour un contrôle total, désactivez la mesure améliorée des page_view dans GA4 et gérez-les via GTM. Deux approches sont possibles. La première consiste à utiliser le déclencheur natif “Changement d’historique” de GTM, qui détecte les modifications de l’URL via l’API History. La seconde, plus fiable, consiste à pousser un événement dans le data layer depuis le code du framework à chaque changement de route (dataLayer.push({event: ‘virtual_page_view’, page_path: ‘/nouvelle-page’})).

Dans les deux cas, configurez une balise GA4 Event de type page_view déclenchée par cet événement, avec les paramètres page_location et page_title mis à jour dynamiquement.

Pièges courants et solutions

Le timing est le piège principal : le data layer push doit intervenir après la mise à jour du titre et de l’URL, sinon GA4 enregistre les valeurs de la page précédente. Dans React, placez le push dans un useEffect après le rendu. Dans Vue, utilisez le guard afterEach du router.

Autre problème fréquent : les événements en double. Si la mesure améliorée et votre implémentation GTM coexistent, chaque navigation génère deux page_view. Désactivez systématiquement la mesure améliorée des pages vues quand vous utilisez GTM pour les SPA. Enfin, testez chaque route dans le mode aperçu de GTM pour vérifier que les variables sont correctement transmises.