ヒートマップ¶

ヒートマップは、ページ上のクリックやスクロールなどのユーザーインタラクションを色のグラデーションで直感的に表示するデータ可視化ツールです。この色分けにより、フロントエンドエンジニアはユーザーが注目している要素や、最適化が必要な領域を迅速に特定できます。例えば、クリックヒートマップで頻度の高い領域は、特定の機能に対するユーザーの強いニーズを示している可能性があり、エンジニアはその情報を基にインターフェースの強調表示や機能強化を行うことができます。

同時に、ヒートマップはユーザーが情報や機能を探す際に直面する可能性のあるフラストレーションポイントを明らかにし、エンジニアがこれらの障害を発見して解決し、ユーザーインターフェースのユーザビリティと満足度を向上させるのに役立ちます。ヒートマップは、エンジニアにユーザーの行動に基づく直接的なフィードバックを提供し、より正確な設計判断とユーザーエクスペリエンスの最適化を可能にします。

ヒートマップを表示する¶

1. ユーザー分析 > セッションヒートマップ に移動します。
2. アプリケーションを選択します。
3. ページアドレスを指定します（例：現在のページ /rum/heatmapindex）。
4. 確定をクリックすると、作成されたヒートマップの詳細ページが表示されます。

ヒートマップの詳細¶

クリックヒートマップ¶

ヒートマップページでは、Guance はデフォルトで右側に クリックヒートマップ タイプを表示します。このタイプでは、現在のページのさまざまな指標に関する統計データと、ページ操作の TOP 100 回のイベントを確認できます。

左側のヒートマップページにホバーし、色付きのブロックをクリックすると、そのエリアのクリック数と割合を直接表示できます。詳細を表示 をクリックして右側の操作の詳細ページを開くか、そのエリアの操作名をコピーして Action エクスプローラーで検索クエリとして使用したり、Action エクスプローラーで開く をクリックしてその操作を表示し、詳細を確認することもできます。

統計¶

操作 TOP 100¶

操作イベントに基づき、Guance はこの操作のクリック数と割合を集計し、デフォルトで降順に表示します。

イベントの左側には、次の2つのアイコンが表示される場合があります。

• ：位置：この操作が左側の背景画像内にあり、クリックするとページがスクロールしてそのホットスポット領域が表示されます。
• ：非表示：この操作のホットスポット領域が現在の背景画像内にありません。

イベントをクリックすると、操作の詳細ページに移動します。Guance は、時系列分布グラフを使用して現在の操作イベントのデータを可視化します。また、最も人気のある操作、クリックユーザー数、クリック数 の3つの主要な観点から統計分析を実行します。この操作に関連する最近の10件のセッションリプレイが（時間、所要時間、ユーザー名、ブラウザなどの情報とともに）表示されます。

詳細情報を確認するには、そのイベントの右側にある をクリックすると、エクスプローラーが開きます。

要素分析¶

このタイプでは、Guance はクリック数がトップ10の要素を表示します。右側のリストの行にホバーすると、左側のヒートマップが対応する位置にスクロールします。

イベントをクリックすると、操作の詳細ページに移動します。ページの詳細については、こちらを参照してください。

ページ管理¶

上記2つのヒートマップタイプの表示に加えて、以下の操作でヒートマップ詳細ページを管理できます。

• 現在のヒートマップでは、時間ウィジェットを使用して、異なる時間範囲のヒートマップデータを表示できます。
• ページ上部では、環境、バージョン、サービス、都市などの異なる指標に基づいてフィルタリングできます。フィルタリング項目にホバーして削除するか、もっと見るをクリックして新しいフィルタリング項目を追加できます。必要に応じてご利用ください。

• 画面幅を設定します。次の4つのオプションがあります。必要に応じてご利用ください。

• 画面幅が1280 pxより大きい

• 画面幅が768pxから1280pxの間
• 画面幅が768px未満
• カスタム画面幅：min と max の2つの値を入力し、確定をクリックします。

ヒートマップの切り替え¶

他のページのヒートマップデータを表示するには、図のドロップダウンボックスをクリックします。

アプリケーションを切り替えるには、ドロップダウンボックスをクリックします。Guance は、そのアプリケーションで最も人気のある5つのページビュー（ページアクセス数に基づいて評価）を表示するので、目的のページを選択してください。

アプリケーションを切り替える際、ヒートマップ生成に使用するセッションリプレイデータがそのページで見つからず、ヒートマップページが表示されない可能性があります。以下の方法をお試しください。

1. ヒートマップのコードスニペットが RUM SDK に追加されているか確認します。
2. アプリケーションのユーザーアクセスおよびセッションリプレイデータが正常に収集されているか確認します。
3. フィルタリング条件を調整し、クエリの時間範囲を広げます。

ページから直接アプリケーション管理に移動するか、セッションデータの有無を確認するための詳細ページにジャンプできます。

ヒートマップの保存¶

現在のヒートマップページを保存できます。フィルタリング条件を追加した場合は、それらも一緒に保存されます。保存されたページはホームページに追加され、迅速にクエリできるようになります。その後、保存したページを共有、リンクのコピー、削除などの操作が可能です。

保存されたページは、ヒートマップリストに一覧表示されます。

保存されたヒートマップに対して、以下の操作が可能です。

現在のヒートマップをスナップショットとして外部共有します。操作手順はスナップショットと同じです。

共有されたヒートマップは、管理 > 共有管理 > 共有スナップショット で確認できます。

ヒートマップリンクを直接コピーします。

ヒートマップを削除します。

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

1つのページに複数の埋め込みページが含まれている場合や、同じ view_name で他のヒートマップを表示したい場合は、ページスクリーンショットの変更をクリックします。Guance は、ユーザーアクセスセッションリプレイから自動的にスクリーンショットを取得し、ヒートマップの背景として使用します。複数のページスクリーンショットから選択できます。

関連情報¶