ヒートマップの仕様

※この記事は、Ver 1.1.7.0 のときに作成されました。
最終更新: Ver 2.0.6 のとき

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

色の変化について

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

データの記録について

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

スクロールマップ

ユーザーがページをどこまでスクロールしたのかを、色分けして表示する機能です。
赤色が最も到達している人が多い位置で、青色が到達している人が少ない位置となります。100%から0%まで色がグラデーションで変わります。
(Ver 2.0.6より)スクロールマップの上にマウスカーソルをもっていくと、何人のユーザーがページのその辺りまで(カーソルのある縦位置まで)注目したのかを表示します。(※カーソルがスクロールマップ上にない状態でページをスクロールすると、初期値が継続して表示されます。)

データの記録と計算方法)
下記のように求めます。

  1. ページの縦幅を求めます。
  2. 各ユーザーが閲覧しているブラウザ画面の中央Y座標とページ最下部まで到達したか否かを求めます。
    これを「注目」された位置とします。
  3. ブラウザ画面の中央Y座標÷ページ縦幅 を計算し、縦位置の比率を求めます。(ページ最下部まで到達していた場合は計算せず、代わりに最下部まで到達したことを反映させます。)
  4. 3の結果をデータに記録していきます。
  5. 4のデータを元に、何%のユーザーがどこまで閲覧したのかを割り出し、スクロールマップを描画します。

例)
データ数合計が200、サイトの縦幅50%の位置で、80人(のデータ)が離脱せず残っていたとします。
この場合、ページの縦幅50%の位置では、スクロールマップ上は40%と表記され、注目人数は80人となります。

アテンションマップ

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

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

  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イベントでの計測になるので、おおよそのカウントとなっています。

ユーザーがリンク先を新規タブで開いた場合など、ユーザー数に対してクリック数が多くなることがあります。

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

関連記事