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.
Session Replay Browser SDKプラグイン
セッションリプレイの計測
セッションリプレイはデフォルトではオンになっていません。標準のAmplitude計測以上の設定が必要です。
セッションリプレイ Browser SDK プラグインは、Amplitude Browser SDK 2 で既に計測されているサイトにセッション録画を追加します。サイトが既にAmplitude計測を使用している場合は、このオプションを使用してください。製品内アナリティクスにAmplitude以外のプロバイダーを使用している場合は、スタンドアロンの実装を選択してください。ブラウザ SDK の詳細については、ブラウザ SDK 2 を参照してください。
セッションリプレイとパフォーマンス
セッションリプレイは、インストール先のWebページのパフォーマンスへの影響を次のように最小限に抑えます。
- Webhookを通じてコンテンツを非同期に処理することで、効率的な圧縮と最適化されたバンドルサイズを実現できます。
- リクエストをバッチ処理し、軽量圧縮を使用してネットワーク接続と帯域幅を削減します。
- DOM処理の最適化。
バンドルサイズ
セッションリプレイプラグインは、アプリケーションのバンドルサイズを増やします。
現在のバンドルサイズに関する情報は、npm パッケージページまたは BundlePhobia を確認してください。
ランタイムパフォーマンス
セッションリプレイは非同期に実行され、メインスレッドをブロックしないようにバックグラウンドでリプレイデータを処理します。パフォーマンス特性には次のものがあります:
- DOMキャプチャ: DOMスナップショットキャプチャによる処理時間の増加は、通常、ページインタラクションごとに5ミリ秒未満です。ページの複雑さによっては、初期ページロードスナップショットキャプチャには10〜50ミリ秒かかることがあります。
- メモリ使用量: セッションリプレイはリプレイイベントをメモリまたは IndexedDB に保存します (
storeTypeを使用して設定できます)。 メモリ使用量はセッション時間とページの複雑さによって変化します。通常、各アクティブなセッションについては1〜10MBの範囲です。 - CPU への影響:デフォルト設定では、セッションリプレイは通常動作時に CPU 時間の 2% 未満を使用します。 セッションリプレイは、
performanceConfig.enabledがtrue(デフォルト)の場合、圧縮操作をブラウザのアイドル期間まで延期します。 - ネットワーク帯域幅: セッションリプレイはアップロード前にリプレイデータを圧縮するため、通常ペイロードサイズを 60 ~ 80% 削減できます。セッションリプレイはネットワーク要求をバッチ処理し、非同期に送信します。
パフォーマンスの最適化
セッションリプレイのパフォーマンスを最適化するには:
useWebWorkerを有効にすると、圧縮がメインスレッドから外れ、CPU への影響が軽減されます。- 遅延圧縮が発生するタイミングを制御するように
performanceConfig.timeoutを構成します。 - ページを再読み込みしたときに持続性を維持する必要がない場合は、
storeTypeをmemoryに設定してください。これにより IndexedDB のオーバーヘッドが削減されます。
パフォーマンステストの詳細な結果については、セッションリプレイのパフォーマンステストに関するブログ記事を参照してください。
セッションリプレイは、ページのドキュメントオブジェクトモデル(DOM)への変更をキャプチャします(シャドウDOM内の要素も含まれます)。その後、 セッションリプレイ はこれらの変更を再生して、ビデオのような再生を構築します。例えば、セッションの開始時に、セッションリプレイはページのDOMの完全なスナップショットをキャプチャします。ユーザーがページとやり取りする際、セッションリプレイは DOM への各変更を diff としてキャプチャします。セッションのリプレイを視聴するとき、セッションリプレイは各 diff を順番に元の DOM に適用し、リプレイを構築します。セッションリプレイには最大長はありません。
始める前に
セッションリプレイプラグインには次のことが必要です。
- アプリケーションは Web ベースです。
- デバイスIDをSDKに提供できること。
- このサイトでは、ブラウザ2.0 SDKを使用しています。
サポートされているブラウザー
セッションリプレイはAmplitudeのSDKと同じブラウザセットをサポートしています。詳細については、「ブラウザーの互換性」を参照してください。
セッションリプレイは、ブラウザ拡張機能やブラウザ拡張機能が導入するDOM要素すべてをサポートしているわけではない場合があります。
セッションリプレイはShadow DOMをサポートしていますが、サイトで使用しているフレームワークによっては例外が存在する場合があります。
クイックスタート
プラグインを npm または yarn でインストールしてください。
Unified SDK
Browser SDKをまだインストールしていない場合は、代わりにBrowser Unified SDKを使用することを検討してください。Unified SDKは、Amplitudeのすべての機能(アナリティクス、セッションリプレイ、実験)の単一エントリーポイントを提供し、すべてのコンポーネントの初期化と設定を処理することで連携を簡素化します。
# If you already have Browser SDK installed, install the Session Replay Plugin
npm install @amplitude/plugin-session-replay-browser --save
# OR if you haven't installed Browser SDK yet, use the Unified SDK instead
npm install @amplitude/unified
アプリケーションコードを設定します。
import * as amplitude from "@amplitude/analytics-browser";
import { sessionReplayPlugin } from "@amplitude/plugin-session-replay-browser";
// Create and Install Session Replay Plugin
const sessionReplayTracking = sessionReplayPlugin();
amplitude.add(sessionReplayTracking);
// Your existing initialization logic with Browser SDK
amplitude.init(API_KEY);
また、コードをサイトの<head>に直接追加することもできます。この方法を使用すると、アプリケーションが他の場所でBrowser SDKを初期化しないようにしてください。ブラウザSDKを複数回初期化すると、デバイスIDまたはセッションIDが一致しない場合があります。
<script src="https://cdn.amplitude.com/libs/analytics-browser-2.48.1-min.js.gz"></script>
<script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.36.5-min.js.gz"></script>
<script>
const sessionReplayTracking = window.sessionReplay.plugin();
window.amplitude.add(sessionReplayTracking);
window.amplitude.init(API_KEY);
</script>
セッションリプレイの計測は、Amplitudeプロジェクトのコンテキスト内で行われます。Amplitudeは、組織レベルでリプレイ割り当てを定義します。 その結果、複数のプロジェクトにまたがって複数のセッションリプレイを実装することができ、それぞれが独自のサンプルレートを持ち、同じクォータを消費します。
Google Tag Managerとの互換性
セッションリプレイプラグインスクリプトは、ページの<head>タグに追加すると非同期に読み込まれます。その結果、この実装は Google タグマネージャーと互換性がありません。 詳細については、「Google Tag Managerを使用したセッションリプレイの実装」を参照してください。
設定
| 名前 | タイプ | 必須 | デフォルト | 概要 |
|---|---|---|---|---|
sampleRate | number | いいえ | 0 | リプレイ収集のために選択するセッションの数を制御します。 この数値は0から1の小数(例:0.4)で、Amplitudeがリプレイ収集のためにランダムに選択するセッションの割合を表します。セッションが多数ある場合、0.4ではそれらのセッションのうちの40%を選択します。このフィールドは必須ではありません。セッションリプレイではサンプルレートなどの設定のリモート設定がサポートされているためです。 |
privacyConfig | object | いいえ | undefined | CSSセレクターを使用した高度なマスキング設定をサポートします。 |
applyBackgroundColorToBlockedElements | boolean | いいえ | false | trueの場合、ビジュアルマスキングのためにブロックされた要素に背景色を適用します。これにより、どの要素がセッションリプレイによるキャプチャの対象外となっているかを確認できます。 |
debugMode | boolean | いいえ | false | 計装の問題(アプリの不一致など)のデバッグに役立つデバッグイベントプロパティを追加します。 初期設定のデバッグにのみ推奨され、本番環境用ではありません。 |
serverZone | string | いいえ | US | EUか米国か。 Amplitudeサーバーゾーンを設定します。 EUデータセンター内のAmplitudeプロジェクトの場合、これをEUに設定してください。 |
configServerUrl | string | いいえ | undefined | リモート設定を取得するためのエンドポイントURL。指定した場合、デフォルトのサーバーゾーン設定を上書きします。 |
trackServerUrl | string | いいえ | undefined | セッションリプレイデータを送信するためのエンドポイントURL。指定されている場合、Amplitudeはデフォルトのセッションリプレイエンドポイントではなく、SDKからのリクエストをそこに転送します。 |
shouldInlineStylesheet | boolean | いいえ | true | trueの場合、セッションリプレイはインライン化されたスタイルシートの内容を保存します。リプレイ中、セッションリプレイはスタイルシートをリモートで取得するのではなく、保存済みのものを使用します。これにより、スタイルシートがないためにリプレイが壊れているように見えることがなくなります。インライン化スタイルシートは、すべての場合に機能するとは限りません。 未定義の場合、セッションリプレイはスタイルシートをインライン化します。 |
storeType | string | いいえ | idb | セッションリプレイがリプレイイベントを保存する方法。idbは、セッションリプレイがキャプチャ中にすべてのイベントを送信できない場合に、IndexedDBを使用してリプレイイベントを永続化します。memoryはリプレイイベントをメモリにのみ保存するため、ページが閉じられたときにイベントは失われます。IndexedDBが使用できない場合、システムはメモリにフォールバックします。 |
performanceConfig.enabled | boolean | いいえ | true | セッションリプレイを有効にすると、ブラウザのアイドル状態にある間、イベント圧縮が発生するよう遅延します。 |
performanceConfig.timeout | number | いいえ | undefined | requestIdleCallback APIのオプションのタイムアウト(ミリ秒単位)。この値を指定すると、ブラウザがアイドル状態でない場合でも、遅延圧縮タスクを実行する前にブラウザが待機する最大時間を設定します。 |
useWebWorker | boolean | いいえ | false | Webワーカーを使用して、リプレイイベントを圧縮します。これにより、圧縮をメインスレッドから外すことでパフォーマンスが向上します。 |
APIエンドポイント
セッションリプレイは次のAPIエンドポイントを使用します。
- データの取り込み:
- 米国:
https://api-sr.amplitude.com/sessions/v2/track。 - EU:
https://api-sr.eu.amplitude.com/sessions/v2/track。 - セッションリプレイは、キャプチャされたリプレイデータをこれらのエンドポイントに送信します。
- 米国:
- リモート設定:
- 米国:
https://sr-client-cfg.amplitude.com/config。 - EU:
https://sr-client-cfg.eu.amplitude.com/config。 - セッションリプレイは、これらのエンドポイントからリモート設定を取得します。
- 米国:
ドメインプロキシを設定している場合は、これらのエンドポイントにリクエストを転送してください。trackServerUrlおよびconfigServerUrl設定オプションを使用して、これらのデフォルト値を上書きできます。
デフォルトのセッションイベントを追跡
セッションリプレイでは、デフォルトでセッショントラッキングが有効になっています。これにより、セッションリプレイはセッション開始イベントとセッション終了イベントを確実にキャプチャします。セッションリプレイを実装する前にこれらのイベントをキャプチャしなかった場合、イベント量が増加することが予想されます。セッション追跡の詳細については、「ブラウザ SDK 2.0 | セッションの追跡」を参照してください。
ブラウザ SDK 設定を使用して、セッション トラッキングを暗黙的に有効にします。
amplitude.init(API_KEY, USER, {
autocapture: {
sessions: true,
},
});
セッション開始イベントとセッション終了イベント
プラグインバージョン 1.12.1 以降、セッションリプレイはデフォルトで Session Start および Session End イベントをキャプチャしなくなりました。これらのイベントのキャプチャを有効にするには、forceSessionTracking: true を設定します。
const sessionReplayTracking = window.sessionReplay.plugin({
forceSessionTracking: true, // Enable capture of Session Start and Session End events
sampleRate: 1, // 100% sample rate, should reduce for production traffic.
});
Amplitude では、リプレイを再生できるようにするには、キャプチャされたセッションで少なくとも 1 つのイベントが必要です。
画面上のデータをマスクする
セッションリプレイSDKでは、ユーザー入力、テキスト、その他のHTML要素をマスクする方法が3つ用意されています。
| エレメント | 説明 |
|---|---|
<input> | セッションリプレイは、デフォルトですべてのテキスト入力フィールドをマスクします。ユーザーが入力フィールドにテキストを入力すると、セッションリプレイはテキストの代わりにアスタリスクをキャプチャします。 テキスト入力フィールドのマスキングを解除するには、クラス .amp-unmask を追加します。たとえば、<input class="amp-unmask">。 |
| テキスト | 入力以外の要素内のテキストをマスクするには、.amp-mask クラスを追加します。 たとえば、<p class="amp-mask">Text</p> などです。 マスクされたテキストは、セッションリプレイによって一連のアスタリスクとしてキャプチャされます。 |
| テキスト以外の要素 | テキスト以外の要素をブロックするには、.amp-block クラスを追加します。 たとえば、<div class="amp-block"></div> などです。 セッションリプレイは、ブロックされた要素を同じ寸法のプレースホルダに置き換えます。 |
Light、Medium、Conservativeの各マスキングレベルとリモート設定による上書きは、セッションリプレイのプライバシー設定で設定します。リモート設定と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] で囲みます。
リモート設定
リモート設定を有効にしている場合、設定の読み込みに失敗すると、セッションリプレイはセッションをキャプチャしません。これにより、管理インターフェイスで定義したプライバシー設定なしでキャプチャが実行されることがありません。
ユーザーのオプトアウト
セッションリプレイプラグインはブラウザSDKoptOutの設定に従っており、ユーザーによるオプトアウト自体をサポートしていません。
コンテンツセキュリティポリシー(CSP)
Webアプリケーションが厳格なコンテンツセキュリティポリシーを使用している場合は、次のディレクティブを追加してください。
必要な 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を使用している場合 | セッションリプレイプラグインとブラウザSDKをAmplitudeのCDNからロードできるようにします。 |
connect-src | https://api-secure.amplitude.com | はい (米国) | SDKがリプレイデータをAmplitudeの米国サーバーに送信できるようにします。 |
connect-src | https://api.eu.amplitude.com | はい (EU) | SDKがリプレイデータをAmplitudeのEUサーバーに送信できるようにします。serverZone: "EU"を設定した場合に必須です。 |
worker-src | blob: | はい、Web Workersを使用している場合 | リプレイイベント圧縮のuseWebWorkerオプションを有効にしている場合に必須です。 |
APIエンドポイント
セッションリプレイは次のエンドポイントにデータを送信します。
| 地域 | エンドポイント | 目的 |
|---|---|---|
| 米国 (デフォルト) | https://api-secure.amplitude.com/sessions/track | リプレイデータの取り込み。 |
| 欧州連合 | https://api.eu.amplitude.com/sessions/track | EUデータレジデンシーのためのリプレイデータ取り込み。 |
| 米国 (デフォルト) | https://api-secure.amplitude.com/sessions/config | リモート設定(サンプルレートの設定)。 |
| 欧州連合 | 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:;
configServerUrlまたはtrackServerUrl設定オプションを使用してカスタムエンドポイントを指定する場合、代わりにこれらのドメインをconnect-srcディレクティブに追加してください。
EU域内のデータレジデンシー
セッションリプレイは、EUデータセンターを使用するAmplitudeのお客様が利用できます。初期化時にserverZone設定オプションを EUに設定します。 例えば:
// For European users, set the serverZone to "EU"
await sessionReplay.init(AMPLITUDE_API_KEY, {
serverZone: "EU", // [tl! ~~]
}).promise;
サンプリングレート
デフォルトでは、セッションリプレイはリプレイ用にセッションの0%をキャプチャします。Amplitudeの新しいアカウントスニペットを使用して計測した場合、テストを容易にするためにサンプルレートはデフォルトで1(セッションの100%)に設定されています。セッションリプレイの設定ページからサンプルレートを更新するか、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 日にリセットされます。
- 月の初めにクォータをフルに活用するのではなく、サンプルレートを使用して 1 か月間にセッションクォータを配布してください。
- 最適なサンプルレートを見つけられるように、Amplitudeでは低い値(例:
.01)から始めることを推奨します。この値で十分なリプレイが記録されない場合は、数日間かけてレートを上げてください。キャプチャされたセッションリプレイの数をモニターする方法については、「キャプチャされたセッション数の表示」を参照してください。
セッションリプレイはリモートサンプリングレート設定をサポートしています。これにより、組織内のユーザーはコードを変更することなく、実装後にプロジェクトのサンプリングレートを設定または更新できます。競合が発生した場合、セッションリプレイはデフォルトでリモートの設定になります。詳細については、アカウント設定を参照してください。
リプレイ収集を無効にする
セッションリプレイを有効にした後は、次のいずれかの条件を満たすまでサイト上で実行されます。
- ユーザーがサイトを離れる。
amplitude.remove(sessionReplayTracking.name)呼び出します。
これらの例では、初期化コードで変数 sessionReplayTracking を使用していることを前提としています。
ユーザーがサイトの制限付きエリアに移動する前にamplitude.remove('sessionReplayTracking')を呼び出し、ユーザーがそのエリアにいる間はリプレイ収集を無効にします。
リプレイ収集を再開するには、amplitude.add(sessionReplayTracking) を呼び出してプラグインを再追加します。
amplitude.add() はパラメータとしてオブジェクト型Pluginを取り、パラメータとして文字列を取ります。この文字列はamplitude.remove()削除したいプラグインの名前です。
amplitude.remove()を呼び出す前に、必ずamplitude.add()が終了するまで待機してください。そうしないと、コンソールに次のエラーが表示される可能性があります: TypeError: Cannot read properties of undefined (reading 'teardown')。 このためには、次のいずれかの例に示すように、promiseプロパティを使用します。
await amplitude.add(sessionReplayTracking).promise;
await amplitude.remove(sessionReplayTracking.name).promise;
const addPromise = amplitude.add(sessionReplayTracking).promise;
addPromise.then(() => {
amplitude.remove(sessionReplayTracking.name).promise;
});
また、Amplitude Experiment などの機能フラグ製品を使用して、場所などの基準に基づいてリプレイ収集を有効または無効にするロジックを作成することもできます。 たとえば、特定のユーザーグループを対象とするフィーチャーフラグを作成し、それを初期化ロジックに追加します。
import { sessionReplayPlugin } from "@amplitude/plugin-session-replay-browser";
// Your existing initialization logic with Browser SDK
amplitude.init(API_KEY);
if (nonEUCountryFlagEnabled) {
// Create and Install Session Replay Plugin
const sessionReplayTracking = sessionReplayPlugin({
sampleRate: 0.5,
});
amplitude.add(sessionReplayTracking);
}
データ保持
セッションリプレイは、プライバシーに関するリクエストや削除リクエストに対応するため、Amplitude のツールと API を使用します。レビュー 同意に関するガイダンスキャプチャを実装する際に。
データ保持期間
デフォルトのリテンション、延長リテンション、およびリテンション変更の有効日については、セッションリプレイのデータライフサイクルリファレンスをご覧ください。
DSAR API
Amplitude DSAR APIは、セッションのリプレイに関するメタデータを返しますが、生のリプレイデータは返しません。
Amplitudeは、セッションリプレイがリプレイをキャプチャするときに、[Amplitude] Replay Capturedイベントを自動的に作成します。このイベントには、[Amplitude] Session Replay ID プロパティが含まれています。このプロパティは、ユーザーのために収集されたリプレイに関する情報を提供します。
セッションリプレイ ID の形式は <deviceId>/<sessionId>です。カスタムセッション定義を使用する場合、カスタムセッションID値には/を含めることはできず、許可されている文字を使用する必要があります:a-z A-Z 0-9 _ - . | @ : =。追加のキャラクターが必要な場合は、Amplitudeサポートまでお問い合わせください。
{
"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を使用して削除リクエストを処理します。削除要求が成功すると、指定されたユーザーのすべてのセッションリプレイが削除されます。
Session Replayを使用しているAmplitudeプロジェクトを削除すると、Amplitudeはそのリプレイデータを削除します。
ボットフィルター
セッションリプレイはAmplitudeアプリが提供するのと同じブロックフィルターを使用します。 セッションリプレイは、イベントやユーザープロパティに基づいてトラフィックをブロックしません。
セッションリプレイストレージ
セッションリプレイは、ユーザーのブラウザにクッキーを設定しません。 代わりに、デフォルトで IndexedDB と呼ばれるブラウザーのストレージオプションに依存しています。 このオプションを使用すると、ユーザーがブラウザのタブを移動したり、タブを閉じた後再開したりするセッション中に継続的なリプレイ収集が可能になります。 SDK は IndexedDB に保存したデータを削除するため、ユーザーのディスク容量に影響を与えることはほとんどありません。
環境がIndexedDBに対応していない場合、セッションリプレイは代替手段としてメモリ内ストレージを使用します。インメモリストレージは耐久性が低く、ユーザーがブラウザウィンドウを閉じるとデータが失われます。 インメモリストレージを強制するには、設定オプションstoreTypeを'memory'に設定します。
ユーザーがサイト上のすべての Cookie を拒否した場合は、optOut 設定オプションを使用して、そのユーザーのリプレイデータ収集を無効にしてください。
IndexedDBのベストプラクティス
IndexedDBが初期化され、正しく動作していることを確認するには:
CSPヘッダーを確認して、過度に制限的でないことを確認してください。
default-srcとscript-srcディレクティブで必要なソースが許可されていることを確認してください。同じオリジン内でIndexedDB操作を実行します。 クロスオリジン制限により、IndexedDB の操作がブロックされることがあります。
ユーザーがIndexedDBをサポートする最新のブラウザーを使用していることを確認してください。Amplitudeは、Chrome、Firefox、Safari、Edge、またはOperaの最新バージョンを推奨しています。
クッキー
セッションリプレイ は Cookie を直接使用しないため、Cookie のサイズに影響を与えません。ブラウザ SDK はセッション管理のために Cookie を使用します。
既知の制限事項
セッションリプレイを実装する際には、次の制限事項に注意してください。
- セッションリプレイは、複数のプロジェクトにわたって1人のユーザーからのリプレイを統合しません。 例えば:
- マーケティングサイトとウェブアプリケーションを別々のAmplitudeプロジェクトとして計測し、それぞれでセッションリプレイを有効にすることができます。
- 既知のユーザーがマーケティングサイトから操作を開始し、ウェブアプリケーションにログインします。
- Amplitudeは両方のセッションをキャプチャします。
- 各セッションのリプレイは、ホストプロジェクトで閲覧できます。
- セッションリプレイは次のHTML要素をキャプチャできません:
- キャンバス。
- WebGL。
objectFlash、Silverlight、Java などのプラグインを含むタグ。セッションリプレイはobject type="image"をサポートしています。- Lottie アニメーション。
crossOriginIframes.enabled: trueを使用してセッションリプレイ SDK をロードしないクロスオリジン<iframe>要素(Stripe や Google マップなどのサードパーティ製の埋め込みなど)。ファーストパーティ製のクロスオリジンiframeをキャプチャするには、クロスオリジンiframe録画に移動してください。- 認証を必要とするアセット(フォント、CSS、画像など)。
- セッションリプレイは広告ブロッキングソフトウェアと互換性がありません。
複数のAmplitudeインスタンス
セッションリプレイは、Amplitude SDKの単一インスタンスへの接続をサポートしています。アプリケーションが複数のインスタンスを使用している場合は、プロジェクトに関連性の高いインスタンスでセッションリプレイを開始するようにしてください。
<script>
const sessionReplayTracking = window.sessionReplay.plugin();
const instance = window.amplitude.createInstance();
instance.add(sessionReplayTracking);
instance.init(API_KEY);
<script>
トラブルシューティング
個々のステータスとエラーの詳細については、セッションリプレイIngestionモニターを参照してください。
CSS のスタイル設定がリプレイに表示されない
Amplitudeがリプレイをキャプチャする場合、アプリケーションやサイトの一部であるCSSファイルやその他の静的アセットをダウンロードして保存することはありません。セッションリプレイはこれらのファイルへの参照を保存し、リプレイを再構築するときにそれらの参照を使用します。状況によっては、以下の理由により、リプレイのスタイルが使用しているアプリケーションと異なる場合があります:
- サイト上のアセットが移動または名前が変更されました。 これは、アプリケーションの新しいバージョンをデプロイするときに発生することがあります。
- サイト上のアセットはアクセス制御の背後にあるため、Amplitudeはそれらを取得できません。
CSS読み込みに関する問題を解決するには:
ドメインが一般公開されていることを確認してください。 ローカル環境で作業している場合、Amplitudeは
localhostに保存されているアセットにアクセスできない場合があります。CDNは古いリプレイ用に古いスタイルシートを記録しておく必要があります。同じスタイルシートのコンテンツが時間の経過とともに変化する場合は、アセットのURLに固有の文字列またはハッシュを追加してみてください。例:
stylesheet.css?93f8b89。サーバーの CORS 設定で許可されているドメインのリストに
app.amplitude.comまたはapp.eu.amplitude.comを追加します。外部スタイルシートをセッションリプレイでアクセスできるようにします。 セッションリプレイが外部スタイルシートを確実にキャプチャできるようにするには、コード内の
<link rel="stylesheet">要素にcrossorigin="anonymous"属性を追加してください。これによりブラウザは認証情報を送信せずにCSSをロードするよう指示され、オリジン間でスタイルシートルールにアクセスできるようになります。この属性がない場合、Google Chrome などのブラウザはこれらのルールへのプログラムによるアクセスをブロックします(たとえば、
stylesheet.cssRulesを読み取ろうとする試みは失敗します)。サイトはユーザーには正しく表示されますが、これらの制限により、セッションリプレイツールが完全なスタイル情報をキャプチャできないことがあり、その結果、ビジュアル再生が不完全または破損します。
キャプチャセッションに含まれる情報は限られています
Amplitudeは、セッションリプレイがセッションをキャプチャするときに自動的に[Amplitude] Replay Capturedイベントを作成します。実装でこのイベントが表示されない場合、ファネル分析、セグメンテーション、ジャーニーチャートなどのAmplitudeの分析ツールでリプレイが正しく表示されない可能性があります。セッションリプレイは、引き続きセッションリプレイホームページまたはユーザープロフィールページで確認できます。このイベントが表示されない場合は、Amplitudeサポートにお問い合わせください。
ブラウザSDK以外の方法を使用してイベントを計測する場合は、セッションリプレイStandalone SDKの使用を検討してください。
リプレイの長さとセッション時間が一致しません。
状況によっては、リプレイの長さが [Amplitude] Start Session イベントと [Amplitude] End Session イベントの間の時間を超えることがあります。これは、ユーザーがブラウザまたはブラウザのタブを閉じたときに発生し、[Amplitude] End Session発生しますが、Browser 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をブロックしている可能性があります。 ブラウザの開発者ツールでリクエストが失敗していないか確認し、失敗している場合は、ブロックされたドメインに例外を追加してください。
現在のセッションでブラウザSDKを介してトリガーされたイベントはありません。
セッションリプレイを行うには、ユーザーのセッション内の少なくとも1つのイベントに[Amplitude] Session Replay IDプロパティが設定されている必要があります。 その Browser SDKSession StartとSession Endイベントには、このプロパティがデフォルトで含まれています。Amplitude Browser SDK 2 以外の SDK を使用してイベントを計測する場合は、セッションリプレイ Standalone SDK を使用し、必要なイベントプロパティを各イベントに確実に付与してください。
ローカルテストでは、セッションリプレイが機能することを確認するために、セッション開始イベントを強制的に発生させます。
- ブラウザの開発者ツールを開き、
AMP_で始まるクッキーをすべて削除してください。 - 開発者ツールを閉じて、ページを更新してください。
- Amplitudeでは、ユーザー検索イベントストリームに
[Amplitude] Session Replay IDプロパティを含むセッション開始イベントが表示されます。処理後、そのセッションに対して[セッションを再生]ボタンが表示されます。
サンプリング
セッションリプレイのデフォルトの sampleRate は 0 です。このレートをより高い数値に更新してください。 詳しくは、サンプリングレートをご覧ください。
一部のセッションには、セッションリプレイIDプロパティが含まれていません。
セッションリプレイでは、セッション内のすべてのイベントに[Amplitude] Session Replay IDプロパティが必要なわけではなく、セッション内の1つのイベントがそのプロパティを有していれば十分です。セッションリプレイに接続しているソースとは異なるソースでイベントを計測すると、このプロパティが存在しない場合があります。 たとえば、アプリケーションがブラウザSDKではなくバックエンドソースからイベントを送信する場合があります。
セッションリプレイ処理エラー
一般的に、再生は取り込んでから数分以内に利用可能になるはずです。遅延やエラーは、次のいずれかまたは複数の原因によって発生することがあります。
- API キーまたはデバイス ID が一致しません。 これは、セッションリプレイと標準イベント計測が異なるAPIキーまたはデバイスIDを使用している場合に発生することがあります。
- セッションリプレイが間違ったプロジェクトを参照しています。
- 短いセッション。 ユーザーが初期化から数秒以内にバウンスした場合、SDKはリプレイデータをアップロードする時間がない可能性があります。
- ページ計測。 ユーザーがアクセスするすべてのページでセッションリプレイが実行されない場合、そのユーザーのセッションが正しくキャプチャされない可能性があります。
- 設定されたリテンション期間(デフォルトは30日、追加ボリュームを購入した場合は90日)よりも古いリプレイ。
これは役に立ちましたか?