Comment tracker des Single Page Applications avec GTM et GA4 ?

Mis à jour : mercredi 9 août 2023

Qu’est-ce qu’une Single Page Application (ou SPA) ?

Une Single Page Application est un type de page web qui charge tout le code nécessaire à la navigation dès la première page. Comme son nom l’indique, c’est une application qui charge une seule page. Ce type d’application est très bénéfique pour l’expérience utilisateur car une fois la première page chargée, la navigation est très fluide. On peut avoir l’impression que l’URL change mais on reste toujours sur la même page.

Les SPA sont souvent créées à partir des framework Javascript Angular, React et Vue.js.

Cependant, ce type d’application n’est pas adapté pour le SEO (Search Engine Optimisation) car les moteurs de recherches ont du mal à comprendre l’organisation du site étant donné qu’il n’y a qu’une seule page.

Google Analytics 4 offre une fonctionnalité par défaut pour tracker les SPA mais celle-ci peut ne pas fonctionner selon votre cas. C’est pour cette raison qu’on va voir 3 méthodes différentes dans cet article.

Qu’est-ce que l’History API en Javascript ?

Sans rentrer dans les détails techniques, l’idée ici est de bien comprendre le fonctionnement des SPA.

L’objet history est une variable globale Javascript qui est utilisée par la plupart des SPA pour manipuler l’historique de navigation.

La variable globale Javascript history
La variable globale Javascript history

Si vous travaillez sur une SPA assez ancienne, il se peut qu’elle n’utilise pas l’History API de Javascript et dans ce cas-là vous devrez installer Google Analytics 4 via la méthode 3.

Les 3 méthodes pour tracker une SPA avec GTM et GA4

Avant de détailler les 3 méthodes, il est important de comprendre ce qu’il se passe sur une SPA. Pour cela, on va utiliser une instance d’Angular dans laquelle j’ai installé le code de Google Tag Manager.

Voici à quoi ressemble mon application Angular. Vous pouvez tester l’application ici.

L'application Angular que j'utilise pour la rédaction de cet article
L'application Angular que j'utilise pour la rédaction de cet article

Je crée un déclencheur Modifications de l'historique dans GTM pour pouvoir visualiser les événements de changement d’historique dans le mode debug.

Le déclencheur modifications de l'historique
Le déclencheur modifications de l'historique

Ensuite, dès que je navigue dans l’interface, je reçois des événements History (gtm.historyChange) dans la prévisualisation de Google Tag Manager.

Comme évoqué précédemment, GTM écoute les appels à l’History API de Javascript, c’est pour ça qu’on reçoit ces événements gtm.historyChange.

Affichage de l'événement dans le mode preview de GTM
Affichage de l'événement dans le mode preview de GTM
Le déclencheur modifications de l'historique
Le déclencheur modifications de l'historique

Méthode 1 : Laisser GA4 avec les réglages par défaut

On va maintenant voir ce qu’il se passe si j’installe la balise de configuration d’une nouvelle propriété GA4 sur toutes les pages.

Je reçois maintenant des événements History (gtm.historyChange-v2) et des événements History Change (page_view).

L’événement gtm.historyChange-v2 est déclenché autant de fois que le gtm.historyChange car ils écoutent les mêmes événements (ceux de l’History API).

En revanche, gtm.historyChange-v2 est géré par GA4 alors que gtm.historyChange est géré par GTM.

C’est pour cela que gtm.historyChange-v2 déclenche ensuite un événement page_view (nommé History Change dans GTM).

Cet événement page_view permet ensuite de tracker toutes les pages vues en s’appuyant sur l’history API.

Cette fonctionnalité est activée par défaut dans les mesures améliorées de GA4 et peut être désactivée si vous estimez que c’est nécessaire. Si vous souhaitez transmettre plus d’informations dans l’événement page_view vous serez obligé de passer par les méthodes 2 ou 3.

La configruation par défaut d'une propriété GA4 sur les pages vues liées à l'historique de navigation
La configruation par défaut d'une propriété GA4 sur les pages vues liées à l'historique de navigation

Méthode 2 : Tracker les pages vues avec le déclencheur Modification de l'historique dans GTM

Pour utiliser cette méthode, je désactive le suivi des pages lors du changement de l’historique de navigation dans les paramètres des mesures améliorées de GA4.

Désactivation des pages vues liées à l'historique de navigation
Désactivation des pages vues liées à l'historique de navigation

Je n’ai plus que l’événement gtm.historyChange, l’événement gtm.historyChange-v2 n’est plus présent dans le Data Layer.

Je vais maintenant créer un événement GA4 page_view dans GTM qui va se déclencher sur les modifications de l’historique.

Configuration de l'événement page_view à partir du déclencheur de modification de l'historique
Configuration de l'événement page_view à partir du déclencheur de modification de l'historique

Vous pouvez alors changer les paramètres page_location et page_referrer pour utiliser les variables présentes dans le Data Layer. Vous pourrez ainsi étudier le réel parcours utilisateur au sein de votre SPA.

Méthode 3 : Tracker les pages vues via le Data Layer

La méthode 3 consiste à demander à un développeur d’envoyer un événement page_view dans le Data Layer lorsque l’utilisateur change de vue dans la SPA.

dataLayer.push(
    {
        event: "page_view",
        virtual_page_title: "Tour of Heroes - Dashboard",
        virtual_page_location: "/dashboard",
        virtual_page_referrer: "/heroes"
    }
);

Et ensuite configurer une balise événement GA4 pour se déclencher sur cet événement.

Configuration de l'événement page_view à partir du Data Layer
Configuration de l'événement page_view à partir du déclencheur du Data Layer