Le guide complet de la
Relecture de session

Imaginez être assis à côté de vos utilisateurs pendant qu'ils naviguent sur votre site web. Ce serait formidable, n'est-ce pas ? Vous découvririez de première main les problèmes qu'ils rencontrent, et vous verriez les parties de votre application qu'ils ne comprennent pas et qui les frustrent.

Imaginez maintenant pouvoir les écarter lorsque ces problèmes surviennent et ouvrir les outils de développement de leur navigateur pour comprendre ce qui s'est mal passé. Ne serait-ce pas incroyable ?

C'est là qu'intervient la relecture de session. Elle vous permet d'observer comment vos utilisateurs naviguent dans votre application web et de voir ce qui se passe en coulisses, afin de reproduire facilement la situation en cas de problème.

Les outils de relecture de session peuvent répondre à de nombreux domaines différents au sein d'une même entreprise, ce qui rend le choix de la bonne solution encore plus difficile.

• Vous voulez voir comment les utilisateurs interagissent avec la nouvelle mise à jour du design ? La relecture de session est là pour vous !
• Vous essayez de comprendre pourquoi l'application continue de planter ? La relecture de session peut répondre à cette question.
• Curieux de savoir comment les utilisateurs réagissent aux fonctionnalités récemment publiées ? Vous l'avez deviné, la relecture de session peut aider aussi !

Examinons quelques-uns des cas d'usage les plus courants où les outils de relecture de session brillent comme nul autre.

La technologie de la relecture de session est si polyvalente qu'elle apporte de la valeur à différentes équipes au sein d'une organisation. C'est l'une des raisons pour lesquelles il existe tant d'alternatives de relecture de session sur le marché. Chacune se concentre sur des personas et des cas d'usage différents. Il n'existe guère d'outil qui les englobe tous ensemble. Veillez donc à garder à l'esprit votre utilisateur interne et son cas d'usage principal lorsque vous choisissez votre outil de relecture de session.

Faisons la lumière sur ce qui se passe en coulisses lors de la capture et du replay d'un enregistrement de session. Certaines parties peuvent être techniques, mais ne vous inquiétez pas ; tout finira par avoir du sens.

Que capture-t-on réellement dans les relectures de session ?

Les données collectées peuvent différer d'un outil de relecture de session à un autre. Rappelez-vous, ces outils peuvent cibler différents personas dans une organisation et donc traiter certains cas d'usage mais pas d'autres. Cela dit, les meilleurs outils devraient être capables de capturer les éléments ci-dessous :

• Comportement des utilisateurs : Il s'agit des clics, mouvements de souris, défilements, hésitations, et plus encore. Les utilisateurs défilent-ils par-dessus des messages importants ? Ou peut-être cliquent-ils rageusement sur certains boutons ? Ces données sont précieuses pour faire ressortir les principales frustrations.
• Mutations du DOM : Lorsque vous visitez un site web, votre navigateur télécharge puis assemble divers éléments, comme des images, du texte et des vidéos, avant de rendre chaque page. Le Document Object Model (DOM) agit comme un traducteur entre ces éléments et votre navigateur, permettant aux pages web d'être assemblées et rendues. Les outils de relecture de session détectent quand l'un de ces éléments est mis à jour et capturent ces mutations (changements) dans le cadre du replay. Les mutations du DOM sont les ingrédients essentiels des enregistrements de session. Ce sont les images qui composent le replay.
• Outils de développementCe sont des outils fournis par les navigateurs qui aident les développeurs à reproduire toutes sortes de problèmes dans leurs environnements de test locaux. Des choses comme les requêtes réseau et les payloads, les erreurs JavaScript, les journaux et l'état de l'application web, entre autres. Certains outils de replay capturent ces données techniques, pour chaque session utilisateur, faisant du débogage un jeu d'enfant pour les développeurs.
• Web vitals :Surveiller les temps de chargement de votre application web, pas seulement des pages mais aussi de ses diverses ressources, peut fournir des informations précieuses sur la façon dont vos utilisateurs vivent votre site. De plus, des métriques telles que l'utilisation de la mémoire et du CPU peuvent être utilisées pour suivre les plantages et corriger les ralentissements de votre application. Cela fait des outils de relecture de session une pièce maîtresse de votre stack d'observabilité.
• Frustrations :Les rage clics, les défilements excessifs ou les clics morts sont des exemples de frustrations des utilisateurs que les plateformes de relecture de session peuvent détecter. Les identifier est la première étape pour offrir une meilleure expérience produit à vos utilisateurs.
• Événements personnalisés : Cela couvre les événements en aval ou en amont de votre application que vous pourriez avoir besoin de journaliser en parallèle de chaque session enregistrée. Suivre des événements personnalisés signifie que vous pouvez synchroniser ces bribes de données avec vos replays pour un contexte bien plus riche.
• Métadonnées :Informations supplémentaires sur un enregistrement particulier. Des choses comme les userIDs, les segments, les versions de navigateurs, le pays et plus encore. Les métadonnées servent à filtrer les replays et à agréger les données.
• Assets :La mise en cache de certains assets comme les images, polices ou feuilles de style est un aspect vital de toute plateforme de relecture de session. Imaginez que vous enregistriez une session pour votre nouveau site web, et que quelques mois plus tard, vous décidiez de lui donner un nouveau look. Or, si les assets n'avaient pas été mis en cache, l'ancien enregistrement serait tout simplement cassé car il ne pourrait pas référencer ses feuilles de style et polices précédentes. C'est pourquoi la mise en cache des assets est si importante : elle garantit que votre replay reste fidèle à sa forme originale, quel que soit le temps écoulé.

Au lieu d'enregistrer une vidéo (ce qui consommerait beaucoup de bande passante), ces outils capturent des données d'événements qui peuvent ensuite être reconstituées en un replay visuel.

Traitement des données

Une fois collectées, les données passent par plusieurs étapes de traitement :

• Compression pour réduire la taille des données
• Suppression des informations sensibles (selon vos paramètres de confidentialité)
• Indexation pour la recherche
• Association à d'autres métriques et événements

Ce traitement garantit que les données sont stockées efficacement et peuvent être récupérées rapidement en cas de besoin.

Reconstruction du replay

Lorsque vous visionnez une relecture de session, l'outil reconstitue l'expérience de l'utilisateur :

• Reconstruit le DOM tel qu'il apparaissait à l'utilisateur
• Rejoue les interactions utilisateur dans l'ordre
• Anime les mouvements du curseur
• Affiche les saisies de formulaire et leurs modifications
• Affiche les données techniques en parallèle du replay visuel

Cette reconstruction fournit une représentation très précise de ce qu'a vécu l'utilisateur, vous permettant de voir votre application à travers ses yeux.

Intégration avec d'autres outils

La plupart des outils de relecture de session peuvent s'intégrer à d'autres systèmes de votre stack technique :

• Outils de suivi des erreurs comme Sentry
• Plateformes d'analyse comme Google Analytics
• Systèmes de support client comme Intercom ou Zendesk
• Solutions CRM comme Salesforce

Ces intégrations renforcent la valeur de la relecture de session en reliant le comportement des utilisateurs à d'autres métriques et workflows métier.

La plupart des outils de relecture de session permettent aux développeurs de contrôler ce qui est enregistré et ce qui est aseptisé. Les éléments aseptisés ne sont pas envoyés au serveur. En fait, ils ne quittent jamais le navigateur de votre utilisateur. Ils sont soit masqués (c.-à-d. texte remplacé par des astérisques et images par des placeholders), soit non suivis (les données sont simplement ignorées).

Par exemple, supposons que la page de profil utilisateur de votre site contienne des informations personnelles devant être aseptisées, comme l'adresse et le numéro de téléphone. L'équipe de développement pourrait marquer ces champs comme « masqués » auprès du tracker. Ainsi, chaque fois qu'un utilisateur visite la page de profil, le tracker aseptiserait ces champs en remplaçant leur contenu par des astérisques. Il en résulte un replay correctement aseptisé qui capture toujours pleinement le parcours utilisateur sans révéler la moindre Information Personnelle Identifiable (PII).

Conformité

Si vous disposez de données PII, il y a toujours des politiques de confidentialité internes à respecter et des réglementations externes à observer.

Les politiques imposées en interne peuvent aller des restrictions de sécurité autour de l'infrastructure jusqu'aux logiciels que vous pouvez installer. En matière de réglementation internationale, les trois plus importantes sont :

En matière de conformités externes, les trois plus importantes sont :

• GDPR S'applique lors de la collecte de données auprès de citoyens de l'UE. Le GDPR permet également aux utilisateurs de vous demander de supprimer leurs données de vos bases de données. Cela couvre, bien entendu, les données de relecture de session.
• HIPPA Celle-ci est spécifique aux données liées à la santé. Si vous collectez ce type d'informations sur vos utilisateurs, vous vous y conformez très probablement déjà.
• CCPA Similaire au GDPR mais pour les résidents de Californie aux États-Unis.

Si vous ne faites pas partie du secteur de la santé et que votre site web est accessible dans le monde entier, il y a de fortes chances que vous deviez vous conformer au GDPR et au CCPA. Ajouter un outil de relecture de session au mix peut sembler être un obstacle supplémentaire. Cependant, ces outils résolvent les préoccupations de confidentialité des données grâce à l'aseptisation et à d'autres contrôles fins. Les développeurs peuvent indiquer au tracker quelles données suivre et lesquelles ignorer. Ainsi, les PII restent en sécurité dans le navigateur de votre utilisateur et ne sont pas transmises au serveur.

Par conséquent, il est toujours important d'examiner et de comprendre comment les outils de relecture de session traitent les données personnelles afin de pouvoir respecter les réglementations en vigueur.

Propriété et sécurité des données

Même si les données sont aseptisées, à qui appartiennent-elles ? Et comment garantir qu'elles sont traitées et stockées en toute sécurité ? Cela peut donner des maux de tête à de nombreuses équipes de conformité et de sécurité.

Alors que la plupart des outils se présentent sous la forme d'applications SaaS, certaines solutions de relecture de session vous permettent d'auto-héberger l'intégralité de leur plateforme dans vos locaux. Cela signifie que vous êtes propriétaire des données, qui résident également sur vos serveurs, vous conformant ainsi à vos politiques internes de sécurité et de confidentialité.

C'est un point crucial. Assurez-vous d'être pleinement conscient des détails au moment de décider quelle plateforme de relecture de session choisir.

Comprendre les modèles de tarification de la relecture de session vous aide à prendre des décisions éclairées et à éviter les coûts imprévus. Explorons les structures tarifaires courantes et les éléments à prendre en compte.

Modèles de tarification courants

Les outils de relecture de session utilisent généralement l'un de ces modèles de tarification :

Coûts cachés à prendre en compte

Au-delà du tarif de base, soyez attentif à ces coûts supplémentaires potentiels :

• Durée de conservation : Des périodes de rétention plus longues coûtent souvent plus cher
• Fonctionnalités avancées : Certains outils facturent un supplément pour des fonctionnalités comme les cartes de chaleur ou le suivi des erreurs
• Coûts d'intégration : Connecter d'autres outils de votre stack peut entraîner des frais
• Support d'implémentation : L'assistance technique pendant l'installation peut représenter un coût supplémentaire
• Rétention de données personnalisée : Des exigences de conformité particulières peuvent affecter le prix

Demandez toujours quels sont ces coûts potentiels durant votre processus d'évaluation.

Avec de nombreux outils de relecture de session sur le marché, choisir celui qui convient à vos besoins peut s'avérer difficile. Voici ce qu'il faut prendre en compte durant votre processus d'évaluation.

Fonctionnalités essentielles

Facilité d'implémentation

Un tracker de relecture de session ne devrait pas nécessiter plus de quelques lignes de code pour démarrer, quelle que soit votre stack technique. Une fois la configuration de base terminée, vous devriez évaluer la facilité avec laquelle ses capacités peuvent être étendues. Plus l'outil offre de flexibilité, plus il a de chances de s'adapter à votre cas d'usage.

Un tracker idéal devrait être facile à mettre en place avec un minimum de code, tout en vous offrant toutes les options dont vous avez besoin pour le personnaliser comme bon vous semble. Cela inclut la capture d'événements personnalisés, l'aseptisation des données, l'ajout d'informations supplémentaires aux sessions, et plus encore. Tout cela devrait être réalisé en minimisant l'impact sur les performances.

Outils de développement puissants

Pour exploiter la puissance de la relecture de session au profit de vos développeurs frontend, il est important de fournir un environnement qui ressemble étroitement à ce qu'ils connaissent et utilisent déjà au quotidien. En effet, chaque navigateur majeur est livré avec une variante des Outils de développement, un ensemble d'outils techniques qui aident les développeurs, dans leur travail quotidien, à reproduire et déboguer toutes sortes de problèmes.

Un outil de relecture de session idéal devrait être capable de capturer ces indices techniques et de fournir une expérience de débogage familière aux développeurs. Après tout, l'un des domaines où la relecture de session est particulièrement efficace est la réduction du temps nécessaire pour identifier et corriger les bugs.

Auto-hébergement

Comme évoqué dans la section Confidentialité des données, les politiques de conformité et de sécurité peuvent ne pas vous laisser le choix d'héberger vous-même la plateforme de relecture de session ou de l'utiliser en tant que service cloud.

Heureusement, certaines solutions de relecture de session proposent une option d'auto-hébergement qui vous permet d'installer et d'exploiter l'intégralité de leur plateforme sur vos propres serveurs. Cela offre deux avantages majeurs :

• Un contrôle total sur les données générées par vos utilisateurs. Les données de relecture de session vont directement vers vos serveurs, où elles sont traitées et stockées.
• La conformité avec les politiques et réglementations internesdevient bien plus facile ainsi. Plus de temps perdu en longues vérifications de conformité et de sécurité.

Au final, l'auto-hébergement est souvent la solution que les entreprises choisissent car il offre un contrôle complet sur leurs données. Si la propriété et la sécurité des données sont des préoccupations importantes pour votre entreprise, veillez à prioriser ce critère lors de l'évaluation de vos options.

Extensibilité

Les développeurs aiment ajuster, améliorer et créer des fonctionnalités personnalisées par-dessus leur outil de relecture de session. Une architecture open-core ou basée sur des plugins rend une solution extensible par conception et pérenne pour les besoins des utilisateurs internes.

Si vous privilégiez l'extensibilité et la personnalisation, envisagez d'explorer les solutions de relecture de session open source lors de l'évaluation des alternatives.

Capacités de recherche

Capturer des millions de sessions par jour peut donner l'impression de chercher une aiguille dans une botte de foin pour trouver le replay pertinent. Un outil de relecture de session idéal devrait offrir un moteur de recherche puissant et polyvalent. Cela nécessite la capacité de filtrer par presque n'importe quelle donnée capturée, comme une action utilisateur, un attribut de session particulier ou un événement technique.

De telles capacités de filtrage deviennent essentielles pour choisir le bon outil.

Analytique

Il n'est pas exagéré de penser qu'avec toutes les données capturées par les outils de relecture de session, on pourrait créer diverses visualisations pour suivre et comprendre différents aspects de l'application web.

Par exemple, vous pouvez créer un tableau de bord pour surveiller les performances de votre site web, y compris les temps de chargement, les ressources les plus lentes et d'autres métriques de web vitals. Vous pouvez également recevoir des alertes en cas de problème et utiliser la relecture de session pour en identifier la cause racine. Cela réduit le temps de résolution des problèmes potentiellement critiques.

Ainsi, lors du choix d'un outil de relecture de session, priorisez la capacité à agréger les données et à créer des visualisations pour les métriques qui comptent pour vous.

Évolutivité de la tarification

Comme mentionné dans une section précédente, il existe deux principaux modèles de tarification pour les solutions de relecture de session. Lors du choix d'un modèle, il est important de considérer sa scalabilité en fonction du trafic de votre site web et de votre cas d'usage.

Si votre site web génère des millions de sessions mensuelles, envisagez un modèle de tarification basé sur la valeur. Cependant, si vous avez un faible trafic, l'alternative la moins chère serait d'utiliser une solution de relecture de session proposant une tarification basée sur le volume. Mieux encore, recherchez des alternatives open source que vous pouvez héberger vous-même pour réduire les coûts.

Intégrations

La capacité à s'intégrer à des outils tiers est généralement la marque des solutions de relecture de session puissantes. En effet, la relecture de session ne vous montre qu'un côté de l'histoire : votre frontend. Et si vous avez besoin du contexte complet pour reproduire un bug et donc des journaux backend ? C'est là que l'intégration avec d'autres outils de votre stack peut s'avérer très utile.

Un autre type d'intégration intéressant concerne les systèmes de ticketing, comme JIRA. En créant un ticket incluant tous les détails nécessaires pendant la revue d'un replay particulier, vous pouvez améliorer significativement le workflow de votre équipe QA.

Veillez donc à examiner les intégrations disponibles lors du choix de votre outil de relecture de session.

Étendue des fonctionnalités

Bien qu'il soit essentiel de s'assurer que la solution que vous choisissez dispose du bon ensemble de fonctionnalités dont vous avez besoin pour votre cas d'usage principal, il est en réalité recommandé de garder un œil sur toutes les fonctionnalités que l'outil pourrait offrir.

Comme indiqué précédemment, les outils de relecture de session peuvent bénéficier à divers rôles et équipes au sein d'une organisation. Bien qu'ils ciblent principalement quelques cas d'usage, envisagez l'outil qui offre des fonctionnalités complémentaires dont d'autres membres de l'équipe pourraient bénéficier à l'avenir.

Communauté

Enfin, lorsqu'il s'agit de décider quelle solution de relecture de session choisir, nous pensons qu'il est important de considérer sa communauté. Une communauté active, où les utilisateurs (ou les développeurs dans le cas des produits open source) sont engagés et contribuent à la plateforme, est le signe d'un produit réussi et sain.

Conclusion

Les outils de relecture de session sont devenus essentiels pour les organisations soucieuses d'offrir des expériences numériques exceptionnelles. En fournissant à la fois un contexte visuel et des données techniques, ils offrent des informations uniques que d'autres outils d'analyse ne peuvent tout simplement pas égaler.

Que vous soyez un développeur essayant de corriger des bugs insaisissables, un product manager cherchant à améliorer les parcours utilisateurs, ou un membre de l'équipe de support aidant des clients déboussolés, la relecture de session peut transformer votre façon de comprendre et d'optimiser votre application web.

Lorsque vous évaluez les options pour votre organisation, n'oubliez pas d'équilibrer la fonctionnalité avec les considérations de confidentialité, et choisissez une solution qui correspond à vos besoins et ressources spécifiques.