本文へスキップ

セッションリプレイ

セッションリプレイは、ユーザーがウェブサイトで行うすべてのイベントを記録し、再生できる機能です。 この機能により、クリック、スクロール、入力、ページ切り替えなどのユーザー行動を再現できます。 これにより、ユーザーが実際にウェブサイトとどのように相互作用するかを、正確に把握できます。

  • ユーザー行動記録と再生: セッション リプレイは、ユーザーの行動を記録します。 記録されたユーザーの行動には、マウスの移動、クリック、スクロールなどが含まれます。 記録されたユーザーの行動をそのまま再生し、特定の時点で何をしたかを視覚的に確認できます。

  • エラー追跡および障害再現: 特定のイベントやエラーの発生時点を追跡して、障害の原因を分析できます。 ページを読み込むのに長い時間がかかる問題や画面で発生するその他の技術的欠陥がユーザーにどのように表示されるかを視覚的に確認できます。

ノート

セッションリプレイ機能は、ログ読取り権限があるメンバーが利用できます。 メンバーのアクセス権限については、次の文書を参照してください。

収集方法

実際の画面を録画したり、画像でキャプチャーしたりする代わりに、DOM変更事項とCSSスタイル情報などをテキスト形式で収集します。 この時、オーバーヘッドを防止するためにブラウザのメインスレッドがアイドル状態の場合にのみ変更を収集し、データを送信します。

エージェントのオプションを適用する

セッションリプレイ機能を適用するには、ブラウザエージェントオプションを適用する必要があります。 次の例題を参照してください。

<script>
(function (w, h, _a, t, a, b) {
w = w[a] = w[a] || {
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
sessionReplaySampleRate: 50,
sessionReplayMaskAllTexts: false,
sessionReplayMaskAllInputs: false,
proxyBaseUrl: "https://rum-ap-northeast-2.whatap-browser-agent.io/",
},
};
a = h.createElement(_a);
a.async = 1;
a.src = t;
t = h.getElementsByTagName(_a)[0];
t.parentNode.insertBefore(a, t);
})(window, document, 'script', 'https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js', 'WhatapBrowserAgent', '');
</script>
  • sessionReplaySampleRate Int

    全収集セッションのうち、セッションリプレイ収集比率として0から100まで設定できます。 例えば、sampleRate100であり、sessionReplaySampleRate50であると、全体セッションの中で50%のみセッションリプレイとして記録されます。

    一方、sampleRate50であり、sessionReplaySampleRate100であると、全体セッションの50%が収集対象であり、この中で100%がセッションリプレイとして記録されます。

  • sessionReplayMaskAllTexts Boolean

    既定値 true

    値をfalseに設定すると、マスキング処理なしですべてのテキスト データを収集します。

  • sessionReplayMaskAllInputs Boolean

    既定値 true

    値をfalseに設定すると、マスキング処理なしですべて入力(Input) フィールド領域のデータを収集します。

機微情報の収集を除外

機微情報に対する収集の除外方法を基本的に提供します。 画面上のすべてのテキストは、次のようにマスキングされ、収集されます。 ただし、エージェントオプションでsessionReplayMaskAllTextsの値がtrueに設定されている必要があります。

Session replay

特定の領域をマスキング処理する

テキストの他にも、個人識別情報や機密データが含まれる場合があり、これを保護するために特定の領域をマスキング処理するオプションが提供されます。

特定領域に対するマスキング処理マスキングを適用していない場合
マスキング処理マスキング未処理

収集対象から除外する領域についてのhtml要素(element)のクラス(class)名にsession-replay-block-classを追加します。 次の例題を参照してください。

<div class="session-replay-block-class home-header pure-menu pure-menu-horizontal">
<div class="home-header-bar">
{% if site.data.archive %}
<ul class="home-header-menu pure-menu-list">
{% for item in site.data.archive %}
<li class="pure-menu-item">
<a href="{{ item.url | relative_url }}" class="pure-menu-link {% if page.url == item.url %}current-item{% endif %}"">{{ item.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>

特定のテキストマスキング処理

エージェントオプションでsessionReplayMaskAllTextsfalseに設定すると、ほとんどのテキストが表示されますが、特定のテキスト領域は収集対象から除外されるオプションを提供します。

Text masking

特定のテキスト領域を収集対象から除外するには、該当html要素(element)のクラス(class)名にsession-replay-mask-text-classを追加します。 次の例題を参照してください。

<main class="session-replay-mask-text-class">
{{ content }}
</main>

<footer class="footer">
{%- assign year_from = site.posts[-1].date | date: '%Y' -%}
{%- assign year_to = site.time | date: '%Y' -%}
{%- if year_from == nil or year_from == year_to -%}
{%- assign year_string = year_from -%}
{%- else -%}
{%- assign year_string = year_from | append: '&amp;nbsp;' | append: '-' | append: '&amp;nbsp;' | append: year_to -%}
{%- endif -%}
</footer>

セッションリプレイを利用する

セッションリプレイ機能は、次のパスから利用できます。

  • 分析 > ページロードヒットマップ

  • 分析 > Ajaxヒットマップ

  • 分析 > ユーザーセッションログ検索

ノート

セッションリプレイ機能は、ログ読取り権限があるメンバーが利用できます。 メンバーのアクセス権限については、次の文書を参照してください。

ページロードヒットマップ

分析 > ページロードヒットマップ

ページロードヒットマップ

  1. ページロード ヒットマップのチャート領域をドラッグします。

  2. ページ リストセッションリプレイ機能を確認する項目の詳細アイコンボタンを選択します。

  3. ページロード 詳細画面が表示されるとセッションリプレイタブを選択します。

Ajaxヒットマップ

分析 > Ajaxヒットマップ

Ajaxヒットマップ

  1. Ajaxヒットマップ のチャート領域をドラッグします。

  2. Ajax 分析画面が表示されたら、一覧でセッションリプレイ機能を確認する項目を選択します。

  3. 右の画面からチャートタブを選択します。

ユーザーセッションログ検索

分析 > ユーザーセッションログ検索

ユーザーセッションログ検索

  1. 時間で照会する時間を設定します。

  2. 画面の右側に検索アイコンボタンを選択します。

  3. 照会結果の一覧で、セッションリプレイ機能を確認する項目の一番右にある分析ボタンを選択します。

  4. ユーザーセッション分析画面が表示されたら、セッションリプレイタブを選択します。

セッションリプレイを活用する

セッションリプレイのプレーヤー

記録されたユーザー行動イベントを再生して、実際にユーザーが画面をどのように操作したかを確認できます。

セッションリプレイのプレーヤー

  • 再生アイコン / 一時停止アイコン : 記録されたユーザー行動イベントを再生または一時停止できます。

  • 1x / 2x / 3x / 4x: 再生速度を調整できます。

  • 全画面アイコン : プレーヤー画面を全画面に拡大できます。 全画面を終了するにはESCキーを押します。

  • タイムラインをドラッグして、目的の位置に移動できます。 マウスの相互作用のないセクションは、明るいグレーで表示されます。

    Timeline

ユーザーセッション情報

セッションリプレイ画面の右側で実際のユーザーのセッション情報を確認できます。

ユーザーセッション情報

  • WEBブラウサ:エンドユーザーが使用したブラウザーの種類
  • OS:エンドユーザーが使用する機器のOSの種類
  • デバイス:エンドユーザーが使用したデバイスの種類
  • ユーザーID: エンドユーザーがウェブアプリケーションに初めてアクセスする時に発行する固有ID
  • セッションID:ウェブアプリケーションのエンドユーザーがウェブアクセスを開始する際に発行される固有IDです。
  • IP:エンドユーザーが使用するデバイスのIPアドレス
  • ユーザーエージェント: イベントが発生したブラウザのuser agent情報

ユーザーセッションフロー

開始時間を基準に収集したイベント記録を確認できます。 ユーザーセッション分析で見られるユーザーセッションフロー情報と同じです。

ユーザーセッションフロー

  • 個別のイベントを選択すると、セッションリプレイのプレーヤーのタイムラインがそのイベントの時点に移動します。

  • 個別のイベントの詳細情報を確認するには詳細アイコンボタンを選択します。

ノート

ユーザーセッション分析についての詳細は、次の文書を参照してください。