Session Replay for Browser RUM
Session Replay allows you to monitor user activity within browser applications by recording interactions such as clicks, scrolls, and navigation. It captures these interactions as dynamic, video-like journeys, along with detailed session metadata. This provides teams with clear insight into the user experience, especially when issues arise. You can watch the session replay to:
- Optimise the user experience.
- Debug the errors for application crashes.
- Diagnose the reasons for application slowness.
セッション リプレイ ライセンス
セッションリプレイは、RUM Peak、Browser RUM-Pro、Browser RUM-Peak、Mobile RUM-Pro、および Mobile RUM-Peak パッケージで利用可能なアドオンライセンスです。詳細については、Session Replay を参照してください。
前提条件
セッションリプレイを使用するには、次の条件が満たされていることを確認してください。
- コントローラ 25.10 以降
- javascript エージェント 25.9 以降
-
Account Settings に進みます。
-
[Add Property] をクリックして [browser.session.replay.enabled] を追加します。
このプロパティの値をtrueに設定します。
-
JavaScript エージェントの構成
API パラメータを使用したセッションリプレイの設定
この設定後、インストルメンテーションスクリプトをコピーして javascript エージェントに挿入します。
(function(config){
// ... other JSAgent configs
config.sessionReplay = {
enabled: true,
sessionReplayUrlHttps: ""
// ... other optional configs
};
})(window["adrum-config"] || (window["adrum-config"] = {}));
enabled
セッションリプレイを有効にするには、このパラメータを true に設定します。
sessionReplayUrlHttps
(必須)
型:文字列
キャプチャされたセッションデータを送信する端末を入力します(EUM クラウドの URL)。
packAssets
型:boolean
packAssets: true | {
fonts?: false
images?: false
styles?: true
}
このパラメータは、記録された画像、CSS、フォントなどの Web サイト資産をパックします。
fonts と images をバンドルできます。
packAssets: boolean | {
fonts?: boolean
images?: boolean
styles?: boolean
}
iframes
型:boolean
デフォルトでは60000。 true
同一の送信元の iFrame を記録します。
imageBitmap
型:boolean
デフォルトでは60000。 false
キャンバスとビデオコンテンツをキャプチャしてセッションリプレイ機能を強化するには、このオプションを有効にします。
maskAllText
型:boolean
デフォルトでは60000。 false
ページ全体のテキストコンテンツをすべてマスクします。
maskAllInputs
型:boolean
デフォルトでは60000。 true
すべての <input> フィールドをマスクして、ユーザーが入力した機密データを保護します。
persistence
型:boolean
デフォルトでは60000。 false
頻繁なサイトの更新またはナビゲーション中に、セッションリプレイのデータが失われる可能性があります。これを防ぐには、このオプションを true に設定して、セッションリプレイデータのローカルストレージの永続性を有効にします。
sensitivityRules
型:配列
要素レベルのプライバシーマスキングを微調整します。シンタックスに従って sensitivityRules: を追加します。
sensitivityRules:[{rule:<Type>, selector:<Css Elements>}]
記録内の指定された CSS オブジェクトの情報に適用されるルールタイプは 3 つあります。
- exclude:情報をスキップします。
- mask:情報をマスクします。
- unmask:情報のマスクを解除します。
sensitivityRules: [{ rule: "exclude", selector: "img" },{ rule: "mask", selector: ".sensitive-field" },{ rule: "unmask", selector: ".public-info" }]
sessionReplayScriptUrl
型:文字列
デフォルトのリプレイ スクリプト ロケーションを上書きします。
一般的には「adrumExtUrlHttps + "adrum/session-replay/" + agentVersion」のようになります。
enableReplayFolderVersioning
型:boolean
互換性を保つため、エージェントのバージョンフォルダを使用します。フラットな構造(例:https://your-cdn.com/replay)からサービスを提供するには、false に設定します。
セッションリプレイの有効化
セッションリプレイの表示
- に進みます。
- セッションリプレイを有効にしたアプリケーションを選択します。
- Sessions を選択します。
- 録音が可能な場合、[Session Replay] に再生アイコンが表示されます。
- [Session Replay] タブを展開します。
[Session Replay] は、セッションのアクティブなセグメントを強調表示します。録画またはユーザー アクティビティがない場合は、空白の画面が表示されます。
再生速度を調整できます。