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

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

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: "<your project key>", 
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

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

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

    return //....
}

Como alternativa, también puedes usar la clase Tracker directamente para gestionar su instancia de forma manual:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

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

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

    return //....
}

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

Por razones de seguridad, evita escribir directamente tu projectKey en el código de tu aplicación. En su lugar, almacénala en un archivo de configuración o en un sistema de entorno.

Hay varios enfoques disponibles según la configuración de tu proyecto:

• Variables de entorno: Si usas Create React App, aprovecha su soporte integrado para variables de entorno
• Archivos de configuración: Usa archivos de configuración dedicados que estén excluidos del control de versiones
• Gestión de entornos: Herramientas como dotenv pueden ayudarte a gestionar diferentes claves entre entornos

A continuación tienes un ejemplo:

// Access the key from environment variables
const openReplayKey = process.env.REACT_APP_OPENREPLAY_KEY;

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

Si tienes algún problema al configurar el tracker en tu proyecto de React, ¡ponte en contacto con nosotros en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores!