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 étape par étape de 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’.

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
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 tracker.start() soit appelé une fois que l’application est démarrée (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 la liste des options disponibles.

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

React Vue Angular NextJS Nuxt

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

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

• Identifier un utilisateur : Associez votre ID utilisateur interne à la session en cours d’enregistrement.
• Métadonnées : Également appelées traits ou variables utilisateur, les métadonnées fournissent des informations supplémentaires sur les utilisateurs pendant l’enregistrement des sessions.
• Événements personnalisés : Ajoutez plus d’intelligence en enregistrant des événements spécifiques à votre domaine en parallèle des replays de sessions.
• Rapport d’erreurs : Signalez les erreurs et les exceptions et consultez-les sous l’onglet ERRORS.
• Téléverser les Source-Maps : Visualisez le contexte du code source obtenu à partir des stack traces dans leur forme originale.
• Plugins : Comprenez ce qui se passe en coulisses en capturant le store de votre application et en surveillant vos requêtes HTTP et GraphQL.
• Intégrations : Connectez OpenReplay à vos outils de journalisation et synchronisez les erreurs du backend avec les replays de sessions.