On this page

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プラグイン

npmv1.35.138.6 kB gzip

セッションリプレイの計測

セッションリプレイはデフォルトではオンになっていません。標準の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 に適用し、リプレイを構築します。セッションリプレイには最大長はありません。

始める前に

セッションリプレイプラグインには次のことが必要です。

  1. アプリケーションは Web ベースです。
  2. デバイスIDをSDKに提供できること。
  3. このサイトでは、ブラウザ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が一致しない場合があります。

html
<script src="https://cdn.amplitude.com/libs/analytics-browser-2.45.10-min.js.gz"></script>
<script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.35.1-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を使用したセッションリプレイの実装」を参照してください。

設定

名前タイプ必須デフォルト概要
sampleRatenumberいいえ0リプレイ収集のために選択するセッションの数を制御します。 この数値は0から1の小数（例：0.4）で、Amplitudeがリプレイ収集のためにランダムに選択するセッションの割合を表します。セッションが多数ある場合、0.4ではそれらのセッションのうちの40%を選択します。このフィールドは必須ではありません。セッションリプレイではサンプルレートなどの設定のリモート設定がサポートされているためです。
privacyConfigobjectいいえundefinedCSSセレクターを使用した高度なマスキング設定をサポートします。
applyBackgroundColorToBlockedElementsbooleanいいえfalsetrueの場合、ビジュアルマスキングのためにブロックされた要素に背景色を適用します。これにより、どの要素がセッションリプレイによるキャプチャの対象外となっているかを確認できます。
debugModebooleanいいえfalse計装の問題（アプリの不一致など）のデバッグに役立つデバッグイベントプロパティを追加します。 初期設定のデバッグにのみ推奨され、本番環境用ではありません。
serverZonestringいいえUSEUか米国か。 Amplitudeサーバーゾーンを設定します。 EUデータセンター内のAmplitudeプロジェクトの場合、これをEUに設定してください。
configServerUrlstringいいえundefinedリモート設定を取得するためのエンドポイントURL。指定した場合、デフォルトのサーバーゾーン設定を上書きします。
trackServerUrlstringいいえundefinedセッションリプレイデータを送信するためのエンドポイントURL。指定されている場合、Amplitudeはデフォルトのセッションリプレイエンドポイントではなく、SDKからのリクエストをそこに転送します。
shouldInlineStylesheetbooleanいいえtruetrueの場合、セッションリプレイはインライン化されたスタイルシートの内容を保存します。リプレイ中、セッションリプレイはスタイルシートをリモートで取得するのではなく、保存済みのものを使用します。これにより、スタイルシートがないためにリプレイが壊れているように見えることがなくなります。インライン化スタイルシートは、すべての場合に機能するとは限りません。 未定義の場合、セッションリプレイはスタイルシートをインライン化します。
storeTypestringいいえidbセッションリプレイがリプレイイベントを保存する方法。idbは、セッションリプレイがキャプチャ中にすべてのイベントを送信できない場合に、IndexedDBを使用してリプレイイベントを永続化します。memoryはリプレイイベントをメモリにのみ保存するため、ページが閉じられたときにイベントは失われます。IndexedDBが使用できない場合、システムはメモリにフォールバックします。
performanceConfig.enabledbooleanいいえtrueセッションリプレイを有効にすると、ブラウザのアイドル状態にある間、イベント圧縮が発生するよう遅延します。
performanceConfig.timeoutnumberいいえundefinedrequestIdleCallback APIのオプションのタイムアウト（ミリ秒単位）。この値を指定すると、ブラウザがアイドル状態でない場合でも、遅延圧縮タスクを実行する前にブラウザが待機する最大時間を設定します。
useWebWorkerbooleanいいえfalseWebワーカーを使用して、リプレイイベントを圧縮します。これにより、圧縮をメインスレッドから外すことでパフォーマンスが向上します。

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 設定を使用して、セッション トラッキングを暗黙的に有効にします。

js
amplitude.init(API_KEY, USER, {
  autocapture: {
    sessions: true,
  },
});

セッション開始イベントとセッション終了イベント

プラグインバージョン 1.12.1 以降、セッションリプレイはデフォルトで Session Start および Session End イベントをキャプチャしなくなりました。これらのイベントのキャプチャを有効にするには、forceSessionTracking: true を設定します。

js
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 つのイベントが必要です。

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

The Session Replay SDK offers three ways to mask user input, text, and other HTML elements.

ElementDescription
<input>Session Replay masks all text input fields by default. When a users enters text into an input field, Session Replay captures asterisks in place of text. To unmask a text input, add the class .amp-unmask. For example: <input class="amp-unmask">.
textTo mask text within non-input elements, add the class .amp-mask. For example, <p class="amp-mask">Text</p>. When masked, Session Replay captures masked text as a series of asterisks.
non-text elementsTo block a non-text element, add the class .amp-block. For example, <div class="amp-block"></div>. Session Replay replaces blocked elements with a placeholder of the same dimensions.

Session Replay supports setting a masking level on the Session Replay Settings screen in Amplitude. This includes Light, Medium, and Conservative settings.

Session Replay settings also enable remote masking overrides. These enable users in your organization to configure or update masking after implementation.

In the event of a conflict, Session Replay defers to the remote setting. For example:

.selector-1.selector-2.selector-3
Local settingmask--mask
Remote settingunmaskunmask--
Resultunmaskunmaskmask

In this example, .selector-1 has a local setting and a remote setting. The result follows the remote setting, and overrides the setting in the SDK or plugin implementation.

Specify elements to block or mask in the privacyConfig object during configuration.

js
// 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 selectors

Session Replay's configuration supports many types of CSS Selector. Specify an element tag (h1 or textarea), a class name (.hidden) or a data attribute.

Data attributes may be useful if your class names change often due to hashing. To use data attributes, add a custom attribute like data-amp-unmask or data-amp-mask to any HTML element. For example, <textarea data-amp-unmask></textarea>, then enclose the attribute in square brackets when you specify the selector, [data-amp-unmask].

Remote configuration

If remote configuration is enabled, and fails to load, Session Replay doesn't capture any sessions. This ensures that Amplitude respects any privacy settings you define in the Admin interface, and you don't accidentally capture sensitive data.

ユーザーのオプトアウト

セッションリプレイプラグインはブラウザSDKoptOutの設定に従っており、ユーザーによるオプトアウト自体をサポートしていません。

コンテンツセキュリティポリシー（CSP）

Webアプリケーションが厳格なコンテンツセキュリティポリシーを使用している場合は、次のディレクティブを追加してください。

必要な CSP ディレクティブ

text
script-src: https://cdn.amplitude.com;
connect-src: https://api-secure.amplitude.com;
worker-src: blob:;

CSP ディレクティブのリファレンス

ディレクティブドメイン必須概要
script-srchttps://cdn.amplitude.comはい、CDNを使用している場合セッションリプレイプラグインとブラウザSDKをAmplitudeのCDNからロードできるようにします。
connect-srchttps://api-secure.amplitude.comはい (米国)SDKがリプレイデータをAmplitudeの米国サーバーに送信できるようにします。
connect-srchttps://api.eu.amplitude.comはい (EU)SDKがリプレイデータをAmplitudeのEUサーバーに送信できるようにします。serverZone: "EU"を設定した場合に必須です。
worker-srcblob:はい、Web Workersを使用している場合リプレイイベント圧縮のuseWebWorkerオプションを有効にしている場合に必須です。

APIエンドポイント

セッションリプレイは次のエンドポイントにデータを送信します。

地域エンドポイント目的
米国 (デフォルト)https://api-secure.amplitude.com/sessions/trackリプレイデータの取り込み。
欧州連合https://api.eu.amplitude.com/sessions/trackEUデータレジデンシーのためのリプレイデータ取り込み。
米国 (デフォルト)https://api-secure.amplitude.com/sessions/configリモート設定（サンプルレートの設定）。
欧州連合https://api.eu.amplitude.com/sessions/configEUデータレジデンシー用のリモート設定。

CSPヘッダーの例

米国リージョンの場合：

text
Content-Security-Policy: script-src 'self' https://cdn.amplitude.com; connect-src 'self' https://api-secure.amplitude.com; worker-src 'self' blob:;

EUのデータセンターの場合：

text
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に設定します。 例えば：

js
// For European users, set the serverZone to "EU"
await sessionReplay.init(AMPLITUDE_API_KEY, {
  serverZone: "EU", // [tl! ~~]
}).promise;

サンプリングレート

デフォルトでは、セッションリプレイはリプレイ用にセッションの0%をキャプチャします。Amplitudeの新しいアカウントスニペットを使用して計測した場合、テストを容易にするためにサンプルレートはデフォルトで1（セッションの100％）に設定されています。セッションリプレイの設定ページからサンプルレートを更新するか、sampleRate設定オプションを使用して、セッションリプレイがキャプチャするセッション総数の割合を設定します。例えば：

js
// 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プロパティを使用します。

js
await amplitude.add(sessionReplayTracking).promise;
await amplitude.remove(sessionReplayTracking.name).promise;
js
const addPromise = amplitude.add(sessionReplayTracking).promise;
addPromise.then(() => {
  amplitude.remove(sessionReplayTracking.name).promise;
});

また、Amplitude Experiment などの機能フラグ製品を使用して、場所などの基準に基づいてリプレイ収集を有効または無効にするロジックを作成することもできます。 たとえば、特定のユーザーグループを対象とするフィーチャーフラグを作成し、それを初期化ロジックに追加します。

js
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);
}

Data retention

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

Consent management and Session Replay

While privacy laws and regulations vary across states and countries, certain constants exist, including the requirements to disclose in a privacy notice the categories of personal information you are collecting, the purposes for its use, and the categories of third parties with which personal information is shared. When implementing a session replay tool, you should review your privacy notice to make sure your disclosures remain accurate and complete. And as a best practice, review your notice with legal counsel to make sure it complies with the constantly evolving privacy laws and requirements applicable to your business and personal information data practices.

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 プロパティが含まれています。このプロパティは、ユーザーのために収集されたリプレイに関する情報を提供します。

セッションリプレイ ID の形式は <deviceId>/<sessionId>です。カスタムセッション定義を使用する場合、カスタムセッションID値には/を含めることはできず、許可されている文字を使用する必要があります：a-z A-Z 0-9 _ - . | @ : =。追加のキャラクターが必要な場合は、Amplitudeサポートまでお問い合わせください。

json
{
 "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アプリが提供するのと同じブロックフィルターを使用します。 セッションリプレイは、イベントやユーザープロパティに基づいてトラフィックをブロックしません。

Session Replay storage

Session Replay doesn't set cookies on the user's browser. Instead, it relies on a browser storage option called IndexedDB by default. This option enables continuous replay collection during a session in which the user navigates browser tabs or closes and reopens a tab. The SDK cleans up the data it stores in IndexedDB and shouldn't impact the user's disk space.

If the environment doesn't support IndexedDB, Session Replay falls back to an in-memory storage option. In-memory storage is less durable and data is lost when the user closes their browser window. Set the config option storeType to 'memory' to force in-memory storage.

If a user opts out of all cookies on your site, use the optOut configuration option to disable replay collection for that user.

IndexedDB best practices

To ensure that IndexedDB is initialized and working properly:

  • Review CSP headers to ensure they're not overly restrictive. Ensure default-src and script-src directives allow necessary sources.

  • Perform IndexedDB operations within the same origin. Cross-origin restrictions can block IndexedDB operations.

  • Confirm that users use a modern browser that supports IndexedDB. Amplitude recommends the latest versions of Chrome, Firefox, Safari, Edge, or Opera.

クッキー

セッションリプレイ は Cookie を直接使用しないため、Cookie のサイズに影響を与えません。ブラウザ SDK はセッション管理のために Cookie を使用します。

既知の制限事項

セッションリプレイを実装する際には、次の制限事項に注意してください。

  • セッションリプレイは、複数のプロジェクトにわたって1人のユーザーからのリプレイを統合しません。 例えば：
    • マーケティングサイトとウェブアプリケーションを別々のAmplitudeプロジェクトとして計測し、それぞれでセッションリプレイを有効にすることができます。
    • 既知のユーザーがマーケティングサイトから操作を開始し、ウェブアプリケーションにログインします。
    • Amplitudeは両方のセッションをキャプチャします。
    • 各セッションのリプレイは、ホストプロジェクトで閲覧できます。
  • セッションリプレイは次のHTML要素をキャプチャできません：
    • キャンバス。
    • WebGL。
    • object Flash、Silverlight、Java などのプラグインを含むタグ。セッションリプレイは object type="image"をサポートしています。
    • Lottie アニメーション。
    • crossOriginIframes.enabled: true を使用してセッションリプレイ SDK をロードしないクロスオリジン <iframe> 要素（Stripe や Google マップなどのサードパーティ製の埋め込みなど）。ファーストパーティ製のクロスオリジンiframeをキャプチャするには、クロスオリジンiframe録画に移動してください。
    • 認証を必要とするアセット（フォント、CSS、画像など）。
  • セッションリプレイは広告ブロッキングソフトウェアと互換性がありません。

複数のAmplitudeインスタンス

セッションリプレイは、Amplitude SDKの単一インスタンスへの接続をサポートしています。アプリケーションが複数のインスタンスを使用している場合は、プロジェクトに関連性の高いインスタンスでセッションリプレイを開始するようにしてください。

html
<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の使用を検討してください。

Replay length and session length don't match

In some scenarios, the length of a replay may exceed the time between the [Amplitude] Start Session and [Amplitude] End Session events. This happens when a user closes their browser or browser tab and [Amplitude] End Session occurs, but the Browser SDK and Session Replay plugin haven't yet processed it. When the user visits that page again, the SDK and plugin process the event and send it to Amplitude, along with the replay. You can verify this scenario occurs if you see a discrepancy between the End Session Client Event Time and the Client Upload Time.

Session replays may not appear in Amplitude due to:

  • Content security policy
  • Blocked JavaScript
  • No events triggered through the browser SDK in the current session
  • Sampling

Local development and focus state

The Session Replay SDK and plugin capture only the page that's in focus. When you develop locally with the browser console open, focus states may not work as expected. If you don't see replays in Amplitude, try to enable debugMode. In this mode, Session Replay ignores the focus handle and enables extra debugging information.

js
const sessionReplayTracking = window.sessionReplay.plugin({
 debugMode: true,  
 sampleRate: 1, 
 });

Content security policy

When you add the Session Replay script to your site, visit a page on which the Session Replay SDK is running, and open your browser's developer tools.

Check for any error messages in the JavaScript console that contain the text Content Security Policy. For example, Refused to connect to 'https://api-secure.amplitude.com/sessions/track' because it violates the document's Content Security Policy.

To resolve this error, update your site's content security policy to allow connection to Amplitude's APIs.

Blocked JavaScript

Browser extensions or network security policy may block the Session Replay SDK. Check your browser's developer tools to see if requests fail, and if so, add an exception for the blocked domains.

No events triggered through the browser SDK in the current session

Session Replay requires that at least one event in the user's session has the [Amplitude] Session Replay ID property. The Browser SDK Session Start and Session End events include this property by default. If you instrument your events with any SDK other than the Amplitude Browser SDK 2, use the Session Replay Standalone SDK and ensure you tag your events with the necessary event properties.

For local testing, you can force a Session Start event to ensure that Session Replay functions.

  1. Open your browser's developer tools, and delete any cookie that begins with AMP_.
  2. Close developer tools and refresh the page.
  3. In Amplitude, in the User Lookup Event Stream, you should see a Session Start event that includes the [Amplitude] Session Replay ID property. After processing, the Play Session button should appear for that session.

Sampling

As mentioned above, the default sampleRate for Session Replay is 0. Update the rate to a higher number. For more information see, Sampling rate.

Some sessions don't include the Session Replay ID property

Session replay doesn't require that all events in a session have the [Amplitude] Session Replay ID property, only that one event in the session has it. Reasons why [Amplitude] Session Replay ID may not be present in an event include:

If you instrument an event with a source different from the source you connect to Session Replay. For example, your application may send events from a backend source, rather than the Browser SDK.

セッションリプレイ処理エラー

一般的に、再生は取り込んでから数分以内に利用可能になるはずです。遅延やエラーは、次のいずれかまたは複数の原因によって発生することがあります。

  • API キーまたはデバイス ID が一致しません。 これは、セッションリプレイと標準イベント計測が異なるAPIキーまたはデバイスIDを使用している場合に発生することがあります。
  • セッションリプレイが間違ったプロジェクトを参照しています。
  • 短いセッション。 ユーザーが初期化から数秒以内にバウンスした場合、SDKはリプレイデータをアップロードする時間がない可能性があります。
  • ページ計測。 ユーザーがアクセスするすべてのページでセッションリプレイが実行されない場合、そのユーザーのセッションが正しくキャプチャされない可能性があります。
  • 設定されたリテンション期間（デフォルトは30日、追加ボリュームを購入した場合は90日）よりも古いリプレイ。

Was this helpful?