Mit der folgenden Zeile installieren Sie den Tracker und damit das SDK, sodass Sie alle Funktionen des Trackers nutzen können.

npm i @openreplay/react-native

Beim Instanziieren des OpenReplay-Trackers stehen Ihnen mehrere Konfigurationsoptionen zur Verfügung, mit denen Sie viele Aspekte der Aufzeichnung und der Aufzeichnungserfahrung anpassen können. Sie müssen die Option projectKey im Konstruktor festlegen. Diesen Wert finden Sie in Ihrem OpenReplay-Dashboard unter ‘Preferences > Projects’.

Fügen Sie den folgenden Code in Ihre Root-Datei ein:

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'
	);
}, [])

Um Benutzerinteraktionen innerhalb der App zu erfassen, müssen Sie Ihrer Anwendung die folgenden Komponenten hinzufügen:

• ORTouchTrackingView - wird auf der Root-Ebene hinzugefügt, um Touch-Interaktionen zu erfassen
• ORTrackedInput - Wrapper um den React-Native-Input, der Signale sendet, sobald der Benutzer die Eingabe abgeschlossen hat
• ORSanitizedView - verwischt den darin enthaltenen Inhalt

// 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>
	)
}

Weitere Informationen finden Sie unter So bereinigen Sie Daten in React-Native-Replays.

Standardmäßig sind alle Optionen auf true gesetzt:

• crashes: Bool Aktiviert Crashlytics.
• analytics: Bool Aktiviert das Analytics-Tracking markierter Ansichten.
• performances: Bool Aktiviert den Performance-Listener.
• logs: Bool Aktiviert den Logs-Listener.
• screen: Bool Aktiviert den Screen Recorder.

Wenn Sie Fragen zu diesem Vorgang haben, melden Sie sich gerne bei uns im Slack .