ヒートマップの仕様

※この記事は、Ver 1.1.7.0 のときに作成されました。

※2021年5月11日時点の仕様です。こちらのページに記載している内容は今後変更となる可能性がございます。

色の変化について

各マップの色は、以下の画像のように変化していきます。

データの記録について

毎秒滞在位置を記録します。サイト内でクリックが発生した際は、どこをクリックしたかといった情報を記録します。
ただしユーザーがサイトからフォーカスを外している最中や、滞在してから30分以上経過した際は、データを記録しません。

スクロールマップ

ユーザーがページをどこまでスクロールしたのかを、色分けして表示する機能です。
赤色が最も到達している人が多い位置で、青色が到達している人が少ない位置となります。100%から0%まで色がグラデーションで変わります。

計算方法)
下記のように求めます。

  1. 各ユーザが閲覧しているブラウザの一番下のピクセルを各自記録します。
  2. 1のデータを降順でソートします。
  3. 2のソートされたデータから、何%のユーザーがどこまで閲覧したのかを割り出しスクロールマップを描画します。

例)
100人のユーザーがいて計算方法2のソートをした結果、60番目のユーザーが1000pxまで閲覧していた場合、スクロールマップ60%の位置下側(つまり60%のユーザーが見た位置)が1000pxになります。

アテンションマップ

ページ内でのユーザーの平均滞在時間を、色分けして表示する機能です。
赤色に近づくほど平均滞在時間が長く、青色に近づくほど平均滞在時間が短くなります。
※アテンションマップの色合いがアクセス数(その位置へ到達したユーザー数)によって変動することはありません。詳しくは計算方法をご参照ください。

計算方法)
※ユーザーのディスプレイ中央位置を基準にデータを記録しています。
下記のように求めます。

  1. サイトの縦幅を50分割します。
  2. 1で分割した各位置におけるユーザー滞在時間の平均を求めます。
  3. 2のデータをもとに、アテンションマップを描画します。
  4. 平均滞在時間が7秒を超えた際は赤色となり、それ以上色は変化しません。

例)
サイトの21/50の位置に到達した人が100人、分割位置での平均滞在時間が1秒だった場合、この位置は青に近い色
サイトの43/50の位置に到達した人が2人、分割位置での平均滞在時間が6秒だった場合、この位置は赤に近い色となります。

クリックヒートマップ

ユーザーがページ内でクリックした位置を、色分けして表示する機能です。
赤色に近づくほどその位置をクリックしている人が多く、青色に近づくほどクリック位置から離れた箇所と判断できます。

描画にはreadme.txtのライセンスに記載しているとおり、MITライセンスのheatmap.jsを使用しています。平均的なサイトで理想的な緩急がつくように、valueには1、maxには2を設定しています。

また、8192px以上の高さのヒートマップを構築した場合、8192pxの倍数の地点でヒートマップの表示が一部途切れますが、これは仕様です。

クリックカウントマップ

a、input、button、textareaの4つのタグで囲まれた箇所のクリック数をカウントし、表示します。onclickイベントでの計測になるので、おおよそのカウントとなっています。

この記事は役に立ちましたか?

関連記事