ヒートマップ¶

ヒートマップは、色のグラデーションによって、クリックやスクロールなどユーザーのウェブページ上での操作を直感的に表示するデータ可視化ツールです。この色分けにより、フロントエンドエンジニアはユーザーが注目している要素や、最適化が必要な可能性がある領域をすばやく特定できます。たとえば、クリックヒートマップ上で頻度が高い領域は、ユーザーが特定の機能を強く必要としていることを示している可能性があり、エンジニアはインターフェースの強調表示や機能拡張の参考にできます。

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

ヒートマップを表示¶

1. ユーザー分析 > セッションヒートマップに移動します。
2. ワークスペースの範囲を選択します。デフォルトでは現在のワークスペースですが、同じサイト内の複数の認可済みワークスペースを選択することもできます。
3. 候補リストからアプリを選択します。アプリのオプションにはソースワークスペースも同時に表示されます。
4. ページアドレスを指定します（例：現在のページ /rum/heatmapindex）。
5. [確定] をクリックして、ヒートマップ詳細ページに移動します。

ヒートマップは一度に 1 つのアプリのみを分析します。ページ、行動、フィルターの候補値、背景リプレイはすべて、選択したアプリのソースワークスペースに由来します。他の選択済みワークスペースはアプリの候補を提供するだけで、現在のヒートマップの統計には関与しません。同名または同じアプリ ID のクロスワークスペースアプリは個別に選択され、ヒートマップは結合されません。

ワークスペースまたはアプリを切り替えると、システムは新しい有効なアプリに基づいて再クエリを実行します。選択可能なアプリがない場合は、ヒートマップ分析を開始しません。認可と読み取り専用の条件については、クロスワークスペースクエリの説明を参照してください。

ヒートマップの詳細¶

クリックヒートマップ¶

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

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

統計¶

操作 TOP 100¶

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

イベントの左側には、次の 2 種類のアイコンが表示されます。

• ：位置を特定：その操作が左側の背景画像内にあることを示します。クリックすると、ページがスクロールしてそのヒートエリアが表示されます。
• ：非表示：その操作のヒートエリアが現在の背景画像内にないことを示します。

イベントをクリックすると、操作詳細ページに移動します。Guanceは、時系列分布図を使用して、現在の操作イベントの操作データを視覚化して表示します。また、最も人気のある操作、クリックユーザー数、クリック数の 3 つのディメンションで統計分析を行います。その操作に関連するセッションリプレイの最新 10 件も同時に表示されます（時間、所要時間、ユーザー名、ブラウザなどの情報を含みます）。

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

要素分析¶

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

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

ページ管理¶

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

• 現在のヒートマップでは、時間ウィジェットを使用して、さまざまな時間範囲のヒートマップデータを確認できます。

• ページ上部では、環境、バージョン、サービス、都市などのさまざまな指標ディメンションに基づいてフィルタリングできます。フィルターディメンションにホバーすると、クリックして削除できます。また、さらにをクリックして新しいフィルターディメンションを選択することもできます。必要に応じて使用してください。

• 画面幅を設定できます。4 つのオプションがあり、必要に応じて選択します。

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

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

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

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

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

アプリまたはページを切り替えた後、現在の View のヒートマップ背景画像の生成に失敗した場合、システムは現在の分析条件に一致する他の候補 View を試行します。自動試行後もヒートマップを表示できない場合は、次の方法でトラブルシューティングしてください。

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

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

ヒートマップの保存¶

保存操作は、現在ログインしているワークスペースのみを選択した場合に適用されます。クロスワークスペースの読み取り専用状態では、スナップショットの新規作成、編集、削除は提供されません。保存する必要がある場合は、アプリが属するワークスペースに移動し、現在のワークスペースのみを選択してください。

現在のヒートマップページを保存できます。フィルター条件を追加した場合は、それも同時に保存されます。保存されたページはホームページに追加され、すばやくクエリできるようになります。その後、この保存されたページに対して、共有、リンクのコピー、削除などの操作を行うことができます。

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

クロスワークスペースのページのスナップショットリストは、引き続き現在ログインしているワークスペースから読み取られ、他のワークスペースのスナップショットは結合されません。スナップショットを復元すると、クエリのワークスペース範囲と、選択したアプリのソース情報も同時に復元されます。アプリのソースを特定できない場合は、アプリを再選択する必要があります。

保存済みのヒートマップに対しては、次の操作が可能です。

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

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

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

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

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

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

現在の View の背景画像の生成に失敗した場合、システムは現在の分析ページとフィルター条件に一致する他の候補 View を自動的に試行します。スクリーンショットの取得に成功すると、そのスクリーンショットを使用してヒートマップが表示され、現在の分析条件は変更されません。「ページスクリーンショットの変更」を使用して、他の利用可能なスクリーンショットを手動で選択することもできます。

クロスワークスペースのクエリでは、候補 View は現在選択されているアプリとそのソースワークスペースに限定され、他のアプリのスクリーンショットは背景として使用されません。

利用可能な候補がない場合、または自動試行がすべて失敗した場合、ページは読み込みを終了して失敗を通知します。ページの指示に従って再試行するか、スクリーンショットを手動で切り替えることができます。

関連情報¶