Poner en funcionamiento el tracker en una aplicación Nuxt 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 podría no seguir las mejores prácticas que espera tu equipo o tu empresa.

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

import { tracker } from '@openreplay/tracker'

tracker.configure({ projectKey: "<your project key>" });

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

import Tracker from '@openreplay/tracker';
import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
   return uuidV4() 
}

export function startTracker(config) {

    console.log("Starting tracker...")

    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config?.projectKey
    }

    const tracker = new Tracker(trackerConfig);

    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }

    tracker.start();
    return {
        tracker,
        userId
    }
}

Esta función se encarga de instanciar el Tracker y de llamar al método start, que es lo que pone todo en marcha.

Esta función también recibe un objeto de “configuración” que puedes ampliar para futuras funcionalidades. Este ejemplo te muestra cómo habilitar, de forma opcional, la capacidad de identificar usuarios de manera única. Puedes usar un UUID por defecto que sería único para cada usuario cada vez que visite la página. Alternativamente, puedes proporcionar una función getUserId personalizada como parte de la configuración.

Con tu función personalizada, podrías proporcionar el ID de cliente de tu tienda, la dirección de correo electrónico del usuario o cualquier dato que identifique de forma única al usuario dentro de tu aplicación. De esta manera, puedes seguir sus session replays a lo largo del tiempo en caso de que tengan un problema concreto que otros no estén reportando.

En este ejemplo, se espera que la clave del proyecto, que puedes obtener desde la interfaz de proyectos de OpenReplay, se pase dentro del objeto config en la clave projectKey.

Para usar esta función startTracker, querrás crear un plugin solo para el cliente dentro del directorio plugins de tu proyecto Nuxt.

Asegúrate de añadir el sufijo .client al nombre del archivo de tu plugin. Esto sirve para garantizar que Nuxt solo lo cargue en el cliente.

El código del plugin podría tener este aspecto:

import {startTracker} from '../utils/tracker'

export default defineNuxtPlugin( (nuxtApp) => {
    
    return {
        provide: {
            startTracking: () => {
                let config = useRuntimeConfig().public
                
                let {userId} = startTracker({
                    userIdEnabled: true,
                    projectKey: config.openreplayProjectKey
                })
                //Optional if you need it
                let uid = useUserId()
                uid.value = userId
            }
        }
    }
})

Si quieres leer más sobre la creación de plugins en Nuxt, puedes consultar su documentación.

Ahora bien, este plugin proporciona una función llamada startTracking, que se encarga de llamar a la función startTracker que definimos antes. Pero lo más importante es que, dentro del código del plugin, puedes obtener la variable de entorno donde has guardado la clave del proyecto. Recuerda que esta información no debería estar escrita de forma fija dentro de tu proyecto por motivos de seguridad.

A través de la función useRuntimeConfig, puedes acceder a las variables de entorno públicas. En este ejemplo, estoy accediendo a openreplayProjectKey, que está definida como NUXT_PUBLIC_OPENREPLAY_PROJECT_KEY.

El ejemplo anterior también te muestra cómo usar el valor del ID de usuario devuelto con un composable para compartir el valor entre componentes. Esas dos líneas son completamente opcionales.

Con el plugin guardado en un archivo, puedes usarlo así desde tu archivo app.vue.

<script setup>
onMounted( () => {
  const {$startTracking} = useNuxtApp()
  $startTracking()
})
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Asegúrate de llamar al tracker después de que se haya disparado el evento mounted. Puedes hacerlo con el composable onMounted. Después de esto, el tracker debería empezar a enviar datos a la plataforma una vez desplegado.

Para ver el código completo de una aplicación funcional basada en Nuxt, puedes consultar este repositorio.

Si tienes algún problema al configurar el tracker en tu proyecto basado en Nuxt, ponte en contacto con nosotros en nuestra comunidad de Slack y pregúntale directamente a nuestros desarrolladores.