La repetición de sesiones es una herramienta que todo equipo de producto y desarrollo necesita una vez que su aplicación está en producción. Estas herramientas les permiten comprender cómo interactúan sus usuarios finales con el producto sin el posible sesgo de un grupo de prueba de usuarios controlado. Con esa información, pueden entender cosas como las brechas en la experiencia de usuario, los problemas en la lógica de negocio debidos a interacciones incorrectas por parte del usuario, los casos límite que requieren secuencias complejas de acciones para activarse, y muchas otras opciones.

Sin embargo, hay un caso de uso que las herramientas tradicionales de repetición de sesiones no pueden manejar realmente: el soporte de sesiones en vivo.

Tener la capacidad de ver en vivo lo que están haciendo tus usuarios y responder directamente, incluso tomando el control de su ratón o saltando a una llamada rápida para mostrarles el problema, no tiene precio. Y por eso OpenReplay implementó la función Assist.

En un escenario normal en el que configuras tu aplicación para grabar una sesión de usuario, obtendrías los eventos, errores y problemas habituales con tu aplicación, entregados a tu instancia de OpenReplay (o a la versión SaaS) unos minutos después de cerrar la pestaña (al fin y al cabo, la aplicación necesita asegurarse de que no la cerraste por accidente). Podrás analizar paso a paso lo que hizo el usuario, pero si sí encuentras un problema, no podrás revisarlo directamente con dicho usuario.

Sin embargo, gracias a Assist, ahora podrás:

• Inspeccionar directamente lo que está haciendo el usuario, en vivo, desde el momento en que abre la página.
• Gracias al uso de WebRTC, se crea un canal uno a uno entre el cliente y el operador. Esto te permite abrir una llamada directamente desde la aplicación, sin necesidad de tener instalado un software de comunicación de terceros en ninguno de los ordenadores involucrados.
• Tomar el control del ratón del usuario (con su permiso, por supuesto) y mostrarle exactamente dónde hacer clic.

Echa un vistazo a la interfaz de la función Assist tal como la ve el operador, observando lo que está haciendo el usuario en cualquier momento dado:

Dado que esta es una función que muestra actualizaciones en vivo, los puntos clave a destacar serían los campos “email” y “número de móvil”. El primero está siendo ofuscado para mantener la privacidad del usuario, y el segundo es literalmente ignorado por el rastreador para evitar que se recopilen datos personales. Y teniendo en cuenta que la transformación de los datos se realiza del lado del cliente, no hay forma de que tú, como operador, veas estos valores.

Esto, a su vez, te permite brindar soporte perfectamente a cualquier tipo de sistema con la garantía hacia tus usuarios de que no habrá ningún tratamiento de sus datos personales.

Esta función ya está disponible en todas las últimas versiones de OpenReplay, así que todo lo que tenemos que hacer es habilitarla. Si estás trabajando con la versión de paquete de OpenReplay, todo lo que tienes que hacer es instalar el siguiente plugin directamente desde tu línea de comandos:

npm install @openreplay/tracker-assist

Y luego, usa el siguiente código para habilitarlo:

//...
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, por otro lado, estás usando el snippet de JS que obtuviste de la plataforma cuando la configuraste por primera vez, todo lo que tienes que hacer es actualizar una ruta. Tu snippet original debería haber sido similar a este:

<!-- 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>

Fíjate en la ruta al archivo openreplay.js al final. Necesitamos cambiarla y poner en su lugaropenreplay-assist.js, así que haz que se vea algo así:

<!-- 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>

Y eso debería ser todo lo que necesitas cambiar en tu configuración básica para obtener acceso a las funciones de Assist.

¡¿Qué tan genial es eso?!

Ten en cuenta que si llegas a encontrarte con el siguiente mensaje de error (como me pasó a mí), debes seguir estos pasos para solucionarlo.

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

La solución del issue debería ser suficiente para que puedas continuar.

Ahora puedes empezar a aprovechar al máximo Assist de OpenReplay, así que echemos un vistazo a eso.

Dado que el cliente ya no tiene que hacer nada más a partir de ahora, es momento de que mires el lado del operador.

Directamente en la plataforma, haz clic en la opción Assist del menú de navegación, como se muestra a continuación:

Una vez que hagas clic ahí, obtendrás una lista de las sesiones de Assist activas. Una vez que tu usuario abra la aplicación, la sesión aparecerá aquí automáticamente y la verás listada así:

Ahí ves la siguiente información:

• El ID de usuario, ¿ese email de ahí? Lo configuraste usando el método setUserID en el rastreador.
• La hora y fecha de inicio de cada sesión.
• La duración de la sesión (que se muestra como “14 seconds” en la captura de pantalla).
• Finalmente, la geoinformación sobre el usuario. Puedes ver ahí que estoy ubicado en España, y además que estoy usando Firefox en mi macOS de escritorio.

Hay mucha información aquí, y esto es importante para que identifiques la sesión que quieres ver en vivo. Al fin y al cabo, en este ejemplo solo te muestro una única sesión, pero podría haber cientos (o más) activas al mismo tiempo. Además de eso, podrías usar la barra de búsqueda para ayudarte a realizar consultas complejas y encontrar la sesión correcta.

Una vez que hayas localizado la sesión que estabas buscando, haz clic en el icono “Play” de la sesión. Esto te llevará a la vista en vivo de la aplicación del cliente.

Puedes ver en la siguiente comparación lado a lado cómo la pantalla de Assist muestra la sesión del usuario actual que está siendo observado.

Ahora, como puedes apreciar, hay algunas diferencias entre lo que ve el usuario y lo que ve el operador. Y por una buena razón. La información privada se ofusca automáticamente o se ignora por completo. Esto es para proteger al usuario que está siendo observado; al fin y al cabo, como operador no necesitas necesariamente ver un número de teléfono o una dirección de email. Es importante señalar que este es el comportamiento por defecto: el rastreador instalado en la aplicación del cliente está detectando el tipo de datos que estás introduciendo y su formato (como en el campo de email) y decidiendo en el momento protegerlos.

Sin embargo, si quisieras cambiar este comportamiento y hacer que el rastreador ignore u ofusque otros campos, puedes sanear los datos a través de diferentes niveles de granularidad. La documentación oficial tiene toda la información que necesitas si eso es lo que buscas, así que échale un vistazo.

Una función extra (una muy interesante, debo añadir) es la capacidad de tomar el control del puntero del ratón de tu cliente. A través de esta funcionalidad, podrás controlar el ratón y hacer clic en diferentes lugares de la aplicación. No podrás enviar ningún otro tipo de señales de entrada, pero eso debería ser suficiente para ayudarte a ayudar a tus usuarios.

Y para acceder a esta función, todo lo que tienes que hacer es hacer clic en el enlace “Remote Control” en la sección superior derecha de tu pantalla. Cuando lo hagas, tu cliente verá una ventana modal solicitando permiso.

Una vez confirmado, ganarás el control de su ratón, o más bien, tu puntero aparecerá en su pantalla y podrás hacer clic e interactuar con la aplicación como si estuvieras usando su ratón directamente. Puedes ver que en la siguiente captura de pantalla, el punto rojo es el ratón de tu asistencia, mientras que el puntero negro es el del usuario.

Esta es una función fantástica cuando tus usuarios no son capaces de averiguar cómo interactuar con tu aplicación o dónde exactamente hacer clic. Incluso puedes darles soporte iniciando una llamada en vivo con tu usuario y usando tu puntero rojo para mostrarle dónde hacer clic. La siguiente captura de pantalla me muestra a mí, teniendo una llamada en vivo con… bueno, conmigo mismo desde dos ordenadores diferentes con distinto sistema operativo. Tanto la voz como el video se transmiten a través de WebRTC.

Si tienes algún problema al configurar el plugin Assist en tu proyecto, ¡contáctanos en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores!