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 以降
セッションリプレイを使用するには、管理コンソールにログインして次のプロパティを追加します。
  1. Account Settings に進みます。

    1. [Add Property] をクリックして [browser.session.replay.enabled] を追加します。このプロパティの値を true に設定します。

JavaScript エージェントの構成

javascript アプリケーションでのセッションリプレイを報告するには、次のように javascript エージェントを構成します。
  1. コントローラ UI にログインします。
  2. 対象のブラウザアプリケーションを開きます。
  3. 左のナビゲーションメニューで、[Configuration] を選択します。
  4. Configure JavaScript Agent を選択します。
  5. Configure Session Replay で、Enable Session Replay を選択します。
    configure-session-replay-JavaScript-agent

API パラメータを使用したセッションリプレイの設定

この設定後、インストルメンテーションスクリプトをコピーして javascript エージェントに挿入します。

JSON
(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

デフォルト:
JSON
packAssets: true | {
   fonts?: false
   images?: false
   styles?: true
}

このパラメータは、記録された画像、CSS、フォントなどの Web サイト資産をパックします。

このパラメータは、デフォルトでスタイルをバンドルするだけです。このデフォルト設定により、帯域幅の使用が最適化されます。必要に応じてこの設定を変更し、fontsimages をバンドルできます。
注: ベストプラクティスとして、デフォルト設定の変更は避けてください。
JSON
packAssets: boolean | {
   fonts?: boolean
   images?: boolean
   styles?: boolean
}
注: このオプションを false に設定した場合、再生中に資産を取得する資産 URL のみが記録に保持されます。

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: を追加します。

JSON
sensitivityRules:[{rule:<Type>, selector:<Css Elements>}]

記録内の指定された CSS オブジェクトの情報に適用されるルールタイプは 3 つあります。

  • exclude:情報をスキップします。
  • mask:情報をマスクします。
  • unmask:情報のマスクを解除します。
例:
JSON
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 に設定します。

セッションリプレイの有効化

管理者はセッションリプレイのみを有効にできます。選択したブラウザアプリケーションのセッションリプレイを有効にするには、以下のオプションを実行します。
  1. コントローラ UI にログインします。
  2. 対象のブラウザアプリケーションを開きます。
  3. 左のナビゲーションメニューで、[Configuration] を選択します。
  4. [Instrumentation] をクリックします。
  5. [Session Replay] タブで、[Enable Session Replay] を選択します。
    BRUM のセッションリプレイの有効化。

セッションリプレイの表示

  1. User Experience > Browser Apps に進みます。
  2. セッションリプレイを有効にしたアプリケーションを選択します。
  3. Sessions を選択します。
  4. 録音が可能な場合、[Session Replay] に再生アイコンが表示されます。
  5. [Session Replay] タブを展開します。

[Session Replay] は、セッションのアクティブなセグメントを強調表示します。録画またはユーザー アクティビティがない場合は、空白の画面が表示されます。

ブラウザ RUM のセッションリプレイの表示

再生速度を調整できます。