Poner en funcionamiento el tracker en una aplicación React es bastante sencillo.

Aunque puedes obtener una versión para copiar y pegar del código directamente desde la plataforma cuando creas un nuevo proyecto, ese código es demasiado básico y hará que sea mucho más difícil personalizarlo y agregar plugins adicionales.

Suponiendo que estás construyendo una SPA (Single Page Application), todo lo que tienes que hacer es agregar el siguiente código a tu punto de entrada:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

En otras palabras, puedes instanciar el tracker al inicio del script y, una vez que la página se carga, puedes iniciarlo utilizando un hook useEffect.

Como nota, la projectKey que configuras es la que proporciona la plataforma de OpenReplay. Por razones de seguridad, este valor no debe almacenarse codificado de forma fija en tu código, sino más bien en algún tipo de archivo/sistema de configuración.

Existen diferentes opciones para resolver este problema; dependiendo de tu configuración, podrías usar algo como el soporte de variables ENV de create-react-app.

Si estás construyendo una aplicación compleja con React, lo más probable es que estés usando Next, Remix o algo similar. Asegúrate de consultar nuestra sección de Configuración para encontrar el framework con el que estás trabajando.

Si tienes algún problema configurando el tracker en tu proyecto React, ¡por favor contáctanos en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores!