Heatmaps

ClickTale offers a suite of Heatmaps which visually represent an aggregation of multiple visitor behavior-patterns for a particular page. By aggregating the data of mouse movements performed by thousands of visitors on a webpage, ClickTale creates a comprehensive, visual representation of what visitors are looking at and focusing on within the page. The Heatmaps are presented as a color-coded overlay on the page. In addition to the visual display, ClickTale provides Link Analytics allowing you to discover not only where visitors click, but also where they hover, how long they hover for, their hover-to-click conversion rate and much more. Link Analytics appear when you hover on a page element that appears in a Heatmap.

You can compare any two Heatmaps, using the Side-by-Side option.

Overview of the User Interface
All Heatmaps are displayed in a 2-pane window, as shown below. This allows for setting or changing the Heatmap parameters and generating the result in the same window.


 * The top pane is the "Heatmap Settings Pane", allowing you to define and modify the settings of the Heatmap.
 * The pane below that is the "Heatmap Parameters Pane" where you can define the parameters of the displayed Heatmap.
 * The Heatmap itself is displayed below the Parameters Pane.

The basic process for generating a Heatmap is:
 * Select the Heatmap type.
 * Define the page or pages to produce the Heatmap for.
 * Set the date range or version you want the Heatmap to cover.
 * Define filters to specify the target population included in the Heatmap (optional).
 * Click "GENERATE HEATMAP".
 * When the Heatmap is displayed, use the controls in the State Parameters Pane to change the display of the Heatmap.

The options in the two panes are explained below.

Heatmap Types
Below is a description of the four types of Heatmaps available in the ClickTale system. Click on each of the links to learn more about a specific Heatmap.

{| class="Prettytable" style="border-spacing: 8px; width:70%;" !
 * style="width:70%; vertical-align:top;"|
 * style="width:70%; vertical-align:top;"|

Mouse Move Heatmap
Displays an aggregation of the mouse movements of visitors on a webpage.


 * For more information, please see our wiki page on Mouse Move Heatmaps.




 * style="width:70%; vertical-align:top;"|
 * style="width:70%; vertical-align:top;"|

Mouse Click Heatmap
Displays an aggregation of visitors' clicks anywhere on the page. The map presents all the clicks, made on links, images, text and 'dead space'.


 * For more information, please see our wiki page on Click Heatmaps.


 * style="width:70%; vertical-align:top;"|
 * style="width:70%; vertical-align:top;"|

Scroll-Reach Heatmap
Displays an aggregation the scrolling patterns of visitors. The information presented on the map allows you to find out exactly where on your webpage the page fold lies, how far down your visitors scroll, and at which stage your visitors abandon the page.


 * For more information, please see our wiki page on Scroll-Reach Heatmaps.


 * style="width:70%; vertical-align:top;"|
 * style="width:70%; vertical-align:top;"|

Attention Heatmap
Displays an aggregation of the time spent on each part of the page. The information presented allows you to see how much attention a specific element receives. Find what content your visitors care about the most, what they read, and what they ignore.
 * For more information, please see our wiki page on Attention Heatmaps.


 * }