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

npm i @openreplay/react-native

Lors de l’instanciation du tracker d’OpenReplay, plusieurs options de configuration peuvent être fournies 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’.

Ajoutez le code suivant à votre fichier racine :

import Openreplay from '@openreplay/react-native';

// ...
useEffect(() => {
	Openreplay.tracker.startSession(
		'yourProjectKey',
		options, // explained below, set {} if empty
		'https://local.openreplay.instance/ingest' // if you're using our Serverless/SaaS plan then 'https://api.openreplay.com/ingest'
	);
}, [])

Afin de suivre les interactions des utilisateurs au sein de l’application, vous devrez ajouter les composants suivants à votre application :

• ORTouchTrackingView - ajouté au niveau racine pour suivre les interactions tactiles
• ORTrackedInput - wrapper autour de l’Input React-Native qui envoie des signaux chaque fois que l’utilisateur a terminé sa saisie
• ORSanitizedView - floute le contenu qui s’y trouve

// App.tsx
import Openreplay from '@openreplay/react-native';

function App() {
	const start = () => {
	    Openreplay.tracker.startSession(
	      process.env.REACT_APP_KEY!,
	      {},
	      process.env.REACT_APP_INGEST
	    );
	    Openreplay.tracker.setMetadata('key', 'value');
	    Openreplay.tracker.setUserID('user-id');
	    Openreplay.patchNetwork(global, () => false, {});
	};
	
	React.useEffect(() => start(), []);
	
	return (
		// this top-level view is required to track touch interactions
		<Openreplay.ORTouchTrackingView style={styles.container}> 
		      <View style={styles.container}>
		         <Openreplay.ORTrackedInput
		          style={styles.input}
		          onChangeText={onChangeNumber}
		          value={number}
		          placeholder="Trackable input"
		          numberOfLines={1}
		        />
		
		        <Openreplay.ORSanitizedView style={styles.sanitizedView}>
		          <Text>Contents of this view are sanitized and invisible on the recording</Text>
		        </Openreplay.ORSanitizedView>
		      </View>
		</Openreplay.ORTouchTrackingView>
	)
}

Consultez comment assainir les données dans les rejeux React Native pour plus de détails.

Par défaut, toutes les options sont définies sur true :

• crashes: Bool Active crashlytics.
• analytics: Bool Active le suivi analytique des vues marquées.
• performances: Bool Active l’écouteur de performances.
• logs: Bool Active l’écouteur de logs.
• screen: Bool Active l’enregistreur d’écran.