세션 리플레이 독립형 SDK입니다.
세션 리플레이 계측
세션 리플레이는 기본적으로 활성화되어 있지 않으며, 표준 Amplitude 계측 이상의 설정이 필요합니다.
세션 리플레이 독립형 SDK는 Amplitude Browser SDK와는 별개로 세션 녹화를 사이트에 추가합니다. 제품 내 분석을 위해 Amplitude 이외의 공급자를 사용하는 경우, 이 옵션을 선택하십시오. 사이트에서 이미 Amplitude Browser SDK를 사용하고 있다면 세션 리플레이 Browser SDK 플러그인을 사용하십시오.
세션 리플레이 및 성능
Amplitude는 다음과 같은 방법으로 웹 페이지 성능에 미치는 영향을 최소화하기 위해 세션 리플레이를 구축했습니다.
- 효율적인 압축과 최적화된 번들 크기를 위해 웹후크를 통해 비동기적으로 처리(활성화된 경우).
- 배치 처리 및 경량 압축을 사용하여 네트워크 연결 및 대역폭을 줄입니다.
- DOM 처리 최적화.
번들 크기
세션 리플레이 독립형 SDK는 애플리케이션의 번들 크기를 늘립니다.
현재 번들 크기 정보는 npm 패키지 페이지 또는 BundlePhobia를 확인하세요.
런타임 성능
세션 리플레이는 비동기식으로 실행되며 기본 스레드를 차단하지 않도록 백그라운드에서 재생 데이터를 처리합니다. 성능 특성은 다음과 같습니다.
- DOM 캡처: DOM 스냅샷 캡처는 일반적으로 각 페이지 상호 작용에 대해 5ms 미만의 처리 시간을 추가합니다. 초기 페이지 로드 스냅샷 캡처는 페이지의 복잡도에 따라 10~50ms 정도 걸립니다.
- 메모리 사용량: 세션 리플레이는 재생 이벤트를 메모리 또는 IndexedDB에 저장합니다(
storeType를 사용하여 구성 가능). 메모리 사용량은 세션 길이와 페이지 복잡성에 따라 증가하며, 일반적으로 각 활성 세션에 대해 1~10MB의 범위입니다. - CPU 영향: 기본 설정을 사용하면 세션 리플레이가 정상적인 작동 중에 CPU 시간을 2% 미만으로 사용합니다. Amplitude는
performanceConfig.enabled인 경우 압축 작업을 브라우저의 유휴 기간으로 연기합니다(기본값)true. - 네트워크 대역폭: Amplitude는 업로드 전에 재생 데이터를 압축하므로 일반적으로 페이로드 크기를 60~80% 줄입니다. Amplitude는 네트워크 요청을 일괄 처리하여 비동기적으로 전송합니다.
성능 최적화
세션 리플레이 성능을 최적화하려면 다음을 수행하십시오.
- 메인 스레드에서 압축을 이동할 수 있도록 설정하여 메인 스레드에 대한 CPU 영향을 줄입니다
useWebWorker. - 지연된 압축이 발생할 시기를 제어하도록
performanceConfig.timeout구성합니다. - 캡처되는 세션 수를 줄이는 데 사용하면 CPU 및 메모리 사용량을 직접적으로 줄일 수 있습니다
sampleRate. - 페이지 재로드 시 지속성이 필요하지 않은 경우
storeType으로 설정하여 IndexedDB 오버헤드를 줄입니다memory.
자세한 성능 테스트 결과는 세션 리플레이 성능 테스트 블로그 게시물을 참조하십시오.
세션 리플레이는 섀도우 DOM의 요소를 포함하여 페이지의 문서 객체 모델(DOM)에 대한 변경 사항을 캡처한 다음 이러한 변경 사항을 재생하여 비디오와 유사한 재생을 생성합니다. 세션이 시작될 때 세션 리플레이는 페이지의 DOM에 대한 전체 스냅샷을 캡처합니다. 사용자가 페이지와 상호작용할 때, 세션 리플레이는 DOM에 대한 각 변경 사항을 차이로 캡처합니다. 세션의 재생을 시청할 때, 세션 리플레이는 각 차이를 순차적으로 원본 DOM에 다시 적용하여 재생을 구성합니다. 세션 리플레이에는 최대 길이가 없습니다.
시작하기 전에
세션 리플레이 독립형 SDK의 요구 사항은 다음과 같습니다.
- 귀하의 애플리케이션은 웹 기반입니다.
- 초기화 시 SDK에 세션 식별자를 제공하고 변경될 때 호출합니다
setSessionId. SDK는 이 ID를 사용하여 재생 데이터를 버킷화합니다. 세션 ID 일치를 위해 분석 이벤트와 SDK에서 동일한 세션 식별자를 사용하십시오. 시간 기반 이벤트 매칭만 사용하는 경우 세션 리플레이는 분석 이벤트에 나타나지 않는 프런트엔드에서 생성된 시간 버킷(예: 밀리초 단위의 시간 정렬된 Unix 타임스탬프)일sessionId수 있습니다. - SDK에 장치 ID를 제공할 수 있습니다.
Device ID독립형 SDK에 전달하는 값은 분석 이벤트의 장치 ID와 일치해야 합니다.
독립형 SDK는 세션 관리 기능을 제공하지 않습니다. 애플리케이션 또는 타사 연동 기능은 Session ID 및 Device ID에 대한 변경 사항을 적용하여 SDK를 업데이트해야 합니다.
빠른 시작
플러그인을 npm 또는 yarn으로 설치하세요.
통합 SDK
브라우저 통합 SDK를 설치하여 실험 SDK와 다른 Amplitude 제품(분석, 세션 리플레이)에 액세스하십시오. 통합 SDK는 모든 Amplitude 기능을 위한 단일 진입점을 제공하며 모든 구성 요소의 초기화 및 구성을 처리합니다.
# Install Session Replay SDK only
npm install @amplitude/session-replay-browser --save
# Or install Unified SDK to get access to all Amplitude products
npm install @amplitude/unified
애플리케이션 코드를 구성합니다.
- 재생 수집을 시작하려면
sessionReplay.init호출하십시오. API 키, 세션 식별자 및 장치 식별자를 전달합니다. - 세션 식별자가 변경되면
sessionReplay.setSessionId을 사용하여 새 값을 Amplitude에 전달하십시오. - Amplitude는 재생을 분석 데이터와 연결하기 위한
[Amplitude] Replay Captured이벤트를 자동으로 생성합니다. 자세한 내용은 세션 리플레이 ID를 참조하십시오.
import * as sessionReplay from "@amplitude/session-replay-browser";
import 3rdPartyAnalytics from 'example'
const AMPLITUDE_API_KEY = "key"
// Configure the SDK and begin collecting replays
await sessionReplay.init(AMPLITUDE_API_KEY, {
deviceId: "<string>",
sessionId: "<string | number>",
optOut: "<boolean>",
sampleRate: "<number>"
}).promise;
// Call whenever the session id changes
await sessionReplay.setSessionId(sessionId).promise;
세션 리플레이 계측은 Amplitude 프로젝트의 맥락에서 발생합니다. Amplitude는 조직 수준에서 재생 할당량을 정의합니다. 여러 프로젝트에 걸쳐 여러 세션 리플레이 구현을 가질 수 있으며, 각 프로젝트는 고유한 샘플링 속도를 갖고 있으며 동일한 할당량에서 데이터를 수집합니다.
또한 스크립트 태그를 사용하여 세션 리플레이를 계측할 수도 있습니다.
<script src="https://cdn.amplitude.com/libs/session-replay-browser-1.51.7-min.js.gz"></script>
<script>
window.sessionReplay.init(AMPLITUDE_API_KEY, {
deviceId: "<string>",
sessionId: "<string | number>",
sampleRate: "<number>"
//...other options
})
// Call whenever the session id changes
window.sessionReplay.setSessionId(sessionId);
</script>
세션 리플레이 ID
Amplitude는 세션 리플레이가 세션을 캡처할 때 자동으로 [Amplitude] Replay Captured 이벤트를 생성합니다. 이 이벤트에는 재생을 분석 데이터에 연결하는 [Amplitude] Session Replay ID속성이 포함됩니다. 수동 계측이 필요하지 않습니다.
[Amplitude] Session Replay ID 는 재생에 대한 고유 식별자로, 기본적으로 사용자의 세션을 식별하는 [Amplitude] Session ID과는 다릅니다.
세션 리플레이 ID의 형식은 <deviceId>/<sessionId>입니다. 세션 리플레이는 /를 구분 기호로 사용하기 때문에 deviceId와 사용자 지정 세션 ID 문자열 값에는 /를 포함할 수 없습니다. 허용되는 문자: a-z A-Z 0-9 _ - . | @ : =. 추가 캐릭터가 필요하면 Amplitude 지원팀에 문의하십시오.
Amplitude는 세션 리플레이 ID로 리플레이를 연결합니다. 여러 세션을 단일 재생으로 결합하려면 각 세션이 동일한 장치 ID 및 세션 ID를 참조하는지 확인하십시오.
기존 구현
: 를 사용하여 이벤트에 수동으로 [Amplitude] Session Replay ID속성을 추가하는 기존 구현이 있는 getSessionReplayProperties()경우, 이 방법은 계속 작동합니다. 그러나 Amplitude는 자동 [Amplitude] Replay Captured 이벤트를 권장합니다.
재생이 보이지 않나요?
Amplitude UI에 재생이 나타나지 않는 경우, 해당 [Amplitude] Replay Captured 이벤트가 프로젝트에 나타나는지 확인하세요. 이 이벤트를 볼 수 없다면 Amplitude 서포트에 문의하세요.
구성
세션 리플레이 SDK를 초기화할 때 다음 구성 옵션을 전달하십시오.
| 이름 | 유형 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
deviceId | string | 예 | undefined | 애플리케이션을 실행하는 장치의 식별자를 설정합니다. |
sessionId | string | number | 예 | undefined | 사용자의 현재 세션에 대한 식별자를 설정합니다. 표준 세션 추적을 위해 밀리초 number단위의 Unix 타임스탬프를 사용하거나 사용자 정의 세션 정의를 위해 사용자 정의 문자열을 사용하십시오. 사용자 정의 문자열 값은 허용된 문자 집합을 따라야 합니다. |
sampleRate | number | 아니요 | 0 | Amplitude가 재생 수집을 위해 선택하는 세션 수를 제어합니다. 숫자는 0과 1 사이의 소수입니다. 예를 들어 0.4는 Amplitude가 재생 수집을 위해 무작위로 선택한 세션의 비율을 나타냅니다. 많은 수의 세션 중에서 0.4는 해당 세션의 40%을 선택합니다. 소수점 이하 6자리(0.000001)만큼 작은 샘플링 속도가 작동합니다. |
optOut | boolean | 아니요 | false | 세션에 대한 재생을 수집할 수 있는 권한을 설정합니다. 값이 true이면 Amplitude가 세션 재생을 수집하지 못하게 됩니다. |
flushMaxRetries | number | 아니요 | 5 | 실패한 업로드 시도에 대한 최대 재시도 횟수를 설정합니다. 이는 Amplitude가 재시도할 수 있는 오류에만 적용됩니다. |
logLevel | number | 아니요 | LogLevel.Warn | LogLevel.None 또는 LogLevel.Error또는 LogLevel.Warn또는 LogLevel.Verbose또는 LogLevel.Debug. 로그 수준을 설정합니다. |
loggerProvider | Logger | 아니요 | Logger | 로그 메시지를 목적지로 전송하도록 로거에서 사용자 지정 loggerProvider 클래스를 설정합니다. |
serverZone | string | 아니요 | US | EU 또는 US. Amplitude 서버 영역을 설정합니다. EU 데이터 센터에서 생성된 Amplitude 프로젝트의 경우 이 값을 EU로 설정하십시오. |
privacyConfig | object | 아니요 | undefined | CSS 선택기를 사용하여 고급옵션 마스킹 구성을 지원합니다. 자세한 내용은 화면 상의 데이터 마스킹을 참조하십시오. |
applyBackgroundColorToBlockedElements | boolean | 아니요 | false | true인 경우 시각적 마스킹을 위해 차단된 요소에 배경색을 적용합니다. 이를 통해 Amplitude가 재생에서 캡처를 차단하는 요소를 시각화할 수 있습니다. |
debugMode | boolean | 아니요 | false | 앱 불일치 등의 계측 문제를 디버깅하는 데 도움이 되는 디버그 이벤트 속성을 추가합니다. Amplitude는 초기 설정을 디버깅할 때만 이 방법을 권장하며, 프로덕션용으로는 사용하지 않습니다. |
configServerUrl | string | 아니요 | undefined | 원격 구성을 가져올 엔드포인트 URL을 지정합니다. 제공된 경우, 기본 서버 영역 구성을 재정의합니다. |
trackServerUrl | string | 아니요 | undefined | 세션 리플레이 데이터를 전송할 엔드포인트 URL을 지정합니다. 제공된 경우 SDK는 요청을 기본 SR 엔드포인트 대신 해당 엔드포인트로 전달합니다. |
shouldInlineStylesheet | boolean | 아니요 | true | Amplitude가 스타일시트를 인라인화하는 경우 스타일시트의 내용을 저장합니다. 다음 기간동안 리플레이 시 Amplitude는 원격으로 가져오는 대신 저장된 스타일시트를 사용합니다. 이렇게 하면 스타일시트가 누락되어 재생이 끊어진 것으로 나타나는 것을 방지할 수 있습니다. 인라이닝 스타일시트는 모든 경우에 작동하지 않을 수 있습니다. 이 값이 정의되지 않은 경우 Amplitude는 스타일시트를 인라인화합니다. |
storeType | string | 아니요 | idb | Amplitude가 재생 이벤트를 저장하는 방법을 지정합니다. idb는 SDK가 캡처 다음 기간동안 모든 이벤트를 전송할 수 없는 경우 IndexedDB를 사용하여 재생 이벤트를 유지합니다. memory는 재생 이벤트를 메모리에만 저장하므로 페이지가 닫힐 때 이벤트가 손실됩니다. IndexedDB를 사용할 수 없는 경우 시스템은 메모리로 폴백합니다. |
performanceConfig.enabled | boolean | 아니요 | true | 활성화된 경우 Amplitude는 브라우저의 유휴 기간 다음 기간동안 이벤트 압축이 발생하도록 지연합니다. |
performanceConfig.timeout | number | 아니요 | undefined | requestIdleCallback API에 대한 선택적 시간 초과(밀리초)입니다. 이 값을 지정하면 브라우저가 유휴 상태가 아니더라도 지연된 압축 작업을 실행하기 전에 브라우저가 대기할 최대 시간을 설정합니다. |
useWebWorker | boolean | 아니요 | false | 웹 워커를 사용하여 재생 이벤트를 압축합니다. 이렇게 하면 메인 스레드에서 압축을 제거하여 성능이 향상됩니다. |
API 엔드포인트
세션 리플레이는 다음 API 엔드포인트를 사용합니다.
- 데이터 수집:
- 미국:
https://api-sr.amplitude.com/sessions/v2/track. - 유럽연합:
https://api-sr.eu.amplitude.com/sessions/v2/track. - 세션 리플레이는 캡처된 리플레이 데이터를 이러한 엔드포인트로 전송합니다.
- 미국:
- 원격 구성:
- 미국:
https://sr-client-cfg.amplitude.com/config. - 유럽연합:
https://sr-client-cfg.eu.amplitude.com/config. - 세션 리플레이는 이러한 엔드포인트에서 원격 구성을 가져옵니다.
- 미국:
도메인 프록시를 설정한 경우 요청을 이러한 엔드포인트로 전달하십시오. trackServerUrl및 configServerUrl 구성 옵션을 사용하여 이러한 기본값을 재정의할 수 있습니다.
화면상의 데이터 마스킹
세션 리플레이 SDK는 사용자 입력, 텍스트 및 기타 HTML 요소를 마스킹하는 세 가지 방법을 제공합니다.
| 요소 | 설명 |
|---|---|
<input> | 세션 리플레이는 기본적으로 모든 텍스트 입력 필드를 마스크합니다. 사용자가 입력 필드에 텍스트를 입력하면 세션 리플레이는 텍스트 대신 별표(*)를 캡처합니다. 텍스트 입력의 마스크를 해제하려면 .amp-unmask 클래스를 추가하십시오. 예시: <input class="amp-unmask">. |
| text | 입력 필드가 아닌 요소 내의 텍스트를 마스킹하려면 .amp-mask 클래스를 추가하십시오. 예를 들어, <p class="amp-mask">Text</p>가 있습니다. 마스크가 적용되면 세션 리플레이는 마스크된 텍스트를 일련의 별표로 캡처합니다. |
| 텍스트가 아닌 요소 | 텍스트가 아닌 요소를 차단하려면 .amp-block 클래스를 추가하십시오. 예를 들어, <div class="amp-block"></div>입니다. 세션 리플레이는 차단된 요소를 동일한 크기의 위치 지정자로 대체합니다. |
세션 리플레이 개인정보 보호 설정에서 낮음, 보통, 높음 마스크 수준과 원격 재정의를 설정하십시오. 원격 설정이 SDK 설정과 충돌할 경우 우선합니다.
설정 중에 privacyConfig 객체에서 차단하거나 마스크할 요소를 지정합니다.
// This configuration blocks .no-track and #ads, sets the default mask level,
// and defines the mask and unmask selectors.
await sessionReplay.init(AMPLITUDE_API_KEY, {
privacyConfig: {
blockSelector: ['.no-track', '#ads'],
defaultMaskLevel: 'medium',
maskSelector: ['.sensitive-data', '.user-email'],
unmaskSelector: ['.public-info', '#main-content']
}
}).promise;
CSS 선택자
세션 리플레이의 구성은 다양한 유형의 CSS 선택자를 지원합니다. 요소 태그(h1 또는 textarea), 클래스 이름(.hidden) 또는 데이터 속성을 지정합니다.
데이터 속성은 해싱 때문에 클래스 이름이 자주 변경되는 경우에 유용할 수 있습니다. 데이터 속성을 사용하려면 data-amp-unmask 또는 data-amp-mask와 같은 사용자 지정 속성을 원하는 HTML 요소에 추가하십시오. 예를 들어 <textarea data-amp-unmask></textarea>를 지정한 다음 선택자 [data-amp-unmask]를 지정할 때 속성을 대괄호로 묶습니다.
원격 구성
원격 구성을 활성화했는데 로드에 실패하면 세션 리플레이는 세션을 전혀 캡처하지 않습니다. 이렇게 하면 관리자 인터페이스에서 정의한 개인정보 보호 설정 없이 캡처되는 것을 방지합니다.사용자 옵트아웃
세션 리플레이는 옵트아웃 구성 옵션을 제공합니다. 초기화의 일부로 전달될 경우 이는 Amplitude가 세션 리플레이를 수집하지 못하도록 방지합니다. 예를 들면 다음과 같습니다.
// Pass a boolean value to indicate a users opt-out status
await sessionReplay.init(AMPLITUDE_API_KEY, {
optOut: true,
}).promise;
콘텐츠 보안 정책(CSP)
웹 애플리케이션이 엄격한 콘텐츠 보안 정책을 사용하는 경우 다음 지시어를 추가하십시오.
필수 CSP 지시어
script-src: https://cdn.amplitude.com;
connect-src: https://api-secure.amplitude.com;
worker-src: blob:;
CSP 지시어 참조
| 지시어 | 도메인 | 필수 | 설명 |
|---|---|---|---|
script-src | https://cdn.amplitude.com | 예. CDN을 사용하는 경우 | Amplitude의 CDN에서 세션 리플레이 SDK를 로드할 수 있습니다. |
connect-src | https://api-secure.amplitude.com | 예(미국) | 재생 데이터를 Amplitude의 미국 서버로 전송할 수 있습니다. |
connect-src | https://api.eu.amplitude.com | 예 (EU) | Amplitude의 EU 서버로 재생 데이터를 전송할 수 있습니다. serverZone: "EU"를 설정한 경우 필수입니다. |
worker-src | blob: | 예. 웹 작업자를 사용하는 경우 | 재생 이벤트 압축 옵션을 활성화한 경우 필수입니다useWebWorker. |
API 엔드포인트
세션 리플레이는 다음 엔드포인트로 데이터를 전송합니다.
| 지역 | 엔드포인트: | 목적 |
|---|---|---|
| 미국(기본값) | https://api-secure.amplitude.com/sessions/track | 리플레이 데이터 수집. |
| EU | https://api.eu.amplitude.com/sessions/track | EU 데이터 상주를 위한 재생 데이터 수집. |
| 미국(기본값) | https://api-secure.amplitude.com/sessions/config | 원격 구성(샘플링 속도 설정). |
| EU | https://api.eu.amplitude.com/sessions/config | EU 데이터 상주를 위한 원격 구성 |
CSP 헤더 예제
미국 데이터 센터의 경우:
Content-Security-Policy: script-src 'self' https://cdn.amplitude.com; connect-src 'self' https://api-secure.amplitude.com; worker-src 'self' blob:;
EU 데이터 센터의 경우:
Content-Security-Policy: script-src 'self' https://cdn.amplitude.com; connect-src 'self' https://api.eu.amplitude.com; worker-src 'self' blob:;
trackServerUrl구성 옵션을 configServerUrl사용하여 사용자 지정 엔드포인트를 지정하는 경우 해당 도메인을 대신 connect-src지시어에 추가하십시오.
EU 데이터 상주
세션 리플레이는 EU 데이터 센터를 사용하는 Amplitude 고객에게 제공됩니다. 초기화 중에 serverZone 구성 옵션을 EU(으)로 설정하십시오. 예를 들면 다음과 같습니다.
// For European users, set the serverZone to "EU"
await sessionReplay.init(AMPLITUDE_API_KEY, {
serverZone: "EU",
}).promise;
샘플링 속도
기본적으로 세션 리플레이는 재생을 위해 세션의 0%를 캡처합니다. sampleRate구성 옵션을 사용하여 세션 리플레이가 캡처하는 총 세션의 비율을 설정합니다. 예를 들면 다음과 같습니다.
// This configuration samples 1% of all sessions
await sessionReplay.init(AMPLITUDE_API_KEY, {
sampleRate: 0.01,
}).promise;
sampleRate를 설정하려면 세션 리플레이 플랜의 월별 할당량을 고려하십시오. 예를 들어 월별 할당량이 2,500,000 세션이고 월별 평균 세션 수는 3,000,000 개일 경우 할당량은 평균 세션의 83%입니다. 이 경우 샘플링이 한 달 내내 지속되도록 하려면 sampleRate를 .83 또는 그 이하로 설정하십시오.
샘플링 속도를 고려할 때 다음 사항에 유의하십시오.
- 월간 세션 할당량에 도달하면 Amplitude는 재생을 위해 세션 캡처를 중단합니다.
- 세션 할당량은 매월 1일에 재설정됩니다.
- 월 초에 전체 할당량을 사용하지 않고 샘플링 속도를 사용하여 한 달 동안 세션 할당량을 분배하십시오.
- 최적의 샘플링 레이트를 찾으려면 Amplitude는 예를 들어
.01과 같이 낮은 수치로 시작할 것을 권장합니다. 이 값이 충분한 리플레이를 캡처하지 못할 경우 며칠 동안 비율을 높입니다. 캡처된 세션 리플레이 수를 모니터링하는 방법은 캡처된 세션 수 보기를 참조하십시오.
세션 리플레이는 원격 샘플링 속도 설정을 지원합니다. 이를 통해 조직의 사용자가 코드를 변경하지 않고도 구현 후 프로젝트의 샘플링 속도를 구성하거나 업데이트할 수 있습니다. 충돌이 발생할 경우 세션 리플레이는 기본적으로 원격 설정으로 설정됩니다. 자세한 내용은 계정 설정을 참조하십시오.
리플레이 수집 비활성화
활성화된 후에는 다음 중 하나가 발생할 때까지 사이트에서 세션 리플레이가 실행됩니다.
- 사용자가 귀하의 사이트를 떠납니다.
sessionReplay.shutdown()을(를) 호출하십시오.
사용자가 사이트의 제한된 영역으로 이동하기 전에 sessionReplay.shutdown()를 호출하여 사용자가 해당 영역에 있는 동안 리플레이 수집을 비활성화하십시오.
사용자가 사이트의 제한되지 않은 영역으로 돌아왔을 때 재생 수집을 다시 활성화하려면 sessionReplay.init(API_KEY, {...options})호출하십시오.
또한 Amplitude 실험과 같은 기능 플래그 제품을 사용하여 위치와 같은 기준에 따라 리플레이 수집을 활성화하거나 비활성화하는 로직을 만들 수도 있습니다. 예를 들어, 특정 사용자 그룹을 대상으로 하는 기능 플래그를 생성하고 이를 초기화 논리에 추가할 수 있습니다.
import * as sessionReplay from "@amplitude/session-replay-browser";
import 3rdPartyAnalytics from 'example'
const AMPLITUDE_API_KEY = <...>
await sessionReplay.init(AMPLITUDE_API_KEY, {
deviceId: <string>,
sessionId: <string | number>,
optOut: <boolean>,
sampleRate: <number>
}).promise;
데이터 보관
세션 리플레이는 Amplitude 도구와 API를 사용하여 개인정보 보호 및 삭제 요청을 처리합니다. 캡처를 구현할 때 동의 지침을 검토하십시오.
보관 기간
기본 보관, 연장 보관 및 보관 유효 날짜에 대한 자세한 내용은 세션 리플레이 데이터 생애주기 분석을 참조하세요.
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 앱에서 사용할 수 있는 것과 동일한 블록 필터를 사용합니다. 세션 리플레이는 이벤트나 사용자 속성을 기반으로 트래픽을 차단하지 않습니다.
세션 리플레이 저장 공간
세션 리플레이 기능은 사용자의 브라우저에 쿠키를 설정하지 않습니다. 대신, 이 기능은 기본적으로 IndexedDB라는 브라우저 스토리지 옵션에 의존합니다. 이 옵션을 활성화하면 사용자가 브라우저 탭 사이를 이동하거나 탭을 닫았다가 다시 열어도 세션 중 리플레이를 연속해서 수집할 수 있습니다. SDK는 IndexedDB에 저장된 데이터를 정리하므로 사용자의 디스크 공간에 영향을 미치지 않습니다.
실행 환경에서 IndexedDB를 지원하지 않으면 세션 리플레이는 메모리 내 저장 방식으로 대체합니다. 메모리 내 저장 방식은 데이터 보존성이 낮으며, 사용자가 브라우저 창을 닫으면 데이터가 손실됩니다. 메모리 내 저장 방식을 강제로 사용하려면 설정 옵션 storeType을 'memory'로 설정하십시오.
사이트의 모든 쿠키 사용을 거부한 사용자에 대해서는 optOut 설정 옵션을 사용해 리플레이 수집을 비활성화하세요.
IndexedDB 모범 사례
IndexedDB가 초기화되고 제대로 작동하는지 확인하려면:
CSP 헤더를 검토하여 지나치게 제한적이지 않은지 확인하십시오.
default-src및script-src지시어에서 필요한 소스를 허용하는지 확인하십시오.IndexedDB 작업은 동일 출처 내에서 수행하세요. 교차 출처 제한은 IndexedDB 작업을 차단할 수 있습니다.
사용자가 IndexedDB를 지원하는 최신 브라우저를 사용하고 있는지 확인하십시오. Amplitude는 최신 버전의 Chrome, Firefox, Safari, Edge 또는 Opera를 권장합니다.
알려진 제한 사항
세션 리플레이를 구현할 때 다음과 같은 제한 사항에 유의하십시오.
- 세션 리플레이는 여러 프로젝트에 걸쳐 단일 사용자의 재생을 함께 연결하지 않습니다. 예를 들면 다음과 같습니다.
- 마케팅 사이트와 웹 애플리케이션을 각각 세션 리플레이가 활성화된 별도의 Amplitude 프로젝트로 계측합니다.
- 알려진 사용자가 마케팅 사이트에서 시작하여 웹 애플리케이션에 로그인합니다.
- Amplitude는 두 세션을 모두 캡처합니다.
- 각 세션의 재생이 호스트 프로젝트에 나타납니다.
- 세션 리플레이는 다음 HTML 요소를 캡처할 수 없습니다.
- 캔버스
- WebGL.
objectFlash, Silverlight 또는 Java와 같은 플러그인을 포함하는 태그. 세션 리플레이는object type="image"<iframe>을 지원합니다.- Lottie 애니메이션.
- crossorigin
<iframe>속성으로 세션 리플레이 SDK를 로드하지 않는 교차 출처 <iframe> 요소crossOriginIframes.enabled: true(예: Stripe 또는 Google Maps와 같은 타사 임베드). 퍼스트파티 교차 출처 iframe을 캡처하려면 교차 출처 iframe 녹화로 이동하세요. - 글꼴, CSS 또는 이미지와 같이 인증이 필요한 자산입니다.
- 세션 리플레이는 광고 차단 소프트웨어와 호환되지 않습니다.
문제 해결
개별 상태 및 오류에 대한 자세한 내용은 세션 리플레이 수집 모니터링을 참조하십시오.
CSS 스타일이 재생에 나타나지 않습니다.
Amplitude는 재생을 캡처할 때 CSS 파일이나 애플리케이션이나 사이트의 일부인 기타 정적 자산을 다운로드하여 저장하지 않습니다. 해당 자산을 직접 관리하지 않습니다. 세션 리플레이는 이러한 파일에 대한 참조를 저장하고, 재생을 재구성하는 동안 해당 참조를 사용합니다. 경우에 따라 다음과 같은 이유로 재생에 표시되는 스타일이 응용 프로그램과 다를 수 있습니다.
- 사이트의 자산이 이동되거나 이름이 변경됩니다. 이 문제는 응용 프로그램의 새 버전을 배포할 때 발생할 수 있습니다.
- 사이트의 자산이 Amplitude의 접근을 차단하는 액세스 제어의 제한을 받고 있습니다.
CSS 로딩 문제를 해결하는 데 도움이 되는 방법:
- 도메인에 공개적으로 액세스할 수 있는지 확인하십시오.
localhost에 자산을 저장한 경우 해당 자산을 준비 환경으로 이동해 보십시오. - CDN은 오래된 재생에 대한 오래된 스타일시트를 계속 추적해야 합니다. 동일한 스타일시트의 콘텐츠가 시간별로 변경되는 경우 자산 URL에 고유한 문자열이나 해시를 추가해 보십시오. 예를 들어
stylesheet.css?93f8b89. - 서버의 CORS 구성이 허용하는 도메인 목록에
app.amplitude.com또는app.eu.amplitude.com를 추가합니다.
리플레이 길이와 세션 길이가 일치하지 않습니다.
일부 시나리오에서는 리플레이 시간이 [Amplitude] Start Session 및 [Amplitude] End Session 이벤트 사이의 시간을 초과할 수 있습니다. 이 문제는 사용자가 브라우저나 브라우저 탭을 닫고 [Amplitude] End Session이 발생하지만 브라우저 SDK 및 세션 리플레이 플러그인이 아직 이를 처리하지 않은 경우 발생합니다. 사용자가 해당 페이지를 다시 방문하면 SDK 및 플러그인이 해당 이벤트를 처리하여 리플레이와 함께 Amplitude로 전송합니다. End Session Client Event Time과 Client Upload Time 사이에 차이가 있는 경우 이 시나리오가 발생했는지 확인할 수 있습니다.
세션 리플레이는 다음과 같은 이유로 Amplitude에 나타나지 않을 수 있습니다.
- 콘텐츠 보안 정책
- 차단된 JavaScript
- 현재 세션에서 브라우저 SDK를 통해 트리거된 이벤트가 없습니다.
- 샘플링
로컬 개발 및 포커스 상태
세션 리플레이 SDK 및 플러그인은 현재 포커스가 맞춰진 페이지만 캡처합니다. 브라우저 콘솔을 연 상태에서 로컬로 개발할 경우 포커스 상태가 예상대로 작동하지 않을 수 있습니다. Amplitude에서 리플레이가 표시되지 않는 경우 debugMode를 활성화해 보십시오. 이 모드에서 세션 리플레이는 포커스 핸들을 무시하고 추가 디버깅 정보를 활성화합니다.
const sessionReplayTracking = window.sessionReplay.plugin({
debugMode: true,
sampleRate: 1,
});
콘텐츠 보안 정책
사이트에 세션 리플레이 스크립트를 추가할 때는 세션 리플레이 SDK가 실행 중인 페이지를 방문하여 브라우저의 개발자 도구를 엽니다.
JavaScript 콘솔에서 텍스트 Content Security Policy를 포함하는 오류 메시지가 있는지 확인하십시오. 예를 들어, Refused to connect to 'https://api-secure.amplitude.com/sessions/track' because it violates the document's Content Security Policy.
이 오류를 해결하려면 사이트의 콘텐츠 보안 정책을 업데이트하여 Amplitude의 API에 대한 연결을 허용하세요.
차단된 JavaScript
브라우저 확장 기능이나 네트워크 보안 정책이 세션 리플레이 SDK를 차단할 수 있습니다. 브라우저의 개발자 도구를 확인하여 요청이 실패했는지 확인하고, 실패한 경우 차단된 도메인에 대한 예외를 추가하십시오.
샘플링
세션 리플레이의 기본 sampleRate는 0입니다. 비율을 더 높은 숫자로 업데이트하십시오. 자세한 내용은 샘플링 비율을 참조하십시오.
일부 세션에는 세션 리플레이 ID 속성이 포함되어 있지 않습니다.
세션 리플레이를 사용하기 위해 세션의 모든 이벤트에 [Amplitude] Session Replay ID 속성이 있어야 하는 것은 아니며, 세션의 한 이벤트에만 해당 속성이 있으면 됩니다. 세션 리플레이에 연결한 소스와 다른 소스를 사용하여 이벤트를 계측할 경우 이 속성이 없을 수 있습니다. 예를 들어 애플리케이션이 브라우저 SDK 대신 백엔드 소스에서 이벤트를 전송할 수 있습니다.
세션 리플레이 처리 오류
일반적으로 재생은 수집 후 몇 분 첫 사용 후 나타납니다. 지연 또는 오류는 다음 중 하나 이상으로 인해 발생할 수 있습니다.
- API 키 또는 장치 ID가 일치하지 않습니다. 이 문제는 세션 리플레이와 표준 이벤트 계측이 서로 다른 API 키 또는 장치 ID를 사용하는 경우 발생할 수 있습니다.
- 세션 리플레이가 잘못된 프로젝트를 참조합니다.
- 짧은 세션. 사용자가 초기화 후 몇 초 이내에 이탈하는 경우 SDK가 리플레이 데이터를 업로드할 시간이 없을 수 있습니다.
- 페이지 계측. 사용자가 방문하는 모든 페이지에 세션 리플레이가 구현되지 않은 경우 해당 세션이 제대로 캡처되지 않을 수 있습니다.
- 설정된 리텐션 기간(기본값 30일, 추가 볼륨 구매 시 90일)보다 오래된 리플레이.
이 내용이 도움이 되었나요?
For AI agents: a documentation index is available at /docs/llms.txt. Append .md to any page URL for markdown, or send Accept: text/markdown.