Generate Heatmap from captured data

This CMS has heatmap generation engine which generates 2 type of heatmap from captured mouse motion.

How the heatmap is generated

The heatmap engine uses log of the mouse action capture. Therefore it generates heatmap by specifying the logs.

Log the mouse action

At first, you have to log the mouse action by the mouse action capture. By using CMS function, you can set Javascript code to log it easily.

Generate Heatmap

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

Generate mouse move heatmap

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.

Replay button on the Administration console

Then following page appears. In this page, you can generate heatmap from the captured mouse action log.

Mouse move heatmap console

Generate Heatmap

At first, click the "Create new Heatmap" button, then following dialog box appears on the page.

Dialog to select action logs

In this dialog, input following attribute.

  • URL
  • Referrer (Optional)
  • Keywords (Optional)
  • Period
  • 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.

Select version of the web design archive

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.

Setting for Responsive web design

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.

Specify screen width

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)

Smartphone setting

In order to make smartphone heatmap, input following numbers.

  • Min: 0 or blank
  • Max: 1000

View the Heatmap

After you finished generating heatmap, the record of heatmap appears on the mouse move heatmap console. Each record has "Show" button on it.

Mouse move heatmap record

Click the button, then the new pop up window appears, and you can view it.

Generated mouse move heat map

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.

Generate window scroll heatmap

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.

Replay button on the Administration console

Then following page appears. In this page, you can generate heatmap also from the captured mouse action log.

Window Scroll heatmap console

Generate Window Scroll Heatmap

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.

View the Window Scroll Heatmap

After you create the Window Scroll Heatmap, following record appears on the console.

Mouse move heatmap

Click the "Show" button, then a new pop up window appears and you can view it.

Window Scroll Heatmap

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.


Go to Top