Mesurer les applications monopages avec Google Tag Manager

Ce tutoriel vous explique comment configurer la mesure Google Analytics pour une application monopage (SPA) à l'aide de Google Tag Manager. Vous apprendrez à configurer votre propriété Google Analytics, à activer les variables GTM nécessaires et à créer des balises qui se déclenchent lors des modifications de l'historique.

Avant de commencer

Pour suivre ce tutoriel, vous devez disposer des éléments suivants :

• Un compte et une propriété Google Analytics.
• Un conteneur Google Tag Manager installé sur votre SPA.
• Le rôle Éditeur (ou supérieur) pour Google Analytics et Google Tag Manager.

Étape 1 : Préparez le flux de données GA4

Pour suivre manuellement les événements page_view dans une SPA, vous devez d'abord désactiver les pages vues automatiques basées sur l'historique dans GA4 afin d'éviter une double comptabilisation.

1. Ouvrez Google Analytics.
2. Dans Administration, sous Collecte et modification des données, cliquez sur Flux de données.
3. Sélectionnez votre flux de données Web.
4. Sous Mesures améliorées, cliquez sur l'icône Paramètres .
5. Sous Pages vues > Afficher les paramètres avancés, décochez Changements de pages selon les événements de l'historique du navigateur.
6. Cliquez sur Enregistrer.

Étape 2 : Activez les variables d'historique intégrées dans Tag Manager

Pour utiliser des déclencheurs ou des variables basés sur l'historique dans GTM, vous devez d'abord activer les variables d'historique intégrées.

1. Ouvrez Google Tag Manager.
2. Dans votre espace de travail, accédez à Variables.
3. Sous Variables intégrées, cliquez sur Configurer.
4. Dans la section Historique, activez les variables suivantes :
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. Fermez le panneau de configuration.

Remarque : Ces variables ne sont pas strictement nécessaires pour la configuration de base des pages vues. Elles ne sont utilisées que si vous souhaitez filtrer le déclencheur ou implémenter une logique personnalisée, comme la logique de la page précédente mentionnée dans la note finale de cette page.

Remarque : Certaines anciennes documentations peuvent faire référence à Old History URL ou New History URL. Il ne s'agit pas de variables intégrées standards. Utilisez plutôt les variables listées.

Étape 3 : Créez le déclencheur "Modification de l'historique"

Ensuite, créez un déclencheur qui se déclenche chaque fois qu'un événement de modification de l'historique (comme pushState ou replaceState) se produit dans votre SPA.

1. Dans votre espace de travail Tag Manager, accédez au menu Déclencheurs.
2. Cliquez sur Nouveau.
3. Dans Configuration du déclencheur, sélectionnez le déclencheur Modification de l'historique.
4. (Facultatif) Si vous ne souhaitez suivre que certaines modifications d'écran, définissez le déclencheur sur Certaines modifications de l'historique.
5. Nommez le déclencheur (par exemple, "Modification de l'historique"), puis cliquez sur Enregistrer.

Étape 4 : Créez la balise Google

Créez maintenant une balise Google qui met à jour le paramètre page_location chaque fois qu'une modification de l'historique se produit.

1. Dans le menu Balises, cliquez sur Nouvelle.
2. Dans Configuration de la balise, sélectionnez Balise Google.
3. Saisissez l'ID de votre balise (le même que celui utilisé pour votre balise Google initiale).

4. Sous Paramètres de configuration, ajoutez les paramètres suivants :

   • page_location : {{Page URL}}
   • page_title : {{Page Title}}
   • update : true
   Remarque : Le paramètre update fusionne les valeurs de configuration dans la configuration de balise existante et supprime un événement page_view en double immédiat. page_referrer n'est pas inclus ici, car Google Analytics suit automatiquement le référent externe d'origine lors du chargement de page initial. En l'omettant, Google Analytics peut renseigner automatiquement l'URL de la page virtuelle précédente en tant que référent pour le chemin de navigation dans vos rapports.

5. Nommez la balise (par exemple, "Balise Google – Mise à jour SPA"), puis cliquez sur Enregistrer.

   Remarque : N'ajoutez pas de déclencheur dans la section Déclenchement pour cette balise Google. Elle est déclenchée en tant que balise de configuration à l'aide du séquençage des balises à l'étape 5.

Étape 5 : Envoyer l'événement page_view virtuel

Enfin, créez un tag d'événement GA4 pour envoyer l'événement page_view réel pour chaque chargement de page virtuelle.

1. Cliquez sur Nouveau dans le menu Tags.
2. Dans Configuration de la balise, sélectionnez Google Analytics : Événement GA4.
3. Saisissez votre ID de mesure.
4. Définissez le Nom de l'événement sur page_view.
5. Sous Paramètres avancés > Séquençage des balises, sélectionnez Déclencher une balise avant le déclenchement de "Événement GA4 – Vue de page virtuelle", puis sélectionnez la balise Balise Google – Mise à jour de SPA que vous avez créée à l'étape 4.
6. Sous Déclenchement, sélectionnez le déclencheur Modification de l'historique que vous avez créé à l'étape 3.
7. Nommez la balise (par exemple, "Événement GA4 - Page vue virtuelle"), puis cliquez sur Enregistrer.

Étape 6 : Vérifier la configuration

Pour vous assurer que vos vues de pages virtuelles sont correctement enregistrées :

1. Dans Tag Manager, cliquez sur Aperçu pour accéder au mode Aperçu.
2. Parcourez votre SPA.
3. Dans DebugView Google Analytics, vérifiez qu'un nouvel événement page_view s'affiche pour chaque changement d'écran.
4. Vérifiez que les valeurs page_location correspondent à vos attentes.

Remarque : L'utilisation de {{Referrer}} standard permet de capturer la source initiale qui a conduit l'utilisateur sur votre site. Pour suivre la page virtuelle précédente de votre SPA en tant que page de provenance, vous devez implémenter une variable GTM personnalisée pour stocker l'emplacement de la page précédente.