ヒートマップ

ドキュメント > Session Replay > ヒートマップ

ヒートマップは、Session Replay データに重ね合わせたユーザーのインタラクションを視覚化するものです。ヒートマップには 3 つの異なるタイプがあります。

Click maps: ユーザーのインタラクション (クリック) を表示し、ユーザーがページをどのように利用しているかを把握します。
Top Elements: 特定のページで最もインタラクションの多い要素を最大 10 個までランキング形式で表示します。
Scroll maps: ユーザーがページをどこまでスクロールしたかを表示します (ページの平均的なフォールド位置を含む)。平均的なフォールドとは、ユーザーがスクロールせずにデバイス上で見ることができるページ内の最も低い位置のことです。

ヒートマップを使用して複雑なデータを一目で確認し、ユーザーエクスペリエンスの最適化に関する洞察を得ることができます。

ヒートマップは、ブラウザ Session Replay でのみサポートされています。

前提条件

ヒートマップを始めるには、

ブラウザ SDK のバージョンを確認してください。
- クリックマップを使用するには、最新バージョンの SDK (v4.40.0 以降) である必要があります。
- スクロールマップを使用するには、(v4.50.0 以降) である必要があります。
Session Replay を有効にします。
アクション追跡を有効にするには、SDK の初期化で trackUserInteractions: true を設定します (クリックマップに必要)。

はじめに

Digital Experience > Real User Monitoring > Session Replay > Heatmaps に移動します。アプリケーションとビューを選択します。

Real User Monitoring のランディングページで、アプリケーションセレクターからアプリケーションとビューを選択します。期間セレクターの左側で、表示するヒートマップのタイプ (トップ要素、クリックマップ、またはスクロールマップ) を選択できます。

ヒートマップページでは、アプリケーション別、マップタイプ別、デバイスタイプ別、アクション名別、詳細なフィルターなど、さまざまな方法でビューを表示できます。

Digital Experience > Product Analytics > Heatmaps に移動します。アプリケーションとビューを選択します。

このページから、特定のビューに対して表示するヒートマップのタイプ (トップ要素、クリックマップ、スクロールマップ) を選択できます。

各ビューについて、異なるタイプのヒートマップ (トップ要素、クリックマップ、またはスクロールマップ) を選択できます。

ビュー名をクリックすると、関連するヒートマップの詳細が表示されます。

以下の追加のビューオプションがあります。

表示するビューを切り替えるには、上部にある View Name および Application セレクターを使用します。
デバイスビューを変更するには、Device type セレクターを使用します。
アクション名でフィルタリングするには、Filter actions by ドロップダウンを使用します。
特定の地域など、より詳細なフィルターを追加するには、Add Filter ボタンをクリックします。

トップ要素

トップ要素ヒートマップは、特定のビューでのクリック操作を集計し、最もインタラクションの多い要素とそのインタラクション順位を表示します。マップ上のランキングは、横に表示されるアクション名に対応しています。

パネル内のアクション名にカーソルを合わせると、マップ上の対応するアクションが強調表示されます。

クリックマップ

クリックマップは、セッションからユーザーのクリック操作を集計し、それらをマップ上にブロブとして視覚化することで、特定のビューで最もインタラクションの多いアクションを表示します。

左側には、ページ上で発生したすべてのアクションが頻度順に一覧表示されています。アクションをクリックすると、そのインタラクションについて詳しく確認できます。例:

ユーザーが行ったアクションの回数と、そのページでの上位アクションの全体的な分析での位置づけ。
そのアクションにフラストレーションシグナルが発生していた場合 (たとえば、ユーザーがそのボタンを激怒してクリックした場合) には、関連するフラストレーションシグナルも表示することができます。

このビューでは、Start a Funnel ボタンをクリックしてユーザーの離脱を特定することもできます。

スクロールマップ

スクロールマップは、特定のページにおけるスクロールアクティビティの集計結果を表示します。スクロールマップを使用して、ページの平均的なフォールド位置や、特定の深さまでスクロールしたユーザー数を確認できます。スクロールマップ上の青いフローティングバーをドラッグして、確認したい深さまで移動できます。

スクロールマップの左側にあるパネルでは、クエリ結果への直接リンクなど、概要レベルのインサイトを確認できます。たとえば、ユーザーが特定のパーセンタイルを超えてスクロールしたビューの一覧へのリンクがあります。インサイトパネルの下には、ページのミニマップと、詳細なスクロールデータを表示する分布グラフがあります。これは、どこで最大の離脱が発生しているかを特定するのに役立ちます。

スクリーンショット

スクリーンショットとは、特定の時点におけるビューの状態です。スクリーンショットを変更すると、選択したスクリーンショットに応じて異なる結果が表示されます。スクリーンショットを保存して、組織内の全員が同じビューの状態を分析できるようにすることもできます。

スクリーンショットの変更

ヒートマップビューから、Change Screenshot ボタンをクリックします。3 つのオプションを含むドロップダウンが表示されます。

Existing screenshots

あなたまたはチームメイトが以前に保存したスクリーンショットから選択します。これにより、組織内の全員が同じビュー状態を分析できるようになります。

Take new screenshot

ライブアプリケーションから直接スクリーンショットをキャプチャします。開いているモーダル、ホバーメニュー、特定のスクロール位置など、記録されたリプレイに存在しない状態が必要な場合にこのオプションを使用します。

前提条件: このオプションを使用する前に、Datadog Test Recorder Chrome拡張機能をインストールしてください。この拡張機能は、Datadog 内の埋め込みブラウザでライブアプリケーションを読み込み、キャプチャしたい正確なページとUI状態に移動できるようにします。

Take new screenshot をクリックします。
埋め込みブラウザでキャプチャしたいページに移動します。
ページをスクロールして操作し、目的のコンテンツを表示します。
ヒートマップのスクリーンショットに機密データが表示されないように、マスキングレベルを選択します。コードで構成された要素レベルのプライバシー設定が引き続き優先されます。詳細については、プライバシーオプションを参照してください。
Take Screenshot をクリックします。スクリーンショットのプレビューが開きます。
プレビューを確認し、Confirm をクリックしてヒートマップにスクリーンショットを適用します。

Grab from replay

記録された Session Replay からスクリーンショットを選択します。

Grab from replay をクリックします。
右側のアクションイベントをクリックして、ヒートマップに使用する別のスナップショットを選択します。
セッションに目的のスクリーンショットにつながるアクションが含まれていない場合は、Choose Another Replay をクリックして Session Replay のリストに戻ります。
Take Screenshot をクリックして、一時停止した時点のスクリーンショットをヒートマップに適用します。

スクリーンショットの保存

Grab from replay または Take new screenshot を使用して撮影されたスクリーンショットは自動的に保存され、組織内でヒートマップを開くすべてのユーザーのデフォルトビューになります。最近の Session Replay から自動選択されたスクリーンショットも保存するには、現在のスクリーンショット上の Save をクリックします。

同じ表示に対して複数のスクリーンショットを保存し (例: デフォルト表示、ナビゲーションメニューを開いた状態、モーダルを開いた状態など)、チームメイトが保存したスクリーンショットを切り替えることができます。

現在保存されているスクリーンショットを削除し、最近の Session Replay から自動選択されたものに戻すには、現在のスクリーンショット上の Unpin をクリックします。

[unpin] をクリックして、現在ピン留めされているスクリーンショットを削除します。

リプレイの保持期間を超えてヒートマップを分析する

Product Analytics では、クリックデータは背景として使用される Session Replay よりも長く保持されます。データ保持を参照してください。リプレイの保持期間よりも前の期間のヒートマップを表示するには、

日付範囲を過去 30 日以内の期間に設定し、最近の Session Replay を背景としてヒートマップをレンダリングします。
現在のスクリーンショット上の Save をクリックしてピン留めします。
日付範囲を分析したい期間に戻します。

ピン留めしたスクリーンショット上に、古いクリックデータが表示されます。Take new screenshot を使用して、ライブアプリケーションから特定の状態をキャプチャすることもできます。

注: 背景には、分析している期間中のアプリケーションではなく、最近のアプリケーションの状態が反映されます。その間にページレイアウトが変更された場合、クリックが誤った要素の上に表示されることがあります。

データ保持

ヒートマップは 2 つのデータ (オーバーレイ - クリックとスクロール、および背景のスクリーンショット) を組み合わせたもので、Datadog はそれぞれを異なる期間保持します。

データ	ソース	保持期間
RUM のオーバーレイ (クリックとスクロール)	RUM アクションイベント	30 日間
Product Analytics のオーバーレイ (クリックとスクロール)	Product Analytics クリックデータ	15 か月間
両方の背景のスクリーンショット	Session Replay	デフォルトで 30 日間

ヒートマップのレンダリングには両方のデータが必要です。クリックデータは存在するものの、背景として使用できる Session Replay が残っていない期間を選択した場合、Analytics Explorer でそれらのアクションをクエリできるにもかかわらず、ヒートマップには [No Replay Data] と表示されます。

Product Analytics で 30 日を超える期間の表示を分析する場合は、Session Replay が利用可能なうちにその表示のスクリーンショットを保存してください。スクリーンショットを保存すると、その背後にある Session Replay の保持期間が 15 か月に延長されるため、Datadog が Product Analytics のクリックデータを保持している限り、ヒートマップはレンダリングされ続けます。リプレイの保持期間を超えてヒートマップを分析するを参照してください。

RUM では、アクションイベントは 30 日後に期限切れとなるため、その期間を超えてヒートマップを利用することはできません。

他のデータ型に適用される保持期間については、データ保持期間を参照してください。個別のリプレイの保持期間を延長する方法については、データ保持期間の延長を参照してください。

次のステップ

ヒートマップを分析した後は、関連データを調査してユーザーアクションを理解します。関連する Session Replay を視聴してセッション全体のコンテキストでユーザーアクションを確認するか、RUM または Product Analytics の Analytics Explorer に移動してユーザーデータを分析します。

トラブルシューティング

あるビューのヒートマップを確認していますが、予期しないページが表示されています。

ヒートマップはビュー名に基づいています。アプリケーションの構成によっては、多くのページが同じビュー名でグループ化されたり、特定のビュー名が付けられたりすることがあります。

選択したビューに初期コンテンツが表示されていません。

ヒートマップは Session Replay データを使用して生成されます。Datadog のインテリジェントなアルゴリズムが、最新で、ページの初期状態に最も近い Session Replay を選択します。場合によっては、この Session Replay が目的のものとは異なることがあります。ヒートマップのスナップショットを切り替えるには、Change Snapshot ボタンを使用して Session Replay のさまざまな状態を切り替え、目的の状態を見つけます。表示している Session Replay に目的のスナップショットがない場合は、Choose Another Replay ボタンを使用して同じビューの別の Session Replay を選択できます。

ヒートマップ横のアクションリストに、ヒートマップでは表示されない要素を示すアイコンがあります。

アイコンのツールチップには、要素が表示されていないことが示されています。これは、その要素がページ上でよく実行されるアクションであるものの、ヒートマップのスナップショットには表示されていないことを意味します。その要素を確認するには、右上の Change Snapshot をクリックして、その要素が存在するスナップショットにヒートマップを切り替えます。

ヒートマップを作成しようとすると、[No Replay Data] という状態が表示されます。

[No Replay Data] 状態は、ヒートマップの背景として使用できる Session Replay が Datadog で見つからなかったことを意味します。一般的な原因:

選択した期間が、デフォルトの 30 日間の Session Replay 保持期間よりも前である。クリックデータは存在する可能性がありますが、背景として使用する Session Replay が残っていません。リプレイの保持期間を超えてヒートマップを分析するを参照してください。
現在の検索フィルターに一致する Session Replay がありません。
Browser SDK での記録を開始したばかりのため、Session Replay はまだ利用できません。これには数分かかる場合があります。