Comment tracker des Single Page Applications avec Google Tag Manager (GTM) et Google Analytics 4 (GA4) ?

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.

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.

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.

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.

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

On va maintenant voir ce qu’il se page 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 revance 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.

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.

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.

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.