Mesurer les applications monopages

Ce document s'adresse aux développeurs qui souhaitent mesurer les pages vues sur leur application monopage à l'aide de Google Analytics.

Les applications monopages (SPA) sont des sites Web qui chargent un document HTML une seule fois et récupèrent tout contenu supplémentaire à l'aide d'API JavaScript.

Exemple: vous disposez d'un formulaire pour générer des prospects. Le formulaire comporte trois écrans:

• Premier écran permettant de collecter les informations sur le client.
• Deuxième écran sur lequel les clients indiquent leur intérêt pour certains services.
• Troisième écran permettant de s'inscrire à des webinaires en lien avec les centres d'intérêt du client.

Pour mesurer correctement les pages vues à partir d'une application SPA, vous devez compter les pages vues pour chaque écran avec lequel un utilisateur interagit et obtenir le bon référent de la page afin de pouvoir suivre correctement le parcours utilisateur.

Avant de commencer

Cette page suppose que vous disposez déjà des éléments suivants:

• Un compte et une propriété Google Analytics 4 pour votre site Web Découvrez comment configurer Google Analytics.

• Balise Google implémentée sur votre site Web qui se déclenche lors du chargement initial de la page. Découvrez comment configurer la balise Google.

Implémenter des mesures pour les applications monopages

Pour implémenter une mesure précise des SPA, utilisez l'une des méthodes suivantes pour déclencher une nouvelle page vue virtuelle:

• Modifications de l'historique du navigateur (recommandé): si votre SPA utilise l'API History, en particulier la méthode pushState() et replaceState() pour mettre à jour les écrans, utilisez cette option.

• Événements personnalisés: si votre site Web utilise l'objet DocumentFragment pour afficher différents écrans, utilisez cette option.

Implémentation de l'historique du navigateur Implémentation d'événements personnalisés

Implémentation d'événements personnalisés

Lorsque vous implémentez vous-même des événements page_view, assurez-vous que le comportement du site Web est le suivant lorsque l'écran change:

• Définissez page_referrer et page_location sur les valeurs appropriées pour une attribution correcte.

• Envoyer un nouvel événement page_view

gtag.js

1. Stockez l'ancienne et la nouvelle URL de votre application monopage afin de pouvoir accéder aux valeurs lorsque vous envoyez manuellement l'événement page_view.

2. Créez une fonction qui met à jour les page_referrer et page_location sur les écrans correspondants de votre SPA.
   Facultatif: Pour mettre à jour les valeurs précédemment définies sans réinitialiser la balise Google, fournissez la paire clé-valeur 'update': true.

3. Facultatif: Dimensions personnalisées: pour mettre à jour les dimensions et métriques personnalisées avec la nouvelle vue de page virtuelle, incluez-les dans votre commande config. En savoir plus sur les dimensions et métriques personnalisées

4. Envoyez un événement page_view pour comptabiliser le changement d'écran en tant que page vue. Exemple :

    // Store current URL path and query in a variable.
       const oldUrl = window.location.href.split('#')[0];
    // Change to new URL.
       history.pushState({}, undefined, newUrl);
    // Measure page change.
       function OnPageChange(oldUrl, newUrl) {
          gtag('config', 'G-XXXXXX', {
           'send_page_view': false,
           'page_referrer': oldUrl,
           'page_location': newUrl,
           'update': true,
        });
          gtag('event', 'page_view');
        }
   

5. Déclenchez la fonction OnPageChange lorsque vous devez déclencher une nouvelle vue de page virtuelle.

Tag Manager

Pour mesurer une application SPA avec Tag Manager, vous avez besoin de deux balises Google avec le même ID de balise dans votre conteneur. La première balise Google se charge lorsque le site Web se charge et définit les paramètres dont vous avez besoin pour vos mesures. La deuxième balise Google se déclenche chaque fois que l'URL de votre site Web change. Enfin, vous devez envoyer manuellement un événement de page vue pour enregistrer la nouvelle page virtuelle.

1. Préparer le flux de données Google Analytics pour la mesure des SPA

Pour suivre manuellement les événements page_view:

1. Ouvrez Google Analytics.

2. Dans Administration, sous Collecte et modification des données, cliquez sur Flux de données.

3. Sous Mesures améliorées, sélectionnez l'icône Paramètres .

4. Sous Pages vues > Afficher les paramètres avancés, désactivez Changements de pages selon les événements de l'historique du navigateur. Vous allez enregistrer manuellement les modifications de l'historique du navigateur dans Tag Manager.

5. Cliquez sur Enregistrer.

2. Créer une balise Google pour les pages vues virtuelles d'une application SPA

1. Ouvrez Google Tag Manager.

2. Dans votre espace de travail, ouvrez le menu "Balises".

3. Créez une balise en cliquant sur Nouveau.

4. Dans Configuration de la balise, sélectionnez la balise Google.

5. Saisissez le même ID de balise Google que celui de votre première balise Google.

6. Sous Paramètres de configuration, indiquez les paramètres suivants:

   • page_referrer : {{Old History URL}}
   • page_location : {{New History URL}}

   • update : true

     Remarque :Le paramètre update fusionne les nouveaux paramètres ou les paramètres mis à jour dans la configuration existante de la balise Google. Il supprime également l'envoi d'un nouvel événement page_view.

   • Facultatif: spécifiez les dimensions et métriques personnalisées à mettre à jour avec la nouvelle vue de page virtuelle.

7. Sous Déclenchement, définissez les éléments suivants:

   1. Dans Choisir un déclencheur, créez un déclencheur (+).
   2. Dans Configuration du déclencheur, sélectionnez le déclencheur Modification de l'historique. En savoir plus sur le déclencheur de modification de l'historique Veillez à ne déclencher cette balise que lorsqu'un nouvel écran s'affiche.
   3. Attribuez un nom au déclencheur, puis enregistrez-le.

8. Attribuez un nom à votre balise, puis enregistrez-la. Votre balise Google doit se présenter comme suit:

3. Déclencher un événement de page vue

1. Dans votre espace de travail Tag Manager, créez une balise.

2. Dans Configuration de la balise, sélectionnez la balise Google Analytics: Événement GA4.

3. Saisissez l'ID de mesure de la balise. Cet ID correspond à l'ID de la balise Google que vous avez utilisé dans la balise précédente.

4. Pour envoyer un nouvel événement de page vue, ajoutez page_view comme nom de l'événement.

5. Dans Déclenchement, définissez le déclencheur de modification de l'historique. Il doit s'agir du même déclencheur que celui de la balise Google que vous avez configurée.

6. Attribuez un nom à votre balise, puis enregistrez-la.

Vérifier la configuration de vos mesures

Pour vérifier que votre application monopage mesure correctement les pages vues:

1. Activez le mode débogage pour chaque balise de votre configuration de mesure de SPA. Découvrez comment surveiller les événements dans DebugView.

2. Parcourez votre application monopage. Lorsque vous cliquez sur un nouvel écran virtuel, un nouvel événement page_view doit s'afficher dans DebugView. Comparez les paramètres de l'événement page_view avec l'événement page_view précédent pour vérifier si le référent et l'emplacement de la page ont été correctement mis à jour.