모바일 세션 리플레이 설치 및 설정

문서 > RUM & 세션 재생 > 세션 재생 > 모바일 세션 재생 > 모바일 세션 리플레이 설치 및 설정

설정

모든 세션 리플레이 SDK 버전은 Maven Central Repository에서 확인할 수 있습니다.

Android에서 모바일 세션 리플레이을 설정하려면:

보기 계측이 활성화된 상태에서 Datadog Android RUM SDK 설정 및 초기화를 완료했는지 확인하세요.
Datadog 세션 리플레이을 종속성으로 선언합니다:

build.gradle.kts

    implementation("com.datadoghq:dd-sdk-android-rum:[datadog_version]")
    implementation("com.datadoghq:dd-sdk-android-session-replay:[datadog_version]")
    // Material 지원이 필요한 경우
    implementation("com.datadoghq:dd-sdk-android-session-replay-material:[datadog_version]")
    // Jetpack Compose 지원이 필요한 경우
    implementation("com.datadoghq:dd-sdk-android-session-replay-compose:[datadog_version]")
   

앱에서 세션 리플레이을 활성화합니다:

Application.kt

   val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
    // Material 확장 지원이 필요한 경우
    .addExtensionSupport(MaterialExtensionSupport())
    // Jetpack Compose 지원이 필요한 경우
    .addExtensionSupport(ComposeExtensionSupport())
    .build()
   SessionReplay.enable(sessionReplayConfig)
   

iOS용 모바일 세션 리플레이 설정하기:

보기 계측이 활성화된 상태에서 Datadog iOS RUM SDK 설정 및 초기화를 완료했는지 확인하세요.

패키지 매니저에 따라 Datadog 세션 리플레이 라이브러리를 프로젝트에 연결합니다:

패키지 매니저	설치 단계
CocoaPods	`Podfile`에 `pod 'DatadogSessionReplay'`를 추가합니다.
Swift Package Manager	앱 대상에 `DatadogSessionReplay` 라이브러리를 종속성으로 추가합니다.
Carthage	앱 대상에 `DatadogSessionReplay.xcframework`를 종속성으로 추가합니다.

앱에서 세션 리플레이을 활성화합니다:

AppDelegate.swift

   import DatadogSessionReplay

   SessionReplay.enable(
       with: SessionReplay.Configuration(
           replaySampleRate: sampleRate,
           // 실험적 SwiftUI 레코딩 활성화
           featureFlags: [.swiftui: true]
       )
   )
   

모든 세션 리플레이 SDK 버전은 Maven Central Repository에서 확인할 수 있습니다.

Kotlin Multiplatform용 모바일 세션 리플레이를 설정합니다.

보기 계측이 활성화된 상태에서 Datadog Kotlin Multiplatform RUM SDK를 설정 및 초기화했는지 확인하세요.
DatadogSessionReplay iOS 라이브러리를 링크 전용 종속성으로 추가합니다. 지침을 확인하려면 가이드를 참조하세요.
다음과 같이 Datadog 세션 리플레이를 종속성으로 선언합니다.

build.gradle.kts

    kotlin {
      sourceSets {
        commonMain.dependencies {
          implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-rum:[datadog_version]")
          implementation("com.datadoghq:dd-sdk-kotlin-multiplatform-session-replay:[datadog_version]")
        }

        // in case you need Material support on Android
        androidMain.dependencies {
          implementation("com.datadoghq:dd-sdk-android-session-replay-material:[datadog_version]")
        }
      }
    }
   

앱에서 세션 리플레이를 활성화합니다.

Application.kt

   // Common source set에서
   val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
    .build()
   SessionReplay.enable(sessionReplayConfig)
   

Android에서 Material 지원이 필요한 경우 Android 소스 세트에서 제공되는 SessionReplayConfiguration.Builder.addExtensionSupport(MaterialExtensionSupport()) 메서드를 호출합니다.

세션 리플레이를 활성화하려면 Datadog React Native SDK 버전 2.0.4 이상을 사용해야 하며, 세션 리플레이 SDK 버전이 사용 중인 React Native SDK 버전과 일치하는지 확인해야 합니다.

모든 세션 리플레이 SDK 버전은 npmjs repository에서 확인할 수 있습니다.

다음에 따라 React Native용 모바일 세션 리플레이를 설정합니다.

보기 계측이 활성화된 상태에서 Datadog React Native SDK를 설정 및 초기화했는지 확인하세요.
@datadog/mobile-react-native-session-replay 종속성을 추가하고 yarn 또는 npm로 @datadog/mobile-react-native 버전과 일치하는지 확인합니다.
```
yarn add @datadog/mobile-react-native-session-replay
```
```
npm install @datadog/mobile-react-native-session-replay
```
Datadog React Native SDK 및 세션 리플레이 SDK 종속성을 가져오기한 후 SDK를 설정할 때 다음과 같이 해당 기능을 활성화할 수 있습니다.
- DatadogProvider 구성 요소를 사용하는 경우:

App.tsx

     import { DatadogProvider, DatadogProviderConfiguration } from "@datadog/mobile-react-native";
    import {
      ImagePrivacyLevel,
      SessionReplay,
      TextAndInputPrivacyLevel,
      TouchPrivacyLevel,
    } from "@datadog/mobile-react-native-session-replay";

     const configuration = new DatadogProviderConfiguration(/* ... */)

     // 이 함수를 DatadogProvider에 onInitialization prop으로 추가합니다.
     const onSDKInitialized = async () => {
         await SessionReplay.enable({
            replaySampleRate: 100,
            textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS, 
            imagePrivacyLevel: ImagePrivacyLevel.MASK_NONE, 
            touchPrivacyLevel: TouchPrivacyLevel.SHOW, 
         });
     };

     const App = () => {
       const navigationRef = React.useRef(null);
       return (
         <DatadogProvider configuration={configuration} onInitialization={onSDKInitialized}>
           {/* App */}
         </DatadogProvider>
       );
     };

     export default App;
    

DdSdkReactNative.initialize 메서드를 사용하는 경우:

App.tsx

     import { DdSdkReactNative, DdSdkReactNativeConfiguration } from "@datadog/mobile-react-native";
     import { SessionReplay } from "@datadog/mobile-react-native-session-replay";

     const configuration = new DdSdkReactNativeConfiguration(/* ... */)

     DdSdkReactNative.initialize(configuration)
       .then(() => SessionReplay.enable())
       .catch((error) => { /* handle error */ });

    

Datadog SDK를 초기화한 후 앱에서 세션 리플레이를 활성화합니다.

App.tsx

   import { SessionReplay } from "@datadog/mobile-react-native-session-replay";

   SessionReplay.enable();

다음과 같이 세션 리플레이용 설정을 정의합니다.

App.tsx

      SessionReplay.enable({
        replaySampleRate: 100, // SDK가 캡처한 모든 세션에서 세션 리플레이를 사용할 수 있음
      });

   

본 단계에서 세션 리플레이에 적용되는 다중 개인정보 보호 수준을 설정할 수도 있습니다.

(iOS만 해당) iOS 포드를 업데이트합니다.
```
   cd ios && pod install
```
iOS 및 Android 앱을 다시 빌드합니다.

웹 보기 계측

iOS 또는 Android의 웹 보기 및 기본 보기 모두에서 전체 사용자 여정을 녹화한 후 단일 세션 리플레이에서 시청할 수 있습니다.

세션 리플레이는 브라우저 SDK로 녹화되며, 모바일 SDK는 웹뷰 레코딩을 일괄 처리 및 업로드합니다.

다음에 따라 Android용 통합 웹 및 기본 세션 리플레이 보기를 계측합니다.

Android SDK 버전 2.8.0 이상을 사용하고 있는지 확인합니다.
모바일 애플리케이션에서 웹뷰 추적을 활성화합니다.
웹 애플리케이션에서 세션 리플레이를 활성화합니다.
모바일 애플리케이션에서 세션 리플레이를 활성화합니다(위의 설정 지침 참조).

다음에 따라 iOS용 통합 웹 및 기본 세션 리플레이 보기를 계측합니다.

iOS SDK 버전 2.13.0 이상을 사용하고 있는지 확인합니다.
모바일 애플리케이션에서 웹뷰 추적을 활성화합니다.
웹 애플리케이션에서 세션 리플레이를 활성화합니다.
모바일 애플리케이션에서 세션 리플레이]을 활성화합니다(위의 설정 지침 참조).

다음에 따라 Kotlin Multiplatform용 통합 웹 및 기본 세션 리플레이 보기를 계측합니다.

모바일 애플리케이션에서 웹뷰 추적을 활성화합니다.
웹 애플리케이션에서 세션 리플레이를 활성화합니다.
모바일 애플리케이션에서 세션 리플레이]을 활성화합니다(위의 설정 지침 참조).

다음에 따라 React Native용 통합 웹 및 기본 세션 리플레이 보기를 계측합니다.

React Native 애플리케이션에서 웹뷰 추적을 활성화합니다.
웹 애플리케이션에서 세션 리플레이를 활성화합니다.
모바일 애플리케이션에서 세션 리플레이]을 활성화합니다(위의 설정 지침 참조).

참고: 본 기능은 Android용 React Native [New Architecture][3]와 호환되지 않습니다.

추가 설정

녹화된 세션의 샘플 속도가 표시되도록 설정

샘플 속도는 세션 리플레이 설정의 옵션 파라미터입니다. 해당 값은 0.0에서 100.0 사이의 숫자여야 하며, 0은 리플레이가 녹화되지 않음을 뜻하고, 100은 모든 RUM 세션에 리플레이가 포함됨을 나타냅니다. 설정에서 샘플 속도를 지정하지 않으면 기본값인 100이 적용됩니다.

이 샘플 속도는 RUM 샘플 속도에 추가로 적용됩니다. 예를 들어 RUM이 80%의 샘플 속도를 사용하고 세션 리플레이가 20%의 샘플 속도를 사용하는 경우, 모든 사용자 세션 중 80%가 RUM에 포함되고 해당 세션 내에서는 단 20%만 리플레이가 있다는 의미입니다.

Application.kt

val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
  ...
  .build()

AppDelegate.swift

var sessionReplayConfig = SessionReplay.Configuration(
    replaySampleRate: sampleRate
)

Application.kt

val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
  ...
  .build()

App.tsx

import { SessionReplay } from "@datadog/mobile-react-native-session-replay";

SessionReplay.enable({
  replaySampleRate: [sampleRate]
});

수동으로 레코딩 시작 또는 중지

기본적으로 세션 리플레이는 자동으로 레코딩을 시작합니다. 그러나 애플리케이션의 특정 지점에서 수동으로 레코딩을 시작하려면 아래와 같이 옵션 startRecordingImmediately 파라미터를 사용하고 나중에 SessionReplay.startRecording()를 호출합니다. SessionReplay.stopRecording()로 언제든 레코딩을 중지할 수 있습니다.

Application.kt

    val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
        .startRecordingImmediately(false)
        .build()
    // 여기서 작업을 수행하세요.
    SessionReplay.startRecording()
    SessionReplay.stopRecording()

AppDelegate.swift

    let sessionReplayConfig = SessionReplay.Configuration(
        replaySampleRate: sampleRate,
        startRecordingImmediately: false
    )
    // 여기서 작업을 수행하세요.
    SessionReplay.startRecording()
    SessionReplay.stopRecording()

Application.kt

    val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
        .startRecordingImmediately(false)
        .build()
    // 여기서 작업을 수행하세요.
    SessionReplay.startRecording()
    SessionReplay.stopRecording()

App.tsx

import { SessionReplay } from "@datadog/mobile-react-native-session-replay";

SessionReplay.enable({
  replaySampleRate: sampleRate,
  startRecordingImmediately: false
});
// 여기서 작업을 수행하세요.
SessionReplay.startRecording();
SessionReplay.stopRecording();

세션 리플레이 데이터가 전송되고 있는지 확인

앱에서 세션 리플레이 데이터를 보내고 있는지 확인하기 위해 Datadog SDK에서 디버그 옵션을 활성화할 수 있습니다.

Application.kt

Datadog.setVerbosity(Log.DEBUG)

AppDelegate.swift

Datadog.verbosityLevel = .debug

문제가 없다면 앱을 실행한 후 약 30초 후에 Xcode 디버그 콘솔에서 다음과 같은 로그가 나타납니다:

Xcode console

[DATADOG SDK] 🐶 → 10:21:29.812 ⏳ (session-replay) Uploading batch...
[DATADOG SDK] 🐶 → 10:21:30.442    → (session-replay) accepted, won't be retransmitted: [response code: 202 (accepted), request ID: BD445EA-...-8AFCD3F3D16]

Application.kt

Datadog.setVerbosity(SdkLogVerbosity.DEBUG)

SDK를 초기화할 때 상세도를 DEBUG로 설정합니다.

App.tsx

import { SdkVerbosity } from "@datadog/mobile-react-native";

...

config.verbosity = SdkVerbosity.DEBUG;

개인정보 보호 옵션

개인정보 보호 옵션을 참조하세요.

참고 자료

추가 유용한 문서, 링크 및 기사:

모바일 세션 리플레이설명서

모바일 세션 리플레이이 앱 성능에 미치는 영향설명서

모바일 세션 리플레이 개인정보 보호 옵션설명서

모바일 세션 리플레이 문제 해결설명서

세션 리플레이설명서

웹 보기 추적문서