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 : Supposons que vous ayez un formulaire pour acquérir des prospects. Il comporte trois écrans :

  • Le premier écran permet de recueillir les informations sur le client.
  • Le deuxième écran permet aux clients d'indiquer leur intérêt pour certains services.
  • Le troisième écran permet aux clients de s'inscrire à des webinaires liés à leurs centres d'intérêt.

Pour mesurer correctement les pages vues à partir des 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. Vous pourrez ainsi 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 Set up Google Analytics.

  • Une balise Google implémentée sur votre site Web qui se déclenche lorsque la page se charge initialement. Découvrez comment configurer la balise Google.

Implémenter la mesure des 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 les méthodes pushState() et replaceState() pour mettre à jour les écrans, utilisez cette option.

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

Implémentation d'un événement personnalisé

Lorsque vous implémentez vous-même des événements page_view, assurez-vous que le site Web se comporte comme suit lorsque l'écran change :

  • Définissez page_referrer et page_location sur les valeurs correctes pour une attribution appropriée.

  • Envoyez 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 page_referrer et page_location sur les écrans correspondants de votre SPA.
    Facultatif : Pour mettre à jour les valeurs définies précédemment 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 page vue virtuelle, incluez-les dans votre config commande. En savoir plus sur les dimensions et métriques.

  4. Envoyez un événement page_view pour comptabiliser le changement d'écran comme une 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 page vue virtuelle.

Tag Manager

Pour mesurer une 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 tous les paramètres dont vous avez besoin pour votre mesure. 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 des paramètres .

  4. Sous Pages vues > Afficher les paramètres avancés, décochez Changements de pages selon les événements de l'historique du navigateur. Vous enregistrerez 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 des 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 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, fournissez les paramètres suivants :

    • page_referrer : {{Referrer}}
    • page_location : {{Page URL}}

    • update : true

    • Facultatif : Spécifiez les dimensions et métriques personnalisées à mettre à jour avec la nouvelle page vue 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 "Modification de l'historique trigger". Veillez à ne déclencher cette balise que lorsqu'un nouvel écran s'affiche.
    3. Nommez le déclencheur et cliquez sur Enregistrer.

  8. Nommez votre balise et cliquez sur Enregistrer. Votre balise Google doit se présenter comme suit :

Capture d'écran montrant la configuration finale de la balise

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

  1. Dans votre espace de travail Tag Manager, créez une balise en cliquant sur Nouveau.

  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 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 "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. Nommez votre balise et cliquez sur Enregistrer.

Utiliser des déclencheurs Google Tag Manager pour les événements d'historique

Si vous devez déclencher d'autres types de balises dans Google Tag Manager en fonction des modifications de l'historique du navigateur, par exemple pour envoyer des données à d'autres plates-formes marketing, vous pouvez utiliser le type de déclencheur "Modification de l'historique".

Lorsque vous configurez des balises ou des variables pour qu'elles fonctionnent avec le déclencheur "Modification de l'historique", veillez à utiliser les variables intégrées appropriées fournies par Google Tag Manager :

  • History New URL Fragment : fragment de l'URL après l'événement d'historique.
  • History Old URL Fragment : fragment de l'URL avant l'événement d'historique.
  • History New State : nouvel objet d'état de l'historique.
  • History Old State : ancien objet d'état de l'historique.
  • History Source: source de l'événement d'historique (par exemple, popstate, pushState, replaceState).

Vous devrez peut-être activer ces variables intégrées dans Google Tag Manager sous Variables > Configurer.

Pour en savoir plus sur ce déclencheur, consultez la section Déclencheur "Modification de l'historique".

Vérifier votre configuration de mesure

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. Cliquez sur 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 de la page et l'emplacement de la page ont été correctement mis à jour.

Impact sur les événements automatiques

Si vous implémentez correctement la mesure des pages vues virtuelles dans votre SPA, Google Analytics gérera correctement les autres événements automatiques. Si les pages vues virtuelles ne sont pas enregistrées pour les changements d'écran, Google Analytics traite la SPA comme une seule page, ce qui entraîne des métriques faussées.

Par exemple, l'événement user_engagement mesure le temps qu'un utilisateur passe activement sur une page. Sans les pages vues virtuelles, tout le temps d'engagement est attribué au chargement initial de la page, ce qui rend impossible l'analyse du temps passé sur des écrans individuels.

Lorsque la mesure des pages vues virtuelles est correctement implémentée :

  • L'événement user_engagement est envoyé lorsque l'utilisateur passe d'une page virtuelle à une autre.
  • Le temps d'engagement pour la page virtuelle précédente est calculé et envoyé avec l'événement user_engagement, généralement juste avant le traitement de l'événement page_view pour la nouvelle page virtuelle.
  • D'autres événements, tels que les clics ou les défilements, sont associés au page_location de la page virtuelle que l'utilisateur consulte actuellement.

Vous pouvez ainsi analyser l'engagement des utilisateurs et d'autres métriques pour des écrans ou des sections individuels de votre SPA, ce qui vous permet de mieux comprendre le parcours utilisateur.

Précédent
Mesurer les pages vues
Suivant
Configurer des événements d'achat