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/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 utilisateur 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 qu’il englobe

// 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 replays 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 le listener de performances.
• logs: Bool Active le listener de logs.
• screen: Bool Active l’enregistreur d’écran.

Si vous avez des questions concernant ce processus, n’hésitez pas à nous contacter sur notre Slack ou consultez notre Forum.