Poner en funcionamiento el tracker en una aplicación Vue 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 script de setup en tu archivo principal.

<script setup>
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'
//... your code here
tracker.configure({
  projectKey: "<your project key>",
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
//... more code here
</script>

Por razones de seguridad, evita codificar directamente tu projectKey en el código de tu aplicación. En su lugar, guárdala en un archivo de configuración o en un sistema de entorno.

Una opción sería añadir una variable de entorno en un archivo .env en la raíz de tu proyecto y anteponer al nombre de la variable el prefijo VITE_, lo que la hará disponible en tu código Vue. Puedes usarla más adelante mediante import.meta.env.<your variable name>.

Aquí tienes un ejemplo:

tracker.configure({
  projectKey: import.meta.env.VITE_VUE_APP_PROJECT_KEY,
});

Si estás construyendo una aplicación compleja con Vue, es probable que estés usando Nuxt o algo similar. Asegúrate de consultar nuestra sección Tracker Setup para encontrar el framework con el que estás trabajando.

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