Démarrer avec OpenReplay est simple.

Si vous souhaitez regarder un tutoriel rapide sur la façon de démarrer, utilisez cette vidéo YouTube ; sinon, poursuivez votre lecture pour plus de détails.

Il existe 2 façons de mettre OpenReplay en service : en utilisant le script ou le paquet npm.

Copiez/collez l’extrait de code directement dans le </head> de votre application web. Le script se trouve dans le tableau de bord OpenReplay sous ‘Preferences > Projects’ et est unique à chaque projet.

Si votre site web prend en charge Google Tag Manager, vous pouvez suivre le guide pas à pas GTM.

Installez d’abord le paquet npm.

npm i @openreplay/tracker

Ensuite, initialisez le paquet depuis le point d’entrée de votre base de code et démarrez le tracker. Vous devez définir l’option projectKey dans le constructeur. Sa valeur se trouve dans votre tableau de bord OpenReplay sous ‘Preferences > Projects’.

Vous pouvez utiliser le tracker en tant qu’instance singleton, ce qui est la manière recommandée de l’utiliser. De cette façon, vous pouvez accéder au tracker depuis n’importe quel endroit de votre application :

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)

Ou vous pouvez utiliser directement la classe Tracker pour gérer son instance manuellement :

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();

Suivez l’extrait ci-dessous si votre application web est rendue côté serveur (SSR) (c’est-à-dire NextJS, NuxtJS). Assurez-vous que le tracker s’exécute dans un environnement de navigateur et que tracker.start() est appelé une fois que l’application est servie au client (c’est-à-dire dans useEffect ou 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();
  }, []);
}

Si vous souhaitez aller plus loin dans la configuration du tracker, consultez le SDK JavaScript pour obtenir la liste des options disponibles.

Si vous n’utilisez pas OpenReplay dans une application brute, vous utilisez probablement un framework de développement web, comme Next.js, Nuxt ou un autre. Consultez nos tutoriels personnalisés pour chacun des frameworks pris en charge :

ReactVueAngularNextJSNuxt

Maintenant que vous avez installé le tracker et déployé votre application web, les enregistrements de sessions devraient apparaître en quelques minutes. Bravo !

En attendant, vous pouvez poursuivre le processus de configuration pour tirer le meilleur parti d’OpenReplay. Plus vous capturez de données, plus il est facile de reproduire et de corriger rapidement les problèmes :