세션 리플레이 React Native SDK 플러그인

이 문서에서는 React Native SDK 플러그인을 사용하여 세션 리플레이를 설치하는 방법을 설명합니다. 애플리케이션에서 Amplitude React Native SDK를 사용하는 경우, 이 옵션을 사용하세요.

Amplitude 애널리틱스 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 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와 동일한 방식으로 레이아웃에 포함되며, 레이아웃에 공간을 차지하지 않는 바익으로 처리되지 않습니다. 기존 콘텐츠를 감싸는 경우, 콘텐츠가 사용하는 크기 및 플렉스 스타일을 AmpMaskView 자체에 적용하세요. flex: 1를 사용하거나 width과 height를 직접 지정하거나 alignItems를 사용하는 방법 등이 있습니다. 이러한 스타일을 적용하지 않으면 wrapper가 감싼 영역의 크기를 줄이거나 레이아웃을 변경할 수 있습니다.

나중에 뷰의 마스크를 해제하려면 mask 속성을 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를 처리하므로 동일한 마크업이라도 플랫폼에 따라 다르게 작동할 수 있습니다. 릴리스하기 전에 두 플랫폼에서 마스킹을 테스트하십시오.

세션 리플레이는 각 프레임을 캡처할 때 이러한 표현을 장치에 적용하므로, 업로드되는 리플레이 데이터는 원본 텍스트나 픽셀 대신 마스킹된 형태로 저장됩니다. 플레이어는 나중에 마스크된 콘텐츠를 복원할 수 없습니다.

두 플랫폼에서 영역을 모두 표시하려면 해당 영역의 amp-unmask 래퍼를 amp-mask 및 amp-block 영역 내에 중첩하지 말고 외부에 배치하세요.

사용자 옵트아웃

세션 리플레이 플러그인은 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일에 재설정됩니다.
• 월 초에 전체 할당량을 사용하지 않고 샘플링 속도를 사용하여 한 달 동안 세션 할당량을 분배하십시오.
• 최적의 샘플링 레이트를 찾으려면 Amplitude는 예를 들어 .01과 같이 낮은 수치로 시작할 것을 권장합니다. 이 값이 충분한 리플레이를 캡처하지 못할 경우 며칠 동안 비율을 높이십시오. 캡처된 세션 리플레이 수를 모니터링하는 방법은 캡처된 세션 수 보기를 참조하십시오.

세션 리플레이는 원격 샘플링 속도 설정을 지원합니다. 이를 통해 조직의 사용자가 코드를 변경하지 않고도 구현 후 프로젝트의 샘플링 속도를 구성하거나 업데이트할 수 있습니다. 충돌이 발생할 경우 세션 리플레이는 원격 설정을 기본값으로 사용합니다. 자세한 내용은 계정 설정을 참조하십시오.

문제 해결

Null 포인터 예외가 발생하면서 Android가 충돌함

사용자 지정 서버 URL을 사용할 때 Android 앱이 serverZone 파라미터와 관련된 NullPointerException(으)로 인해 충돌하는 경우, 최신 버전의 세션 리플레이 React Native 플러그인을 사용하고 있는지 확인하세요. 이전 버전에서는 사용자 지정 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입니다.

웹 뷰 추적(베타)

기본적으로 세션 리플레이는 웹 뷰를 차단하며 이를 추적하지 않습니다. 응용 프로그램에서 웹 뷰를 추적하려면 뷰를 AmpMaskView태그로 감싸고 amp-unmaskmask 속성을 적용하십시오.

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

Data retention

Session replay uses existing Amplitude tools and APIs to handle privacy and deletion requests.

Retention period

If your Amplitude plan includes Session Replay, Amplitude retains raw replay data for 30 days from the date of ingestion.

Purchase extra retention time, up to a maximum of 12 months. For more information, contact Amplitude Support.

If you purchase extra session volume, Amplitude retains raw replay data for up to 12 months from the date of ingestion. If you need a more strict policy, contact Amplitude support to set the value to 30 days.

Changes to the retention period impact replays ingested after the change. Sessions captured and ingested before a retention period change retain the previous retention period.

Replays that are outside of the retention period aren't viewable in Amplitude.

DSAR API

Amplitude DSAR API는 세션 재생에 대한 메타데이터를 반환하지만 원시 재생 데이터는 반환하지 않습니다. Amplitude는 세션 리플레이가 세션을 캡처할 때 자동으로 [Amplitude] Replay Captured 이벤트를 생성합니다. 이 이벤트에는 사용자 리플레이를 위해 수집된 세션 정보를 제공하는 [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 앱에서 사용할 수 있는 것과 동일한 블록 필터를 사용합니다. 세션 리플레이는 이벤트나 사용자 속성을 기반으로 트래픽을 차단하지 않습니다.