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 disposiez d'un formulaire pour acquérir des prospects. Le formulaire comporte trois écrans : > * Le premier écran permet de capturer les informations sur le client. * Deuxième écran sur lequel les clients indiquent leur intérêt pour certains services. * Troisième écran : page 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'applications monopages, vous devez comptabiliser les pages vues pour chaque écran avec lequel un utilisateur interagit et obtenir le bon référent de 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 pour votre site Web. Découvrez comment configurer Google Analytics.

• Une 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 la mesure des applications monopages

Pour mesurer précisément les SPA, utilisez l'une de ces méthodes 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'objet DocumentFragment pour afficher différents écrans, utilisez cette option.

Implémentation de l'historique du navigateur Implémentation d'un événement personnalisé

Implémentation de la modification de l'historique du navigateur

Si votre SPA utilise l'API History, vous pouvez activer les mesures améliorées dans Google Analytics pour suivre automatiquement les pages vues en fonction des événements de l'historique de navigation.

Important : Si vous configurez vos balises à l'aide de Google Tag Manager, n'activez pas le suivi automatique de l'historique dans Google Analytics, car cela peut entraîner un double comptage des pages vues. Consultez plutôt le tutoriel Mesurer les applications monopages avec Google Tag Manager.

Activer les mesures améliorées dans Google Analytics

Pour mesurer automatiquement page_views en fonction de l'historique de navigation :

1. Ouvrez Google Analytics.

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

3. Sous Mesures améliorées, faites glisser le bouton sur Activé pour activer toutes les options.

4. Cliquez pour modifier les différentes options. Sous Pages vues, cliquez sur Afficher les paramètres avancés. Veillez à activer les options Chargements de page et Modifications de page basées sur les événements de l'historique de navigation.

   

5. Enregistrez les modifications.

Vérifier la configuration de la 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 d'APS. 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 d'événement page_view avec l'événement page_view précédent pour vérifier si l'URL de provenance et l'emplacement de la page ont été correctement mis à jour.

Autres points à prendre en compte pour les applications monopages

En plus d'envoyer des événements page_view, tenez compte des aspects supplémentaires suivants pour une intégration robuste des SPA à Google Analytics et une meilleure expérience utilisateur :

Gérer la position de défilement

Lorsque les utilisateurs naviguent entre les vues d'une SPA, le navigateur conserve généralement la position de défilement actuelle. Les utilisateurs risquent alors de ne pas voir le haut de la nouvelle page virtuelle, ce qui peut affecter le suivi de la profondeur de défilement.

Recommandation : Réinitialisez par programmation la position de défilement en haut de la page ou du conteneur de contenu principal après chaque transition de page virtuelle.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Grâce à ce changement, les utilisateurs commenceront en haut du nouveau contenu, ce qui permettra au suivi du défilement de Google Analytics de mesurer précisément l'engagement sur la nouvelle page virtuelle.

Assurer l'accessibilité du contenu pour les fonctionnalités du navigateur

Si les utilisateurs signalent des problèmes avec des fonctionnalités du navigateur, comme la recherche sur la page (Ctrl+F) qui ne fonctionne pas après le chargement d'une page virtuelle, cela peut indiquer comment votre SPA met à jour le DOM.

Recommandation : Assurez-vous que votre framework SPA et votre logique de routage mettent à jour complètement et de manière synchrone les parties pertinentes du DOM avec le contenu de la nouvelle page. Il est possible que le rendu différé ou le contenu masqué de l'arborescence DOM principale ne soient pas immédiatement indexables par la fonction de recherche du navigateur. Testez la recherche sur la page après les navigations virtuelles pour confirmer l'accessibilité du contenu.

Impact sur les événements automatiques

Si vous implémentez correctement la mesure des pages vues virtuelles dans votre SPA, Google Analytics gérera les autres événements automatiques de manière appropriée. Si les pages vues virtuelles ne sont pas enregistrées pour les changements d'écran, Google Analytics traite l'APS comme une seule page, ce qui fausse les métriques.

Par exemple, l'événement user_engagement mesure le temps qu'un utilisateur passe activement sur une page. Sans les pages vues virtuelles, toute la durée d'engagement est attribuée au chargement de page initial, ce qui empêche d'analyser le temps passé sur chaque écran.

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.
• La durée d'engagement pour la page virtuelle précédente est calculée et envoyée 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.

Cela vous permet d'analyser l'engagement utilisateur et d'autres métriques pour des écrans ou des sections spécifiques de votre SPA, ce qui vous permet de mieux comprendre le parcours utilisateur.