Generate Heatmap from captured data
This CMS has heatmap generation engine which generates 2 type of heatmap from captured mouse motion.
The heatmap engine uses log of the mouse action capture. Therefore it generates heatmap by specifying the logs.
After you logged them, you can generate both heatmaps by following operations.
- Select logs to generate from
- Select version of the background design of the page
The mouse move heatmap is to do eye-tracking of the visitors.
In order to generate the mouse move heat map, click the "Mouse Move Heatmap" button on the top page of the administration console.
Then following page appears. In this page, you can generate heatmap from the captured mouse action log.
At first, click the "Create new Heatmap" button, then following dialog box appears on the page.
In this dialog, input following attribute.
- Referrer (Optional)
- Keywords (Optional)
- Screen width (Optional)
The text input form of the URL has content assist. You can select url which is logged from the candidates. The string starts with "http://" or "https://", so by typing "h", the candidates appears.
The optional input can be blank. They are same with the query attributes of action logs.
After input the parameters, click the "Next >" button. Then next page appears.
In this page, the candidates of the archived web design appears. The design is used as the back ground of the heatmap.
Select the archive version and click the "Finish >" button, then generating heatmap starts.
When you use the responsive web design, there are logs whose device is desktop pc, mobile, and tablets. Then you have to query and divide the logs for heatmap.
That means you have to create heatmap for narrow devices and desktop device.
You can query the logs by the "Screen Width" input of the heatmap creation dialiog's first page.
When you make responsive web design, you'll use "@media screen" section in the Style Sheet. For example, the default template splits the condition by the width of screen, 1000px is the boundary.
Desktop PC setting
In order to make heatmap for the desktop PC and tablets whose width is more than 1000px, specify following numbers to the screen width input.
- Min: 1001
- Max: "" (blank, input nothing)
In order to make smartphone heatmap, input following numbers.
- Min: 0 or blank
- Max: 1000
After you finished generating heatmap, the record of heatmap appears on the mouse move heatmap console. Each record has "Show" button on it.
Click the button, then the new pop up window appears, and you can view it.
The heatmap engine calculates and renders the heatmap from duration time of the mouse pointer's location. The location where the mouse pointer stays long is colored strongly.
Window Scroll heatmap is to check the reach of contents in the page.
In order to generate the Window Scroll heat map, click the "Scroll Heatmap" button on the top page of the administration console.
Then following page appears. In this page, you can generate heatmap also from the captured mouse action log.
How to generate the window scroll heatmap is almost same with the mouse move heatmap.
Click the "Create new Heatmap" button and input information. The parameters and archive version to select is same with the mouse move heatmap.
After you create the Window Scroll Heatmap, following record appears on the console.
Click the "Show" button, then a new pop up window appears and you can view it.
The heatmap engine calculate the score of scroll location by duration time of the scroll bar stays. Then the visitor watches the center of the screen more than the edge of top and bottom of screen. Therefore the color of the top is not colored strongly.