La ligne suivante installera le traqueur et avec lui le SDK pour vous permettre de profiter de toutes les fonctionnalités du traqueur.

npm i @openreplay/tracker

Lors de l’instanciation du traqueur OpenReplay, plusieurs options de configuration vous permettent de personnaliser de nombreux aspects de l’enregistrement et de l’expérience d’enregistrement.

Vous devez définir l’option projectKey dans le constructeur. Vous pouvez obtenir cette valeur dans votre tableau de bord OpenReplay sous ‘Preferences > Projects’.

Si votre site Web est une Application monopage (SPA), utilisez le code ci-dessous :

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start(); // returns a promise with session info (sessionID, sessionHash, userUUID)

Sinon, si votre application Web est Rendue côté serveur (SSR) (par exemple, NextJS, NuxtJS), utilisez le fragment de code ci-dessous. Assurez-vous que tracker.start() est 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(); // returns a promise with session info (sessionID, sessionHash, userUUID)
  }, [])
}

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY,
      ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
      capturePerformance: true,
      __DISABLE_SECURE_MODE: true // for local testing
});

Il existe un ensemble d’options que vous pouvez passer au constructeur. Seul projectKey est requis.

• projectKey: string L’ID du projet que vous suivez.
• sessionHash?: string Le hash de la session initiale. Cela est utile lorsque les sessions traversent différents sous-domaines de votre application Web, mais vous souhaitez les regrouper en un seul enregistrement. Dans le cas où il n’est pas possible de continuer la session (n’existe pas ou est terminée), le traqueur démarrera automatiquement une nouvelle. Il est également renvoyé sur stop(). Plus de détails ici.
• ingestPoint?: string Votre domaine OpenReplay (par exemple, https://openreplay.mydomain.com/ingest), vers lequel le traqueur enverra des événements. Ceci est facultatif pour les utilisateurs du Cloud OpenReplay. Par défaut : https://api.openreplay.com/ingest (qui pointe vers le Cloud OpenReplay).
• revID?: string L’ID de révision de votre application Web. Utile lors de la recherche de problèmes survenant sur une version de publication spécifique.
• resourceBaseHref?: string Se réfère au domaine publiquement accessible où les actifs (styles, polices et icônes) pourraient être récupérés par OpenReplay. Puisqu’ils sont nécessaires pour une relecture correcte de la session, cette option est utile pour contourner la limitation d’avoir votre site (et donc les actifs) hébergé dans un domaine privé. Exemple : https://mypublicsite.com/assets/.
• captureIFrames?: boolean Pour capturer tous les iFrames du même domaine dans votre application Web. Si vous souhaitez suivre un iFrame spécifique, ajoutez simplement l’attribut HTML data-openreplay-capture à la balise <iframe>. Par défaut : true.
• disableClickmaps?: boolean Pour désactiver les cartes de clics. Par défaut : true.
• verbose?: boolean Pour activer les logs. Par défaut : false.
• autoResetOnWindowOpen?: boolean Activez cette option pour réinitialiser l’ID de session lors de l’ouverture d’un nouvel onglet depuis votre application. Cela remplace la méthode window.open pour éviter les ID de session en double en raison du partage du stockage de session entre les onglets du navigateur. Par défaut : false.
• forceSingleTab: boolean Désactive la capacité d’enregistrement multi-onglets qui regroupe les sessions utilisateur, menées sur plusieurs onglets, en une seule relecture. À la place, en activant cette option, les sessions capturées dans différents onglets du navigateur seront enregistrées dans des enregistrements distincts. Par défaut : false.
• disableStringDict: boolean Désactive la logique de dictionnaire de chaînes (pour optimiser le stockage) dans les enregistrements. Par défaut : false.
• fixedCanvasScaling: boolean Force les images du canvas à être rendues avec une densité de pixels de 1 au lieu de devicePixelRatio. (réduit la qualité potentielle d’une image afin de réduire la taille du résultat final)

• respectDoNotTrack?: boolean Ne pas démarrer le traqueur si le drapeau “ne pas suivre” est activé dans le navigateur de l’utilisateur. Par défaut : false.
• obscureTextEmails?: boolean Obscurcit les e-mails dans les éléments de texte. Les e-mails seront convertis en une chaîne aléatoire d’astérisques. Par défaut : true.
• obscureTextNumbers?: boolean Obscurcit les chiffres dans les éléments de texte. Les chiffres seront convertis en une chaîne aléatoire d’astérisques. Par défaut : false.
• obscureInputEmails?: boolean Obscurcit les e-mails dans les champs de saisie. Les valeurs des e-mails seront converties en une chaîne aléatoire d’astérisques. Par défaut : true.
• defaultInputMode?: 0 | 1 | 2 Mode de capture par défaut pour les valeurs de saisie. Respectivement : en clair, obscurci ou ignoré. Par défaut : 1 (obscurci).

Notez que les données exclues sont obscurcies ou supprimées avant l’envoi des données aux serveurs OpenReplay. Les modifications apportées aux options ci-dessus ne peuvent pas être rétroactives et ne s’appliqueront qu’aux données nouvellement collectées. Voir Assainir les données pour plus de détails.

• consoleMethods?: Array<'log' | 'info' | 'warn' | 'error' 'debug' | 'assert'> | null Spécifie la liste des méthodes de console à capturer. Par défaut : ['log', 'info', 'warn', 'error', 'debug', 'assert']
• consoleThrottling?: number Nombre maximal d’entrées de console capturées par seconde. Par défaut : 30.

• captureExceptions?: boolean Capture les exceptions JavaScript et les traces de pile. Par défaut : true.

• captureResourceTimings?: boolean Enregistre les timings des ressources. Par défaut : true.
• capturePageLoadTimings?: boolean Enregistre les timings de chargement de la page. Par défaut : true.
• capturePageRenderTimings?: boolean Calcule les métriques de rendu de la page telles que Speed Index, Visually Complete ou Time To Interactive. Nécessite captureResourceTimings = true. Par défaut : true.

• capturePerformance?: boolean Pour capturer les métriques de performance telles que la fréquence d’images, la consommation de CPU et de mémoire. Par défaut : true.

L’option network concerne la capture des requêtes réseau et des charges utiles pour fetch et XHR.

network?: {
    failuresOnly: boolean;
    sessionTokenHeader: string;
    ignoreHeaders: Array<string> | boolean;
    capturePayload: boolean; // make sure you sanitize your data before enabling it
    sanitizer: (RequestResponseData) => RequestResponseData | null;
		captureInIframes: boolean;
  	axiosInstances: AxiosInstance[];
    useProxy?: boolean;
		tokenUrlMatcher?: (url: string) => boolean;
  }

Consultez les Options Réseau pour des exemples et plus de détails sur la façon de masquer les données sensibles.

L’option mouse concerne la capture des sélecteurs pour les clics afin de construire des cartes de clics.

mouse?: 
  {
  disableClickmaps?: boolean
  minSelectorDepth?: number
  nthThreshold?: number
  maxOptimiseTries?: number
  }

• disableClickmaps?: boolean Désactive entièrement le calcul du sélecteur. Par défaut : false.
• minSelectorDepth?: number Longueur minimale d’un sélecteur optimisé (par défaut 2). Exemple : body > div > div > p => body > p
• nthThreshold?: number Nombre d’essais de sélecteur avant de revenir aux sélecteurs nth-child. C’est une opération coûteuse et peut entraîner un surcoût important, ne réglez pas plus haut que 2000. Par défaut : 1000.
• maxOptimiseTries?: number Nombre d’essais pour optimiser et raccourcir le sélecteur. Par défaut : 10 000.

• connAttemptCount?: number Nombre maximal de tentatives de reconnexion lorsque les requêtes HTTP du traqueur échouent à atteindre le backend. Par défaut : 10.
• connAttemptGap?: number Durée entre chaque tentative de reconnexion (exprimée en ms). Par défaut : 8000.

• __DISABLE_SECURE_MODE?: boolean Pour permettre une connexion non sécurisée entre le traqueur et le backend sur des sites sans SSL. Ceci doit être utilisé uniquement à des fins de développement. Par défaut : false.