Instalar el tracker de OpenReplay en un proyecto basado en Svelte es relativamente sencillo.

La clave para que funcione será el uso del contexto, que, aunque suena similar a cómo lo hacemos con Next.js, la implementación será diferente.

Como nuestro tracker requiere el contexto del navegador para ejecutarse, es posible que necesites ajustar el ejemplo de “Creación del contexto del tracker” como se muestra a continuación para asegurarte de que se importa y se crea en el lado del cliente:

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    if (process.browser) {
			// singleton approach
			const { tracker } = await import('@openreplay/tracker');
			tracker.configure({
				projectKey: "<your project key>", 
        ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
			});
			tracker.start();
			
			// or you can use a class based approach
      const Tracker = await import('@openreplay/tracker');
      const tracker = new Tracker({
	      projectKey: "", // pKey
	      ingestPoint: "ingestPoint",
      })
      
      tracker.start()
    }
  })
</script>

Si quieres revisar el código completo de este proyecto, consulta el repositorio que usaremos a lo largo de este tutorial.

Es una aplicación de ejemplo de SvelteKit que puedes clonar y probar tú mismo siguiendo las instrucciones del archivo Readme. Una vez desplegada y configurada, deberías poder capturar repeticiones de sesión.

Esta solución usará el Contexto de Svelte, que te permite compartir datos entre un componente padre y todos sus hijos (muy parecido a los proveedores de Contexto de React).

En este ejemplo en particular, agregaremos el tracker para la sección de administración de nuestra aplicación, por lo que estableceremos el contexto dentro del archivo de layout de administración (src/layout/Admin.svelte). Luego lo iniciaremos en la primera página renderizada dentro de esta sección.

Dentro del archivo src/layout/Admin.svelte, dentro de la etiqueta script, agreguemos el siguiente código:

import {Tracker, key} from "../context/tracker"

let tracker = new Tracker({
    projectKey: __myapp.env.OPENREPLAY_PROJECT_KEY
});
  
setContext(key, {
 getTracker: () => tracker
} )

Por supuesto, tendrás más código dentro de este archivo, pero lo que ves arriba es lo relevante para nosotros en este momento.

1. Primero importamos el Tracker de OpenReplay y una variable key (más sobre estos en un momento).
2. Luego instanciamos el Tracker. Como puedes ver, la única opción de configuración que usamos es la key del proyecto, que obtendrías desde la interfaz después de configurar el proyecto en OpenReplay.
3. Guardamos la instancia del tracker en el contexto creado llamando a setContext. La variable key se usará más adelante para recuperar este valor en particular del contexto.

Usar el contexto (y llamar al método start) es tan simple como obtener el contexto a través de la función getContext de Svelte.

El contexto tenía un objeto con una función llamada getTracker, así que lo desestructuraremos y llamaremos a esa función.

import {key} from "../../context/tracker"
  
let {getTracker} = getContext(key)
onMount( () => {
	let tracker = getTracker()
	tracker.start()
})

Después, solo es cuestión de llamar al método start desde dentro del callback de onMount. Hacemos esto para asegurarnos de que estamos llamando a este método desde el navegador, de lo contrario el tracker no funcionará.

Hemos estado usando este archivo en ambos lugares, así que es momento de echarle un vistazo rápido.

Este archivo exporta dos elementos principales:

1. La clase Tracker, que hemos instanciado en el archivo de layout.
2. Usamos la variable key para guardar y recuperar el contexto.

Aquí está el contenido del archivo:

import Tracker from '@openreplay/tracker'

const key = Symbol("openreplay tracker")

export {Tracker, key}

Lo único interesante aquí es que la variable key no es una simple cadena de texto, en realidad es un Symbol. La razón de esto es evitar posibles colisiones de nombres con otras bibliotecas de terceros que también usan el contexto.

Lo último que hay que revisar aquí es cómo gestionamos la key del proyecto, ya que no debería estar codificada de forma fija en tu código.

Normalmente, usarías una variable de entorno para esto, sin embargo, como necesitamos esos datos en el navegador y Svelte no proporciona una forma sencilla de lograrlo, resolveremos este problema con dos paquetes: dotevn y @rollup/plugin-replace.

Por un lado, usaremos el paquete dotenv para tener la capacidad de definir nuestras variables de entorno dentro de un archivo .env. Definiremos la que necesitamos:

OPENREPLAY_PROJECT_KEY="<YOUR PROJECT KEY>"

Por otro lado, como no podemos usar dotenv en nuestro código de front-end (porque depende del módulo fs, que claramente no está disponible en el navegador), usaremos el plugin replace para rollup. Este plugin reemplazará código en nuestros archivos por lo que le indiquemos. Así que configuraremos el plugin para reemplazar la cadena “__myapp.env.OPENREPLAY_PROJECT_KEY” con la key real del proyecto cargada desde el archivo .env (gracias al paquete dotenv).

Para lograr esto, abre el archivo rollup.config.js en la raíz del proyecto y agrega el siguiente código dentro de la clave plugins.

replace({
  "__myapp.env.OPENREPLAY_PROJECT_KEY": `"${process.env.OPENREPLAY_PROJECT_KEY}"`
})

Este plugin se ejecutará en el backend durante el proceso de empaquetado, haciendo posible que esto funcione. Si quieres inspeccionar el contenido completo de este archivo de configuración, puedes consultarlo aquí.

Puedes consultar este repositorio para ver el código fuente completo de una aplicación funcional basada en Svelte con el Tracker.

Si tienes algún problema al configurar el Tracker en tu proyecto Svelte, contáctanos en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores.