La ligne suivante installera le tracker et, avec lui, le SDK afin que vous puissiez profiter de toutes les fonctionnalités du tracker.

npm i @openreplay/tracker

Lors de l’instanciation du tracker d’OpenReplay, plusieurs options de configuration sont à votre disposition pour 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 depuis votre tableau de bord OpenReplay, sous ‘Preferences > Projects’.

Si votre site web est une application monopage (SPA), vous pouvez utiliser le tracker en tant que singleton :

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)

Vous pouvez également créer une nouvelle instance de classe :

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 utilise le rendu côté serveur (SSR) (c’est-à-dire NextJS, NuxtJS), utilisez l’extrait de code ci-dessous. Assurez-vous que tracker.start() est appelé une fois l’application démarrée (dans useEffect ou componentDidMount).

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
});
//...
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. Seule projectKey est obligatoire.

• 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 assembler en un seul enregistrement. Si la session ne peut pas être poursuivie (elle n’existe pas ou est terminée), le tracker en démarrera automatiquement une nouvelle. Il est également retourné par stop(). Plus de détails à ce sujet ici.
• ingestPoint?: string Votre domaine OpenReplay (c’est-à-dire https://openreplay.mydomain.com/ingest), vers lequel le tracker enverra les événements. Cette option est facultative pour les utilisateurs d’OpenReplay Cloud. Valeur 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 Fait référence au domaine accessible publiquement à partir duquel les ressources (styles, polices et icônes) peuvent être récupérées par OpenReplay. Comme elles sont nécessaires à une reproduction de session correcte, cette option est utile pour contourner la limitation liée au fait que votre site (et donc les ressources) soit hébergé sur 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>. Valeur par défaut : true.
• disableClickmaps?: boolean Pour désactiver le calcul des sélecteurs CSS (utilisé dans les cartes de clics). Valeur par défaut : false.
• __debug__: number Pour activer les journaux de débogage. Valeur par défaut : 0 (désactivé).
  • 2 : Erreurs.
  • 3 : Erreurs et avertissements.
  • 4 : Erreurs, avertissements et journaux.
  • 5 : Verbeux.
• 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 afin d’éviter les sessionID en double dus au stockage de session partagé entre les onglets du navigateur. Valeur par défaut : false.
• forceSingleTab: boolean Désactive la capacité d’enregistrement multi-onglets qui assemble les sessions utilisateur, menées sur plusieurs onglets, en une seule reproduction. À la place, en activant cette option, les sessions capturées dans différents onglets du navigateur seront enregistrées dans des enregistrements distincts. Valeur par défaut : false.
• disableStringDict: boolean Désactive la logique du dictionnaire de chaînes (pour optimiser le stockage) dans les enregistrements. Valeur par défaut : false.
• fixedCanvasScaling: boolean Force le rendu des images de canvas avec une densité de pixels de 1 au lieu de devicePixelRatio. (réduit la qualité potentielle d’une image afin de diminuer la taille du résultat final). Valeur par défaut : false.
• disableCanvas?: boolean Désactive l’enregistrement des éléments canvas. Valeur par défaut : false.
• assistSocketHost?: string Peut être utilisé pour définir un hôte spécifique pour la connexion du plugin assist. Par défaut, prend la valeur d’ingestPoint.
• nodes?: { maintainer: MaintainerOptions } La nouvelle option nodes.maintainer aide à gérer la mémoire et à nettoyer les nœuds du DOM qui ne sont plus utilisés. Elle dispose des paramètres suivants :
  • interval: number : Intervalle de temps (en millisecondes) entre les exécutions de nettoyage. Valeur par défaut : 30 * 1000 (30 secondes).
  • batchSize: number : Nombre de nœuds à vérifier lors de chaque exécution de nettoyage. Valeur par défaut : 2500.
  • enabled: boolean : Active ou désactive le mainteneur de nœuds. Valeur par défaut : true.

• inlineCss: number : Force le tracker à enregistrer et à envoyer les feuilles de style distantes sous forme de messages classiques au lieu de les mettre en cache sur le backend. Cela est utile lorsque les fichiers CSS sont privés et ne peuvent donc pas être mis en cache par le backend d’OpenReplay. Les valeurs peuvent être :
  • 0 : Le fichier CSS est mis en cache par le backend. Comportement par défaut.
  • 1 : Tentera d’enregistrer le fichier css lié en tant qu’objet AdoptedStyleSheet.
  • 2 : Récupère le fichier, puis simule le comportement d’AdoptedStyleSheets pour la reproduction.
  • 3 : Récupère le fichier, puis l’enregistre en tant que css brut à l’intérieur d’un nœud <style> — utilisez cette option si vous avez beaucoup de propriétés abrégées dans vos fichiers CSS (couvre un bug de la spécification CSSOM).
• css: CssRulesOptions : Offre une meilleure prise en charge des applications construites avec la bibliothèque emotion-js (c’est-à-dire les composants MUI). Elle s’accompagne des paramètres ci-dessous :
  • scanInMemoryCSS: boolean : Activez ceci si vous rencontrez des problèmes avec les styles créés par emotionjs. Valeur par défaut : false.
  • checkCssInterval: number : À quelle fréquence analyser les feuilles de style suivies qui ont des règles vides. Valeur par défaut : 200 (ms).
  • checkLimit: number : Utile pour les cas avec un nombre limité de mutations et/ou lorsque les feuilles de style sont hydratées côté client après le rendu initial. Appliqué à chaque feuille de style individuellement. La valeur doit être = X/checkCssInterval, où X est la durée d’observation en ms. Valeur par défaut : 0 (désactivé).

• respectDoNotTrack?: boolean Ne démarre pas le tracker si l’option do-not-track est activée dans le navigateur de l’utilisateur. Valeur par défaut : false.
• obscureTextEmails?: boolean Masque les adresses e-mail dans les éléments de texte. Les e-mails seront convertis en une chaîne aléatoire d’astérisques. Valeur par défaut : true.
• obscureTextNumbers?: boolean Masque les nombres dans les éléments de texte. Les nombres seront convertis en une chaîne aléatoire d’astérisques. Valeur par défaut : false.
• obscureInputEmails?: boolean Masque les adresses e-mail dans les champs de saisie. Les valeurs d’e-mail seront converties en une chaîne aléatoire d’astérisques. Valeur par défaut : true.
• obscureInputNumbers?: boolean Masque les nombres dans les champs de saisie. Les valeurs numériques seront converties en une chaîne aléatoire d’astérisques. Si cette option est désactivée, veillez à assainir les champs de saisie susceptibles de contenir des données sensibles telles que des codes postaux ou des coordonnées de carte de crédit. Valeur par défaut : true.
• obscureInputDates?: boolean Masque les dates dans les champs de saisie. Les valeurs de date seront converties en une chaîne aléatoire d’astérisques. Valeur par défaut : false.
• defaultInputMode?: 0 | 1 | 2 Mode de capture par défaut pour les valeurs de saisie. Respectivement : brut, masqué ou ignoré. Valeur par défaut : 2 (ignoré).
• urls : Vous permet de personnaliser la manière dont les événements de localisation de page sont enregistrés via les options suivantes :
  • urlSanitizer?: (url: string) => string Vous permet d’assainir l’url de la page (pour supprimer les tokens d’utilisation, par exemple).
  • titleSanitizer?: (title: string) => string Vous permet d’assainir le titre de la page.
• resourceNameSanitizer?: (url: string) => string Vous permet d’assainir les URL des ressources réseau enregistrées.

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

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

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

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

• capturePerformance?: boolean Pour capturer les métriques de performances telles que la fréquence d’images, la consommation de CPU et de mémoire. Valeur par défaut : true.
• longTasks?: boolean Pour capturer les événements long-animation-frame. Valeur par défaut : false.

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 Network Options pour des exemples et plus de détails sur la manière d’occulter 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 and WebGL pour savoir comment activer cette capacité et obtenir plus de détails sur les options disponibles.

L’option crossdomain concerne la capture des iFrames provenant de différents domaines. 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
	}

Depuis la version 14.0.10 du Tracker, l’attribut data-domain n’est plus requis sur les éléments HTML lorsque vous travaillez avec des iFrames inter-domaines.

Consultez Cross-domain iFrame Tracking pour plus de détails sur la manière 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 cartes de clics.

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

• disableClickmaps?: boolean Désactive entièrement le calcul des sélecteurs. Valeur 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 de tentatives de sélecteur avant de se rabattre sur les sélecteurs nth-child. Il s’agit d’une opération coûteuse qui peut entraîner une surcharge importante ; ne la définissez pas au-dessus de 2000. Valeur par défaut : 1000.
• maxOptimiseTries?: number Nombre de tentatives pour optimiser et raccourcir le sélecteur. Valeur par défaut : 10 000.

• connAttemptCount?: number Nombre maximal de tentatives lorsque les requêtes HTTP du tracker ne parviennent pas à atteindre le backend. Valeur par défaut : 10.
• connAttemptGap?: number Durée entre chaque nouvelle tentative (exprimée en ms). Valeur par défaut : 8000.

• __DISABLE_SECURE_MODE?: boolean Pour autoriser une connexion non sécurisée entre le tracker et le backend sur les sites sans SSL. Cela doit être utilisé uniquement à des fins de développement. Valeur par défaut : false.