Empezar a usar OpenReplay es sencillo.

Si quieres ver un tutorial rápido sobre cómo empezar, usa este vídeo de YouTube; de lo contrario, sigue leyendo para obtener más detalles.

Hay 2 formas de poner OpenReplay en funcionamiento: usando el script o el paquete npm.

Copia y pega el fragmento de código directamente en el </head> de tu aplicación web. El script se encuentra en el panel de OpenReplay en ‘Preferences > Projects’ y es único para cada proyecto.

Si tu sitio web es compatible con Google Tag Manager, puedes seguir la guía paso a paso de GTM.

Primero instala el paquete npm.

npm i @openreplay/tracker

Luego, inicializa el paquete desde el punto de entrada de tu base de código e inicia el tracker. Debes establecer la opción projectKey en el constructor. Su valor se encuentra en tu panel de OpenReplay en ‘Preferences > Projects’.

Puedes usar el tracker como una instancia singleton, que es la forma recomendada de usarlo. De esta manera, puedes acceder al tracker desde cualquier parte de tu aplicación:

import { tracker } from '@openreplay/tracker'

tracker.configure({
	projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
})

tracker.start() // returns a promise with session info (sessionID, sessionHash, userUUID)

O puedes usar la clase Tracker directamente para manejar su instancia manualmente:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();

Sigue el siguiente fragmento si tu aplicación web se renderiza en el servidor (SSR) (es decir, NextJS, NuxtJS). Asegúrate de que el tracker se ejecute en un entorno de navegador y que tracker.start() se llame una vez que la aplicación se sirva al cliente (es decir, en useEffect o componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}

Si deseas profundizar en la configuración del tracker, consulta el SDK de JavaScript para ver la lista de opciones disponibles.

Si no estás usando OpenReplay dentro de una aplicación básica, es probable que estés usando un framework de desarrollo web, como Next.js, Nuxt u otro. Consulta nuestros tutoriales personalizados para cada uno de los frameworks compatibles:

ReactVueAngularNextJSNuxt

Ahora que has instalado el tracker y desplegado tu aplicación web, las grabaciones de sesiones deberían aparecer en pocos minutos. ¡Bien hecho!

Mientras tanto, puedes avanzar en el proceso de configuración para sacar el máximo partido de OpenReplay. Cuanto más captures, mejor para reproducir y corregir problemas rápidamente: