Displaying Overlapping Elements on Heatmaps

Overlapping layers of elements exist on pages, in menus; tabs; form parts and other entities. For example:

Menus may overlap when open

Tabs may overlap on same area

Heatmaps display all mouse moves and clicks on the HTML, without consideration for the different layers. This leads to data that is misleading and not very useful.

A similar functionality for Form Analytics reports can be achieved using the method described in this article.

The content view feature allows you to identify each overlapping layer and select it in the heatmap to display only the data (Mouse moves or clicks) relevant to the selected layer.

This feature comprises two parts:


 * 1) An API for registering the overlapping layers
 * 2) A selection list in the heatmap window to choose the layer you want to show data for.

Registration API
Use the ClickTaleContext.registerAggregatedContentSwitch API function to name and register each layer in the overlapping area - menu, tab or form section.

For example:

Where:
 * "menutab1" and "menutab2" are the overlapping layer names in the HTML and
 * “Tab1” and “Tab2” are the names you give to the elements containing these overlapping layers, to be displayed in the Page State drop-down list.

Heatmap state display selection
When displaying a Mouse Click or Mouse Move heatmap, a drop-down option called “Page State” enables the user to choose the registered layer for which mouse clicks/moves will be displayed.

When a layer is selected, only mouse clicks/moves that were made on that layer are displayed. The default state shows mouse clicks/moves on all layers.

Here's a live example, showing 4 states in addition to the default state.