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 que vous souhaitez les regrouper en un seul enregistrement. Dans le cas où il n’est pas possible de poursuivre la session (elle n’existe pas ou est terminée), le traqueur en démarrera automatiquement une nouvelle. Il est également renvoyé par stop(). Plus de détails à ce sujet 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 d’OpenReplay Cloud. Par défaut : https://api.openreplay.com/ingest (qui pointe vers OpenReplay Cloud).
• 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 le calcul des sélecteurs CSS (utilisé dans les cartographies de clics). Par défaut : false.
• verbose?: boolean Pour activer les logs. Par défaut : false.
• autoResetOnWindowOpen?: boolean Activez cette option pour réinitialiser le sessionID lors de l’ouverture d’un nouvel onglet depuis votre application. Cela remplace la méthode window.open pour éviter les sessionIDs 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. Au lieu de cela, 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 le rendu des images du canvas avec une densité de pixels de 1 au lieu de devicePixelRatio. (réduit la qualité potentielle d’une image afin de rendre le résultat final plus petit en taille). Par défaut : false.
• disableCanvas?: boolean Désactive l’enregistrement des éléments canvas. Par défaut : false.
• assistSocketHost?: string Peut être utilisé pour définir un hôte spécifique pour la connexion du plugin Assist. Prend par défaut la valeur de ingestPoint.

• 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.
• obscureInputNumbers?: boolean Obscurcit les chiffres dans les champs de saisie. Les valeurs numériques seront converties en une chaîne aléatoire d’astérisques. Par défaut : false.
• obscureInputDates?: boolean Obscurcit les dates dans les champs de saisie. Les valeurs de dates seront converties en une chaîne aléatoire d’astérisques. Par défaut : false.
• 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 canvas concerne la capture des éléments canvas/WebGL :

canvas?: {
  disableCanvas?: boolean
  fixedCanvasScaling?: boolean
  useAnimationFrame?: boolean
  fileExt?: 'webp' | 'png' | 'jpeg' | 'avif'
}

Consultez Canvas et WebGL pour savoir comment activer cette fonctionnalité et obtenir plus de détails sur les options disponibles.

L’option crossdomain concerne la capture des iFrames provenant de domaines différents. Elle est utilisée conjointement avec l’option captureIFrames qui doit être définie sur true.

	crossdomain?: {
		/**
		 * Enable cross-domain tracking
		 * @default false
		 * */
		enabled?: boolean
		/**
		 * Used to specify the parent domain, will be '*' by default
		 * (Check your CSP settings)
		 * @default '*'
		 * */
		parentDomain?: string
	}

Consultez Suivi des iFrames inter-domaines pour plus de détails sur la façon de capturer un iFrame provenant d’un domaine différent.

L’option mouse concerne la capture des sélecteurs pour les clics afin de construire des cartographies 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 lorsque les requêtes HTTP du traqueur échouent à atteindre le backend. Par défaut : 10.
• connAttemptGap?: number Durée entre chaque tentative (exprimée en ms). Par défaut : 8000.

• onFlagsLoad callback utilisé pour effectuer une action une fois que les feature flags sont chargés (à chaque fois).

 flags?: {
 	onFlagsLoad?: (flags: IFeatureFlag[]) => void
 } 

// ...
interface IFeatureFlag {
  key: string
  is_persist: boolean
  value: string | boolean
  payload: string
}

• __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.