次のコマンドを実行すると、トラッカーと、すべてのトラッカー機能を利用するための SDK がインストールされます。

npm i @openreplay/react-native

OpenReplay のトラッカーをインスタンス化する際に、録画や録画体験のさまざまな側面をカスタマイズするための設定オプションを多数指定できます。コンストラクターでは projectKey オプションを必ず設定する必要があります。この値は、OpenReplay ダッシュボードの ‘Preferences > Projects’ から取得できます。

次のコードをルートファイルに追加します：

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

アプリ内でのユーザーインタラクションをトラッキングするには、次のコンポーネントをアプリケーションに追加する必要があります：

• ORTouchTrackingView - タッチインタラクションをトラッキングするために、ルートレベルに追加します
• ORTrackedInput - React-Native の Input のラッパーで、ユーザーが入力を終えるたびにシグナルを送信します
• ORSanitizedView - 内部のコンテンツをぼかし処理します

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

詳細については、React Native リプレイでのデータのサニタイズ方法を参照してください。

デフォルトでは、すべてのオプションが true に設定されています：

• crashes: Bool クラッシュレポート機能（crashlytics）を有効にします。
• analytics: Bool マークされたビューのアナリティクストラッキングを有効にします。
• performances: Bool パフォーマンスリスナーを有効にします。
• logs: Bool ログリスナーを有効にします。
• screen: Bool 画面レコーダーを有効にします。

このプロセスについてご不明な点がございましたら、お気軽に Slack までお問い合わせください。