※この記事は、Ver 1.1.7.0 のときに作成されました。
最終更新： Ver 2.0.6 のとき
※2021年5月11日時点（2021年10月29日更新）の仕様です。こちらのページに記載している内容は今後変更となる可能性がございます。
色の変化について
各マップの色は、以下の画像のように変化していきます。
データの記録について
毎秒滞在位置を記録します。サイト内でクリックが発生した際は、どこをクリックしたかといった情報を記録します。
ただしユーザーがサイトからフォーカスを外している最中や、滞在してから30分以上経過した際は、データを記録しません。
スクロールマップ
ユーザーがページをどこまでスクロールしたのかを、色分けして表示する機能です。
赤色が最も到達している人が多い位置で、青色が到達している人が少ない位置となります。100%から0%まで色がグラデーションで変わります。
（Ver 2.0.6より）スクロールマップの上にマウスカーソルをもっていくと、何人のユーザーがページのその辺りまで（カーソルのある縦位置まで）注目したのかを表示します。（※カーソルがスクロールマップ上にない状態でページをスクロールすると、初期値が継続して表示されます。）
データの記録と計算方法）
下記のように求めます。
- ページの縦幅を求めます。
- 各ユーザーが閲覧しているブラウザ画面の中央Y座標とページ最下部まで到達したか否かを求めます。
これを「注目」された位置とします。 - ブラウザ画面の中央Y座標÷ページ縦幅 を計算し、縦位置の比率を求めます。（ページ最下部まで到達していた場合は計算せず、代わりに最下部まで到達したことを反映させます。）
- 3の結果をデータに記録していきます。
- 4のデータを元に、何％のユーザーがどこまで閲覧したのかを割り出し、スクロールマップを描画します。
例）
データ数合計が200、サイトの縦幅50％の位置で、80人（のデータ）が離脱せず残っていたとします。
この場合、ページの縦幅50％の位置では、スクロールマップ上は40％と表記され、注目人数は80人となります。
アテンションマップ
ページ内でのユーザーの平均滞在時間を、色分けして表示する機能です。
赤色に近づくほど平均滞在時間が長く、青色に近づくほど平均滞在時間が短くなります。
※アテンションマップの色合いがアクセス数（その位置へ到達したユーザー数）によって変動することはありません。詳しくは計算方法をご参照ください。
計算方法）
※ユーザーのディスプレイ中央位置を基準にデータを記録しています。
下記のように求めます。
- サイトの縦幅を50分割します。
- 1で分割した各位置におけるユーザー滞在時間の平均を求めます。
- 2のデータをもとに、アテンションマップを描画します。
- 平均滞在時間が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イベントでの計測になるので、おおよそのカウントとなっています。
ユーザーがリンク先を新規タブで開いた場合など、ユーザー数に対してクリック数が多くなることがあります。