Iniziare a usare OpenReplay è semplice.

Se vuoi guardare un breve tutorial su come iniziare, usa questo video su YouTube, altrimenti continua a leggere per maggiori dettagli.

Ci sono 2 modi per mettere in funzione OpenReplay: usare lo script o il pacchetto npm.

Copia e incolla lo snippet di codice direttamente nel </head> della tua web app. Lo script si trova nella dashboard di OpenReplay in ‘Preferences > Projects’ ed è univoco per ogni progetto.

Se il tuo sito supporta Google Tag Manager, puoi seguire la guida passo passo per GTM.

Per prima cosa installa il pacchetto npm.

npm i @openreplay/tracker

Poi inizializza il pacchetto dal punto di ingresso del tuo codice e avvia il tracker. Devi impostare l’opzione projectKey nel costruttore. Il suo valore si trova nella dashboard di OpenReplay in ‘Preferences > Projects’.

Puoi usare il tracker come istanza singleton, che è il modo consigliato per usarlo. In questo modo puoi accedere al tracker da qualsiasi punto della tua app:

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
})

tracker.start() // returns a promise with session info (sessionID, sessionHash, userUUID)

Oppure puoi usare direttamente la classe Tracker per gestirne manualmente l’istanza:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();

Usa lo snippet seguente se la tua web app è Server-Side-Rendered (SSR) (ad es. NextJS, NuxtJS). Assicurati che il tracker venga eseguito in un ambiente browser e che tracker.start() venga chiamato una volta che l’app è stata servita al client (ad es. in useEffect o componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}

Se vuoi approfondire la configurazione del tracker, consulta JavaScript SDK per l’elenco delle opzioni disponibili.

Se non usi OpenReplay in un’applicazione semplice, probabilmente stai usando un framework di sviluppo web, come Next.js, Nuxt o altro. Consulta i nostri tutorial dedicati a ciascuno dei framework supportati:

ReactVueAngularNextJSNuxt

Ora che hai installato il tracker e distribuito la tua web app, le registrazioni delle sessioni dovrebbero comparire entro pochi minuti. Ottimo lavoro!

Nel frattempo, puoi proseguire con il processo di configurazione per sfruttare al meglio OpenReplay. Più dati catturi, meglio è per riprodurre e correggere rapidamente i problemi: