La repetición de sesiones es una herramienta que todo equipo de producto y de desarrollo necesita una vez que su aplicación está en producción. Estas herramientas les permiten entender 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 comprender cosas como las carencias en la experiencia de usuario, los problemas en la lógica de negocio debidos a interacciones incorrectas del usuario, los casos límite que requieren secuencias complejas de acciones para activarse, y muchas otras posibilidades.

Sin embargo, hay un caso de uso que las herramientas tradicionales de repetición de sesiones realmente no pueden manejar: 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 iniciando 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 la sesión de un usuario, recibirías los eventos, errores y problemas habituales de 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 encuentras un problema, no podrás revisarlo directamente con dicho usuario.

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

• Inspeccionar directamente lo que el usuario está haciendo, 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 el usuario está haciendo en cada momento:

Dado que esta es una función que muestra actualizaciones en vivo, los puntos clave serían los campos de “correo electrónico” 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 en el lado del cliente, no hay forma de que tú, como operador, veas estos valores.

Esto a su vez te permite brindar soporte perfectamente para cualquier tipo de sistema, con la garantía para 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, usar el siguiente código para habilitarlo:

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

Si, por el contrario, 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 lugar openreplay-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 acceder a las funciones de Assist.

¿No es genial?

Ten en cuenta que si te encuentras con el siguiente mensaje de error (como me pasó a mí), deberías seguir estos pasos para solucionarlos.

“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 echémosle un vistazo.

Dado que el cliente 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 sesiones de Assist activas. En cuanto tu usuario abra la aplicación, la sesión aparecerá aquí automáticamente y la verás listada así:

Ahí verás la siguiente información:

• El ID de usuario, ¿ese correo electrónico 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 (mostrada como “14 seconds” en la captura de pantalla).
• Por último, 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 solo 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 buscabas, haz clic en el icono “Play” de la sesión. Esto te llevará a la vista en vivo de la aplicación del cliente.

En la siguiente comparación lado a lado puedes ver cómo la pantalla de Assist muestra la sesión del usuario actual que se está observando.

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 se está observando; al fin y al cabo, como operador no necesitas necesariamente ver un número de teléfono o una dirección de correo electrónico. 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 ingresando y su formato (como en el campo de correo electrónico) y decidiendo al instante protegerlos.

Sin embargo, si quisieras cambiar este comportamiento y hacer que el rastreador ignore u ofusque otros campos, puedes sanear los datos con distintos 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 adicional (una muy interesante, debo añadir) es la capacidad de tomar el control sobre el 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 sobre 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 en la siguiente captura de pantalla que el punto rojo es tu ratón de assist, 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 distintos sistemas operativos. La voz y el video se transmiten ambos a través de WebRTC.

Si tienes algún problema configurando el plugin Assist en tu proyecto, ponte en contacto con nosotros en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores.