Heatmaps in CUX allow you to visualize where users click, move their cursor, and focus their attention on a page. In A/B testing, they are valuable because they show how users interact with each variant, highlighting differences in attention distribution, element visibility, and engagement patterns. Unlike Waterfalls or Goals, Heatmaps do not measure conversions directly but instead reveal behavioral nuances that can explain why one variant may perform better than another. By generating Heatmaps for each variant, you can identify:
- Which elements attract the most attention.
- Whether design changes (e.g., button placement, color, or size) affect click distribution.
- Where users keep their cursor most often or touch the screen (Move map), revealing which content captures the most attention.
- Behavioral differences between variants that go beyond simple conversion numbers.
How to use a Heatmap for A/B testing The process of using Heatmaps depends on the method you use to distinguish variants. In each case, there are a few key principles to keep in mind:
- Generate and analyze Heatmaps separately for Variant A and Variant B. Whether you generate one Heatmap per URL variant at a time or filter a single Heatmap by ID or Data Layer value, working with separate views makes comparison clearer. Opening one Heatmap for Variant A and another for Variant B in separate browser tabs allows you to spot differences directly without switching filters back and forth.
- Use grouped Heatmaps instead of opening a Heatmap for a single page. Grouped Heatmaps consolidate data across multiple instances of the same page type (e.g., product pages, articles or types of traffic like ), providing a more reliable sample and reducing the noise of one-off visits.
- Compare both desktop and mobile Heatmaps. Desktop Heatmaps open by default, but user behavior often differs significantly on mobile devices, where layouts, scrolling, and click/tap patterns may influence results.
- Review multiple types of Heatmaps. Click Heatmaps are the starting point, but Move Heatmaps and specialized layers like Dead Clicks, Rage Clicks, or Zoom Heatmaps provide deeper insights into user attention and potential frustration points.
How to generate heatmap depending on your method of dividing variants:
- Two separate URLs or same URL with different parameters
- Insert the part of the relative URL that defines the variant into the Search by page input on the Heatmap page.
- Click Show grouped heatmap at the bottom of the filtered list, or go to Grouped Heatmap → Show grouped results.
- You can adjust the comparison type after clicking the Grouped Heatmap button to refine the list of URLs included in the grouped Heatmap.
- Unique element IDs
- Create a grouped Heatmap (as described above) for the page or group of pages where the tested elements are located (e.g., product page, blog article).
- Once the Heatmap is generated, enter your variant’s element ID into the Search field and click the search icon.
- The Heatmap will filter to show only clicks on that element and display the total number of clicks collected under the Elements (events: [number]) header.
- Please note: Move and Zoom Heatmaps do not support filtering by element ID. For these visualization types, only URL- or Data Layer-based methods can be used.
- Create a grouped Heatmap (as described above) for the page or group of pages where the tested elements are placed.
- After the Heatmap is generated, insert your Data Layer key and value into the corresponding inputs.
- CUX will generate a version of the Heatmap filtered by that value, showing all recorded activity (clicks, moves, rage clicks, zooming, etc.) specifically for the variant that carried the given Data Layer key and value.
Important! Filtering heatmaps with Data Layer feature is available upon request to all enterprise customers, if you are interested in adding it to your account please contact our support team for more information at sales@cux.io
Example: Imagine you are testing two product page layouts:
- Variant A displays product details first, followed by customer reviews.
- Variant B displays customer reviews above the product details.
By generating Heatmaps for each variant, you can compare how users interact with the page. You may discover that:
- In Variant A, most clicks concentrate on the “Add to cart” button, but fewer users move their cursor over the reviews section.
- In Variant B, Move maps show that users spend significantly more attention on the reviews section, but fewer users focus on product specifications lower on the page.
- Click maps also reveal that in Variant B, fewer clicks go directly to the “Add to cart”
- button because reviews absorb more attention higher on the page.
This type of insight helps you understand how layout changes shift attention and whether this aligns with your business goals (e.g., prioritizing product discovery vs. encouraging purchases).