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

セッションリプレイを使用すると、クリック、スクロール、ナビゲーションなどのインタラクションを記録することで、モバイルアプリケーションでのユーザーアクティビティをモニターできます。これらのインタラクションを、詳細なセッションメタデータとともに、ビデオのようなダイナミックなプロセスとしてキャプチャします。これによりチームは、ユーザー体験に関する明確な洞察を、特に問題が発生した場合に、得られます。セッションリプレイを見ると、次のことができます。

  • ユーザーエクスペリエンスを最適化する。
  • アプリケーションクラッシュのエラーをデバッグする。
  • アプリケーションが低速である理由を診断します。

Prerequisites

Ensure that the following conditions are met to use Session Replay:

  • Controller >= 25.7
  • JavaScript Agent = 25.9
Log in to the administration console and add the following property to use Session Replay:
  1. Go to Account Settings.

    1. Click Add Property and add browser.session.replay.enabled. Set the value of this property to 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 のセッションリプレイの表示

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