La relecture de session est un outil dont chaque équipe produit et développement a besoin une fois que son application est en production. Ces outils leur permettent de comprendre comment leurs utilisateurs finaux interagissent avec le produit, sans le biais potentiel d’un groupe de test d’utilisateurs contrôlé. Avec ces informations, ils peuvent comprendre des choses comme les lacunes de l’expérience utilisateur, les problèmes dans la logique métier dus à des interactions incorrectes de l’utilisateur, les cas limites qui nécessitent des séquences d’actions complexes pour être déclenchés, et bien d’autres possibilités.

Cependant, il existe un cas d’usage que les outils traditionnels de relecture de session ne peuvent pas vraiment gérer : le support de session en direct.

Avoir la capacité de voir en direct ce que font vos utilisateurs et d’y répondre directement, voire de prendre le contrôle de leur souris ou de lancer un appel rapide pour leur montrer le problème, n’a pas de prix. Et c’est pourquoi OpenReplay a implémenté la fonctionnalité Assist.

Dans un scénario normal où vous configurez votre application pour enregistrer une session utilisateur, vous obtiendriez les événements, erreurs et problèmes habituels de votre application, livrés à votre instance d’OpenReplay (ou à la version SaaS) quelques minutes après la fermeture de l’onglet (l’application doit après tout s’assurer que vous ne l’avez pas fermé par accident). Vous pourrez analyser étape par étape ce que l’utilisateur a fait, mais si vous trouvez un problème, vous ne pourrez pas le revoir directement avec ledit utilisateur.

Cependant, grâce à Assist, vous pourrez désormais :

• Inspecter directement ce que fait l’utilisateur, en direct, dès l’instant où il ouvre la page.
• Grâce à l’utilisation de WebRTC, un canal un-à-un est créé entre le client et l’opérateur. Cela vous permet d’ouvrir un appel directement depuis l’application, sans avoir besoin d’installer un logiciel de communication tiers sur l’un ou l’autre des ordinateurs concernés.
• Prendre le contrôle de la souris de l’utilisateur (avec sa permission bien sûr) et lui montrer exactement où cliquer.

Jetez un œil à l’interface de la fonctionnalité Assist telle que la voit l’opérateur, observant ce que fait l’utilisateur à un moment donné :

Étant donné qu’il s’agit d’une fonctionnalité affichant des mises à jour en direct, les points clés à souligner seraient les champs « email » et « numéro de mobile ». Le premier est masqué pour préserver la confidentialité de l’utilisateur, et le second est littéralement ignoré par le traqueur afin d’éviter la collecte de données personnelles. Et étant donné que la transformation des données est effectuée côté client, il n’y a aucun moyen pour vous, en tant qu’opérateur, de voir ces valeurs.

Cela vous permet à son tour de fournir parfaitement un support pour tout type de système, avec l’assurance, pour vos utilisateurs, qu’il n’y aura aucun traitement de leurs données personnelles.

Cette fonctionnalité est déjà disponible dans toutes les dernières versions d’OpenReplay, donc tout ce que nous avons à faire, c’est de l’activer. Si vous travaillez avec la version package d’OpenReplay, tout ce que vous avez à faire est d’installer le plugin suivant directement depuis votre ligne de commande :

npm install @openreplay/tracker-assist

Et ensuite, utilisez le code suivant pour l’activer :

//...
import OpenReplay from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
const tracker = new OpenReplay({
  projectKey: "your project key"
});
tracker.use(trackerAssist({})); //add this line
tracker.start();

Si, en revanche, vous utilisez le snippet JS que vous avez obtenu depuis la plateforme lors de sa première configuration, tout ce que vous avez à faire est de mettre à jour un chemin. Votre snippet d’origine devrait avoir été similaire à celui-ci :

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay.js",1,0,initOpts,startOpts);
</script>

Remarquez le chemin vers le fichier openreplay.js tout en bas. Nous devons le modifier et mettre à la placeopenreplay-assist.js, afin que cela ressemble à quelque chose comme ceci :

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay-assist.js",1,0,initOpts,startOpts);
</script>

Et cela devrait être tout ce que vous avez besoin de modifier dans votre configuration de base pour accéder aux fonctionnalités d’Assist.

C’est génial, non ?!

Notez que si vous rencontrez le message d’erreur suivant (comme cela m’est arrivé), vous devez suivre ces étapes pour le corriger.

“Critical dependency: the request of a dependency is an expression”

Le correctif issu du ticket devrait suffire à vous permettre de continuer.

Vous pouvez maintenant commencer à tirer pleinement parti d’Assist d’OpenReplay, alors jetons-y un œil.

Comme le client n’a désormais plus rien d’autre à faire, il est temps pour vous de regarder du côté de l’opérateur.

Directement sur la plateforme, cliquez sur l’option Assist dans le menu de navigation, comme indiqué ci-dessous :

Une fois que vous y avez cliqué, vous obtiendrez une liste des sessions Assist actives. Dès que votre utilisateur ouvre l’application, la session apparaîtra ici automatiquement et vous la verrez listée comme ceci :

Là, vous voyez les informations suivantes :

• L’ID utilisateur — cet email là ? Vous l’avez configuré en utilisant la méthode setUserID sur le traqueur.
• L’heure et la date de début de chaque session.
• La durée de la session (affichée comme « 14 seconds » sur la capture d’écran).
• Enfin, la géolocalisation de l’utilisateur. Vous pouvez voir là que je suis situé en Espagne, et de plus que j’utilise Firefox sur mon macOS de bureau.

Il y a beaucoup d’informations rien qu’ici, et c’est important pour que vous puissiez identifier la session que vous voulez regarder en direct. Après tout, dans cet exemple je ne vous montre qu’une seule session, mais il pourrait y en avoir des centaines (voire plus) actives en même temps. En plus de cela, vous pourriez utiliser la barre de recherche pour vous aider à effectuer des requêtes complexes afin de trouver la bonne session.

Une fois que vous avez localisé la session que vous recherchiez, cliquez sur l’icône « Play » de la session. Cela vous amènera à la vue en direct de l’application client.

Vous pouvez voir sur la comparaison côte à côte ci-dessous comment l’écran d’Assist affiche la session de l’utilisateur actuellement observé.

Maintenant, comme vous pouvez le constater, il y a quelques différences entre ce que voit l’utilisateur et ce que voit l’opérateur. Et pour une bonne raison. Les informations privées sont automatiquement masquées ou totalement ignorées. C’est pour protéger l’utilisateur observé ; après tout, en tant qu’opérateur vous n’avez pas nécessairement besoin de voir un numéro de téléphone ou une adresse email. Il est important de noter que c’est le comportement par défaut : le traqueur installé sur l’application client détecte le type de données que vous saisissez et leur format (comme dans le champ email) et décide sur le moment de les protéger.

Cependant, si vous vouliez modifier ce comportement et faire en sorte que le traqueur ignore ou masque d’autres champs, vous pouvez assainir les données à travers différents niveaux de granularité. La documentation officielle contient toutes les informations dont vous avez besoin si c’est ce que vous recherchez, alors consultez-la.

Une fonctionnalité supplémentaire (une très intéressante, je dois l’ajouter) est la possibilité de prendre le contrôle du pointeur de la souris de votre client. Grâce à cette fonctionnalité, vous pourrez contrôler la souris et cliquer à différents endroits de l’application. Vous ne pourrez pas envoyer d’autres types de signaux d’entrée, mais cela devrait suffire à vous aider à aider vos utilisateurs.

Et pour accéder à cette fonctionnalité, tout ce que vous avez à faire est de cliquer sur le lien « Remote Control » dans la section en haut à droite de votre écran. Lorsque vous le faites, votre client verra une fenêtre modale demandant une autorisation.

Une fois confirmé, vous prendrez le contrôle de sa souris, ou plutôt, votre pointeur apparaîtra sur son écran et vous pourrez cliquer et interagir avec l’application comme si vous utilisiez sa souris directement. Vous pouvez voir sur la capture d’écran suivante que le point rouge est votre souris d’assistance, tandis que le pointeur noir est celui de l’utilisateur.

C’est une fonctionnalité fantastique lorsque vos utilisateurs n’arrivent pas à comprendre comment interagir avec votre application ou où cliquer exactement. Vous pouvez même les accompagner en lançant un appel en direct avec votre utilisateur et en utilisant votre pointeur rouge pour lui montrer où cliquer. La capture d’écran suivante me montre, en train d’avoir un appel en direct avec… eh bien, moi-même depuis deux ordinateurs différents avec des OS différents. La voix et la vidéo sont toutes deux transmises via WebRTC.

Si vous rencontrez des problèmes pour configurer le plugin Assist sur votre projet, contactez-nous sur notre communauté Slack et posez vos questions directement à nos développeurs !