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

セッションリプレイを使用すると、クリック、スクロール、ナビゲーションなどのインタラクションを記録することで、ウェブアプリケーションでのユーザーアクティビティを追跡できます。セッションリプレイを見ると、次のことができます。

  • ユーザーエクスペリエンスを最適化する。
  • アプリケーションクラッシュのエラーをデバッグする。
  • アプリケーションが低速である理由を診断します。
重要: このドキュメントに現在記載されている製品はベータ版です。Splunk AppDynamics は、ベータ版およびそのドキュメント（本書の内容を含む）について、一般提供を開始する前、また最終的に一般提供しないと決定した場合でも、時期と理由を問わず、お客様への通知や補償なしに変更する権利を留保します。この資料は、将来の製品機能を保証するものではありません。購入の判断材料にはしないでください。実際の製品の成果は、AppDynamics およびお客様のテクノロジーの変化、経済動向やターゲット市場に関連する要因、他社の買収、人員の雇用・解雇、およびその他の要因により、将来予測に関する記述とは異なる場合があります。詳細については、 https://www.splunk.com/en_us/legal/appdynamics-limited-license-agreement.html で完全な規約をお読みください。

Prerequisites

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

  • Controller >= 25.3
  • JavaScript Agent = 25.5

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 boolean

–
sessionReplayUrlHttps string – （必須）キャプチャされたセッションデータを送信する端末（EUM クラウドの URL）。
packAssets boolean 正しい

記録された画像、 CSS、フォントなどの Web サイトアセットをパックします。このオプションが無効化されている場合、再生時にアセットを取得するアセット URL のみ記録に保持されます。
iframe boolean true 同一の送信元の iframe を記録します。
imageB itmap boolean false キャンバスとビデオコンテンツをキャプチャしてセッションリプレイ機能を強化するには、このオプションを有効にします。
maskAllInputs boolean true すべての <input> フィールドをマスクして、ユーザーが入力した機密データを保護します。
maskAllText boolean false ページ全体のテキストコンテンツをすべてマスクします。
sensitivityRules 配列（Array） []

要素レベルのプライバシーマスキングを微調整します。シンタックスに従って、sensityRules を追加します。

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

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

  • exclude：情報をスキップします。
  • mask：情報をマスクします。
  • unmask：情報のマスクを解除します。

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

  • exclude：情報をスキップします。
  • mask：情報をマスクします。
  • unmask：情報のマスクを解除します。
例：
JSON 
sensitivityRules: [
  { rule: "exclude", selector: "img" },
  { rule: "mask", selector: ".sensitive-field" },
  { rule: "unmask", selector: ".public-info" }
]
sessionReplayScriptUrl string (auto-derived)

デフォルトのリプレイ スクリプト ロケーションを上書きします。

一般：adrumExtUrlHttps + "adrum/session-replay/" + agentVersion
enableReplayFolderVersioning boolean true 互換性を保つため、エージェントのバージョンフォルダを使用します。フラットな構造からサービスを提供するには、false に設定します（例：https://your-cdn.com/replay）。

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

管理者はセッションリプレイのみを有効にできます。選択したブラウザアプリケーションのセッションリプレイを有効にするには、以下のオプションを実行します。
  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 のセッションリプレイの表示

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