Usar OpenReplay con Next.js

Poner en marcha el tracker en una aplicación Next.js es bastante sencillo. Dado que Next.js funciona sobre React, el proceso es bastante similar; la principal dificultad proviene de las capacidades de renderizado del lado del servidor (Server Side Rendering) de Next.js.

Pero una vez que entiendas cómo funcionan y cómo estructurar tu código exclusivo de cliente, estarás rastreando a tus usuarios en un abrir y cerrar de ojos.

Añadir el código de seguimiento

Si bien 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 puede que no siga las buenas prácticas esperadas por tu equipo o empresa.

Componente Tracker

Este método ofrece un enfoque minimalista en el que inyectamos el tracker en la aplicación como un componente, que cargará la librería de forma dinámica.

App Router (v14+) - use client

'use client'
import { useEffect } from "react"
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
})

const Openreplay = () => {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      tracker.start()
    }
  }, [])

  return null
}

export default Openreplay

App Router - importar dinámicamente la instancia del componente Openreplay en el layout raíz

import dynamic from "next/dynamic";

const OpenReplayNoSSR = dynamic(() => import('//import the Openreplay instance'), {
  ssr: false, //disables Server-side pre-rendering so window won't be undefined
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" >
      <body>
        {children}
        <OpenReplayNoSSR />
      </body>
    </html >
  );
}

Componente regular (Next hasta v13)

[...]

function TrackerComponent() {
const [tracker, setTracker] = React.useState(null);

  React.useEffect(() => {
    (async function () {
      const { tracker } = await import("@openreplay/tracker");
      tracker.configure({
        projectKey: PROJECT_KEY,
        ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
        __DISABLE_SECURE_MODE: true,
      });

      setTracker(tracker);
    })();
  }, []);
[...]

Contexto del Tracker

este método te permite crear un contexto que, a su vez, facilita el control del estado del tracker y la llamada a sus distintas API.

import { createContext } from "react"
import {v4 as uuidV4} from 'uuid'
import { useReducer } from "react"

export const TrackerContext = createContext()

function defaultGetUserId() {
   return uuidV4() 
}

async function newTracker(config) {
    // we use dynamic import to make sure that tracker is started inside browser env
    const { tracker } = await import("@openreplay/tracker");
    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config?.projectKey || process.env.NEXT_PUBLIC_OPENREPLAY_PROJECT_KEY
    }

    tracker.configure(trackerConfig);
    
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
    return tracker

}

function reducer(state, action) {
        switch(action.type) {
            case 'init': {
                if(!state.tracker) {
                    console.log("Instantiaing the tracker for the first time...")
                    return {...state, tracker: newTracker(state.config)}
                }
                return state
            }
            case 'start': {
                console.log("Starting tracker...")
                state.tracker.start()
                return state
            }
        }
    }

export default function TrackerProvider({children, config = {}}) {
    let [state, dispatch] = useReducer(reducer, {tracker: null, config})
    let value = {
        startTracking: () => dispatch({type: 'start'}),
        initTracker: () => dispatch({type: 'init'})
    }

    return <TrackerContext.Provider value={value}>{children}</TrackerContext.Provider>
}

Este provider pone 2 métodos a disposición del usuario:

initTracker: que instancia el tracker con la configuración proporcionada.
startTracking: que activa el inicio del proceso de seguimiento.

Este provider también admite 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 a los usuarios de manera única. Puedes usar un UUID por defecto que sería único para cada usuario cada vez que visite la página. Como alternativa, 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 cosa que identifique de manera única al usuario dentro de tu aplicación. De este modo, puedes seguir las repeticiones de sus sesiones a lo largo del tiempo en caso de que tengan un problema concreto que otros no estén reportando.

Gestionar el “projectKey” en tu código

A modo de nota, el projectKey que configuras es el que proporciona la plataforma de OpenReplay. Por motivos de seguridad, este valor no debería almacenarse codificado de forma fija (hardcoded) en tu código, sino más bien en algún tipo de archivo/sistema de configuración.

Para este ejemplo, aprovecho los archivos .env de Next. Lo que tienes que entender es que si no antepones el prefijo NEXT_PUBLIC a la variable de entorno, tu código de cliente (el tracker) no tendrá acceso a ella.

Si esto no es aceptable, puedes usar getStaticProps dentro de la primera página que visiten tus usuarios para obtener ese valor antes de instanciar el tracker. Puedes ver ambos ejemplos a continuación.

Usar el contexto del tracker

Importa y envuelve tu aplicación con el TrackerProvider que creamos antes, de esta manera:

import '../styles/globals.css'
import TrackerProvider from '../context/trackerContext'

function MyApp({ Component, pageProps }) {

  return <TrackerProvider>
        <Component {...pageProps} />
    </TrackerProvider>
}

export default MyApp

Este es el archivo _app.js, que actúa como punto de entrada de toda la aplicación.

Y luego, puedes activar el seguimiento desde cualquier componente que desees, de la siguiente forma:

import { useContext, useEffect } from 'react'
import { TrackerContext } from '../context/trackerContext'
import styles from '../styles/Home.module.css'

export default function YourComponent({projectKey}) {
    
    const {initTracker, startTracking} = useContext(TrackerContext)
    
    useEffect( () => {
       initTracker()
       startTracking()
    }, [])
//.... rest of your code
}

Si no necesitas tanto control, puedes unir ambos, el “mensaje de init” y el “mensaje de start tracking”, de modo que solo necesites llamar a una única función para poner en marcha el seguimiento.

¿Tienes preguntas?

Para ver el código completo de una aplicación funcional basada en Next, puedes echar un vistazo a este repositorio.

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