* This article was wrote when: Ver 1.1.7.0.
Last updated when: Ver 2.0.6
These are the specifications as of May 11, 2021(updated on October 29, 2021). The information on this page is possible to be changed in the future.
Color changes
The color of each map will change as shown in the image below.
Data Recording
Records the position of each second spent. When clicks occur on the site, it records information such as where the click occurred.
However, it does not record data while a user is unfocused from the site, or when a user has been on the site for more than 30 minutes.
Scroll Map
This map displays how far users have scrolled on the page in different colors.
Red is the position where the most people have reached, and blue is the position where the least people have reached. The color changes in a gradient from 100% to 0%.
(Since Ver. 2.0.6) When you hover the mouse cursor over the scroll map*, it will show you how many users have focused on that part of the page (the vertical position where the cursor is). *If the page is scrolled while the cursor is NOT ON the scroll map, the initial value will continue to be displayed.
Data recording and calculation methods)
Calculate as follows.
- Find the page height.
- It finds the center Y coordinate of the browser screen that each user is viewing and whether or not they have reached the bottom of the page.
This is the position that was considered ” focused”. - Calculate the Y-coordinate of the center of the browser screen divided by the page height to get the vertical position ratio. If the bottom of the page has been reached, it will not be calculated, but will instead reflect the fact that the bottom of the page has been reached.
- The results of step 3 will be recorded in the data.
- Based on the data from step 4, it determines what percentage of users have viewed the site and draws a scroll map.
Example)
Let’s say the total number of data is 200, the site is at 50% of its height, and 80 people (data) remain on the site without leaving.
In this case, at 50% of the page height, the scroll map will show 40%, and the number of people focusing will be 80.
Attention Map
This map displays the average time spent per user on the page in different colors.
The closer you get to red, the longer the average time spent, and the closer you get to blue, the shorter the average time spent.*
*The shade of the attention map does not change depending on the number of accesses (the number of users who have reached the location). Please refer to the calculation method for details.
Calculation method)
The data is recorded based on a user’s display center position.
Calculate as follows.
- Divide the height of the page into 50 sections.
- Find the average time spent per user at each location divided by step 1.
- Draw an attention map based on the data in step 2.
- When the average stay time exceeds 7 seconds, the color turns red and does not change any more.
Example)
If 100 people reach the 21/50 position on the page, and the average time spent at the split position is 1 second, then this position is close to blue in color.
If two people reach the 43/50 position on the page, and the average time spent in the split position is 6 seconds, then the color of this position is close to red.
Click Heatmap
This map displays the position where users clicked in the page in a different color.
The closer the red color is, the more people are clicking on that location, and the closer the blue color is, the more people are moving away from the clicked location.
For drawing, we use “heatmap.js” under the MIT license, as described in the license in readme.txt. We set 1 for value and 2 for max to get the ideal gradualness for a standard site.
Also, if you build a heatmap with a height of 8192px or higher, the heatmap display will be partially broken at points that are multiples of 8192px, but this is a specification.
Click Count Map
Counts and displays the number of clicks in sections enclosed by any of the four tags: a, input, button, and textarea. This is an approximate count because it is measured by the onclick event.
The number of clicks can be high against the number of users, such as when a user opens a link in a new tab.