セッションリプレイ React Native SDK プラグイン

この記事では、React Native SDK プラグインを使用してセッションリプレイをインストールする方法について説明します。 アプリケーションで Amplitude React Native SDK を使用している場合は、このオプションを使用してください。

Amplitude Analytics SDK を使用せずにセッションリプレイをインストルメンテーションする場合は、セッションリプレイ React Native スタンドアロン SDK にアクセスしてください。

クイックスタート

npm install @amplitude/plugin-session-replay-react-native --save

アプリケーションコードを設定します。

import { SessionReplayPlugin, MaskLevel } from '@amplitude/plugin-session-replay-react-native';
// ...
const config: SessionReplayConfig = {
    enableRemoteConfig: true, // default true
    sampleRate: 1, // default 0
    autoStart: true, // default true
    maskLevel: MaskLevel.Medium, // default Medium
};
await init('YOUR_API_KEY').promise;
await add(new SessionReplayPlugin(config)).promise;

設定

画面上のデータをマスクする

セッションリプレイを使用すると、機密データやPIIを含む可能性のあるアプリケーションの領域をマスクまたは難読化できます。マスクはビューレベルで行われます。ビューをマスクするには、マスクするセクションの周囲にamp-maskマスクプロパティを持つAmpMaskViewタグを追加します。

import { AmpMaskView } from "@amplitude/plugin-session-replay-react-native";
// ...
<AmpMaskView mask="amp-mask">
  <Text
    style={[
      styles.sectionTitle,
      {
        color: isDarkMode ? Colors.white : Colors.black,
      },
    ]}
  >
    {title}
  </Text>
</AmpMaskView>;

AmpMaskView は通常の React Native レイアウトノードなので、Viewと同様にレイアウトに参加し、レイアウト上で透過的に扱われることはありません。既存のコンテンツをラップする場合は、flex: 1、明示的なwidthとheight、またはalignItemsなど、そのコンテンツが依存しているサイズ指定やフレックススタイルをAmpMaskView自体に適用してください。これらのスタイルがないと、ラッパーはラッピングした領域を縮小したりサイズを変更したりすることがあります。

ビューのマスクを後で解除するには、マスクプロパティをamp-unmaskに変更します。

import { AmpMaskView } from "@amplitude/plugin-session-replay-react-native";
// ...
<AmpMaskView mask="amp-unmask">
  <Text
    style={[
      styles.sectionTitle,
      {
        color: isDarkMode ? Colors.white : Colors.black,
      },
    ]}
  >
    {title}
  </Text>
</AmpMaskView>;

ビューを同じサイズの空のプレースホルダーに置き換えるには、マスクプロパティをamp-blockに設定します。

マスキングにおけるプラットフォームの違い

Android と iOS は異なるネイティブのセッションリプレイ・ライブラリでAmpMaskViewを解決するため、同一のマークアップでもプラットフォームごとに異なる動作をすることがあります。リリース前に両方のプラットフォームでマスクをテストしてください。

セッションリプレイは各フレームをキャプチャするときにこれらの表現をデバイスに適用するため、アップロードされた再生データには元のテキストやピクセルの代わりにマスクされた表現が保持されます。プレイヤーはマスクされたコンテンツを後で復元することはできません。

両方のプラットフォームでリージョンを表示できるようにするには、そのラッパーを 1 つの amp-maskおよび amp-blockリージョン内にネストするのではなく、すべての amp-unmaskおよび リージョンの外側に配置します。

ユーザーのオプトアウト

セッションリプレイプラグインはReact Native SDKのoptOut設定に従っており、単独ではユーザーによるオプトアウトをサポートしていません。

録画の開始と停止

セッションリプレイプラグインは、録画セッションを開始および停止するためのstart()およびstop()メソッドを提供します。 これらのメソッドを呼び出して、アプリケーション内の特定のページや機能の記録を制御します。

import { SessionReplayPlugin } from "@amplitude/plugin-session-replay-react-native";
// ...
await init("YOUR_API_KEY").promise;
const sessionReplayPlugin = new SessionReplayPlugin();
await add(sessionReplayPlugin).promise;
// Stop recording
await sessionReplayPlugin.stop();
// Resume recording
await sessionReplayPlugin.start();

自動的にキャプチャを開始せずにプラグインを初期化するには、autoStart設定オプションをfalseに設定してください。

import { SessionReplayPlugin } from '@amplitude/plugin-session-replay-react-native';
// ...
const config: SessionReplayConfig = {
    enableRemoteConfig: true,
    sampleRate: 1,
    autoStart: false, // Don't start capturing automatically
};
await init('YOUR_API_KEY').promise;
const sessionReplayPlugin = new SessionReplayPlugin(config);
await add(sessionReplayPlugin).promise;
// Later, when you want to begin capture
await sessionReplayPlugin.start();

EU域内のデータレジデンシー

セッションリプレイは、EUデータセンターを使用するAmplitudeのお客様が利用できます。初期化時にserverZone設定オプションを EUに設定します。 例えば：

import { SessionReplayPlugin } from '@amplitude/plugin-session-replay-react-native';
// ...
const config: SessionReplayConfig = {
    enableRemoteConfig: true, // default true
    sampleRate: 1, // default 0
    serverZone: "EU" // [tl! ~~]
};
await init('YOUR_API_KEY').promise;
await add(new SessionReplayPlugin(config)).promise;

サンプリングレート

デフォルトでは、セッションリプレイはリプレイ用にセッションの0%をキャプチャします。リモート設定を有効にしている場合は、セッションリプレイの設定ページからサンプルレートを更新するか、sampleRate設定オプションを使用して、セッションリプレイがキャプチャするセッション総数の割合を設定します。例えば：

import { SessionReplayPlugin } from '@amplitude/plugin-session-replay-react-native';
// ...
const config: SessionReplayConfig = {
    enableRemoteConfig: true, // default true
    sampleRate: 1, // [tl! ~~]
};
await init('YOUR_API_KEY').promise;
await add(new SessionReplayPlugin(config)).promise;

sampleRateを設定するには、セッションリプレイプランの月間割り当て量を考慮してください。 たとえば、月間割り当て量が2,500,000セッションで、月間平均セッション数が3,000,000の場合、割り当て量は平均セッション数の83%です。この場合、サンプリングが月全体にわたって継続されるようにするには、sampleRateを.83またはそれ以下に設定します。

サンプルレートを検討する際には、次の点に注意してください。

• 月間のセッションクォータに達すると、Amplitudeはリプレイ用のセッションのキャプチャを停止します。
• セッションクォータは毎月 1 日にリセットされます。
• 月の初めにクォータをフルに活用するのではなく、サンプルレートを使用して、1 か月にわたってセッションクォータを分配してください。
• 最適なサンプルレートを見つけられるように、Amplitudeでは低い値（例：.01）から始めることを推奨します。この値で十分なリプレイが記録されない場合は、数日間かけてレートを上げてください。キャプチャされたセッションリプレイの数をモニターする方法については、「キャプチャされたセッション数の表示」を参照してください。

セッションリプレイはリモートサンプリングレート設定をサポートしています。これにより、組織内のユーザーはコードを変更することなく、実装後にプロジェクトのサンプリングレートを設定または更新できます。競合が発生した場合、セッションリプレイはデフォルトでリモートの設定に設定されます。詳細については、アカウント設定を参照してください。

トラブルシューティング

Androidがヌルポインタ例外でクラッシュする

カスタムサーバーURLを使用する際に、AndroidアプリがserverZoneパラメーターに関連するNullPointerExceptionでクラッシュする場合は、セッションリプレイReactネイティブプラグインの最新バージョンを使用していることを確認してください。以前のバージョンでは、カスタムserverUrl構成を使用する際に、serverZoneパラメーターを明示的に設定する必要がありました。

このエラーは通常次のように表示されます。

java.lang.NullPointerException: Parameter specified as non-null is null: method com.amplitude.pluginsessionreplayreactnative.PluginSessionReplayReactNativeModule.setup, parameter serverZone

解決策：@amplitude/plugin-session-replay-react-nativeの最新バージョンに更新してください。この際、serverZoneパラメーターはオプションであり、指定されていない場合はデフォルトでUSになります。

ウェブビューの追跡（ベータ）

デフォルトでは、セッションリプレイはWebビューをブロックし、それらを追跡しません。アプリケーション内のウェブビューを追跡する場合は、ビューをAmpMaskViewタグでラップし、amp-unmaskマスクプロパティーを適用します。

<AmpMaskView mask="amp-unmask" style={{ flex: 1 }}>
  <WebView source={{ uri: "https://reactnative.dev/" }} style={{ flex: 1 }} />
</AmpMaskView>

Data retention

Session Replay uses Amplitude tools and APIs for privacy and deletion requests. Review consent guidance when you implement capture.

Retention period

For default retention, extended retention, and the effective date of retention changes, go to the Session Replay data lifecycle reference.

DSAR API

Amplitude DSAR APIは、セッションのリプレイに関するメタデータを返しますが、生のリプレイデータは返しません。 Amplitudeは、セッションリプレイがセッションをキャプチャするときに[Amplitude] Replay Capturedイベントを自動的に作成します。このイベントにはプロパティが含まれており、Amplitudeがユーザーのリプレイ用に収集したセッションに関する情報を提供します。[Amplitude] Session Replay ID

{
 "amplitude_id": 123456789,
 "app": 12345,
 "event_time": "2020-02-15 01:00:00.123456",
 "event_type": "first_event",
 "server_upload_time": "2020-02-18 01:00:00.234567",
 "device_id": "your device id",
 "user_properties": { ... }
 "event_properties": {
 "[Amplitude] Session Replay ID": "cb6ade06-cbdf-4e0c-8156-32c2863379d6/1699922971244"
 }
 "session_id": 1699922971244,
}

データの削除

セッションリプレイはAmplitudeのユーザープライバシーAPIを使用して削除リクエストを処理します。削除要求が成功すると、指定されたユーザーのすべてのセッションリプレイが削除されます。

セッションリプレイを使用しているAmplitudeプロジェクトを削除すると、Amplitudeはそのリプレイデータを削除します。

ボットフィルター

セッションリプレイはAmplitudeアプリで使用できるのと同じブロックフィルターを使用します。 セッションリプレイは、イベントやユーザープロパティに基づいてトラフィックをブロックしません。