Understand Campaign Performance Through Integrated Heatmaps

Overview

Heatmaps provide behavioral insights and let you visually analyze how users interact with your test variations. VWO integrates your campaign reports with heatmaps to combine performance metrics and behavioral insights in one unified view.

Suppose you are A/B testing your SaaS product’s homepage. In Variation 1, you replace the sticky Start Free Trial banner with a static CTA placed mid-page. Conversions drop, but performance metrics do not explain why. You open the integrated heatmaps from the campaign report, and in the heatmaps, you see most users never scroll down far enough to see the static CTA. Instead, they’re clicking on navigation links or bouncing without interacting. This clearly shows that removing the sticky banner hurt its visibility.

This feature ensures that the heatmaps you view are highly relevant to the specific campaign. Additionally, it lets you:

• Move seamlessly from conversion data to visual evidence of how users interacted with your control or variation pages.
• Access the heatmap data such as click patterns, scroll behavior, and areas of friction, directly from the report.
• Compare heatmaps of control against variations side-by-side to see behavioral differences.
• Analyze heatmaps (such as clickmaps and frictionmaps) specifically for users who converted (or did not convert) on key campaign metrics.

By analyzing both, what happened and why it happened (in the same report), you can validate hypotheses faster, identify UX issues, and make informed optimization decisions without switching contexts.

This article further explains how to access heatmaps in campaign reports and use the insights to make smarter marketing decisions.

Prerequisites

To use this feature, ensure the following conditions are met:

Access Heatmaps from Campaign Reports

To access heatmaps specific to a particular test campaign:

1. From your VWO dashboard, go to the left navigation panel, click Testing, and select the campaign type, such as A/B. A list of campaigns is displayed.
2. Click on the campaign for which you want to view heatmaps data.
3. Go to Reports > Behavioral Analysis > Heatmaps.
   
   The page displays heatmaps for each variation (Control, Variation 1, etc.) of your campaign as individual cards. 
   From here, you can choose to dive into a specific variation's heatmap by leveraging the global and specific filters to segment your data, compare heatmaps across multiple variations, or filter heatmaps by metric conversions.
   
   Each card typically shows:
   • Variation Preview: A visual thumbnail showing the actual page as seen by users in that variation.
   • Variation Name: The name of the variation (e.g., Control, Variation 1).
   • Total Visitors: The number of visitors who saw that variation and match the currently applied filters.
   • View Heatmap: Opens the full heatmap view for the selected variation in a new browser tab.
   • Compare (Dropdown): Offers comparison options for deeper analysis:
     • Add to Compare: Adds the variation to a comparison queue to view side-by-side with other variations.
     • Compare Conversion vs Non-Conversion: Opens a dual heatmap view showing user behavior for those who converted the campaign metric vs. those who did not convert within the same variation.
4. Use the View toggle on the right to switch between Grid and List views, depending on how you prefer to browse variation cards.

5. Use the available filters to refine the data.

   Note: The global filters (Date Range, Visitor Segments, Visitor Dimensions) selected in the main campaign report are automatically applied to this view.

   To filter the data based on custom conditions, use the Custom Segment option. For more information, see Defining Custom Visitor Segments in VWO.
   
   You can also group the report by different values of Visitor Dimensions.

   Note: You can apply only two visitor dimensions at a time. If you apply any Visitor Dimensions filters, the variation card view defaults to the List view (grouped by dimension), and the Grid view toggle is disabled.

   To refine the data further, use these additional filters available in the Filter By dropdown:

   • Variations: Filter heatmaps by users who saw the Control, Variation 1, or any specific variation. Based on your requirement, select a value from the dropdown to focus on users who experienced all variations or a particular variation, and click Apply.
   • Metrics: Filter by users who:
     • Converted for a specified metric or any metric at all
     • Did not convert for a specified metric or any metric at all
       
       Choose Converted or Non-converted. Then, from the next dropdown, select Any metric or pick specific campaign metrics from the list and click Apply. You can select only metric at a time. This allows you to compare behaviors, for example, between users who converted Goal A in Control versus those who did not convert Goal A in Variation 1.
6. Click View Heatmap on the card for the control or variation you want to analyze. The heatmap opens in a new browser tab. From the heatmap view, you can switch between different heatmap types, such as Clickmap, Scrollmap, Frictionmap based on your requirement.

For more information on analyzing a heatmap and gaining deeper insights, see Interpreting Heatmap Reports in VWO.

Compare Heatmaps

By comparing heatmaps, you can gain deeper insights into user behavior, quickly identify patterns, and make more informed decisions and hypotheses. To visually identify which design or layout elements influenced engagement and conversions, you can:

• Compare Heatmaps Across variations
• Filter Heatmaps by Metric Conversions

Compare Heatmaps Across Variations

Suppose you are testing two product page designs. Variation 1 includes an Apply Coupon Code section above pricing, while the Control does not. Despite expecting higher mobile conversions with the coupon visible, the reports show that Variation 1 showed lower conversions on mobile.

To investigate, you can go to the integrated Heatmaps section in your report, apply filters for mobile devices, then use Compare Heatmaps to view Control and Variation 1 side-by-side.

Follow these steps to compare heatmaps across variations:

1. On the heatmap report page with variation cards, filter the data based on your requirement, and identify the variations you want to compare. For each variation you want to include in the comparison, click its Compare dropdown.
2. Select Add to Compare. A Compare Heatmaps panel appears, showing the selected variations.

3. Once you have added at least two variations to the Compare Heatmaps panel, click Compare. Click Edit if you wish to edit the configuration of either of the heatmaps.

   A new view loads in a different browser tab, displaying the heatmaps for the selected variations side-by-side, allowing for direct visual comparison of user engagement.

Considering the example above, the heatmaps comparison view may reveal that in Variation 1, mobile users are heavily interacting with the coupon field, tapping repeatedly or scrolling around it, while engagement drops near the final CTA. In contrast, the Control shows more direct focus on the pricing and CTA. This indicates the coupon field creates friction, causing confusion or hesitation.

Filter Heatmaps by Metric Conversions

Use this feature to understand behavioral differences between visitors who achieved a goal and those who did not in the same variation.

For example, your online subscription service is running a signup campaign and you recently made some changes on the Sign Up page. The campaign reports show a drop-off in registrations after the change was implemented. From the integrated Heatmaps section, you can view and compare heatmaps of users who completed registration versus those who dropped off.

To filter heatmaps by metric conversions:

For the primary metric

1. Click Compare on a variation card.
2. From the dropdown, select Compare Conversion Vs Non Conversion. This opens a side-by-side view of heatmaps for users who converted the primary metric vs. those who did not convert in that variation.
   
   

The comparison view opens in a new browser tab.

For secondary metrics

1. Use the Filter by option.
2. In the Metrics dropdown, select Converted.
3. Then, from the next dropdown, select the secondary metric and click Apply.
4. On the variation card, click Compare and then select Compare Conversion Vs Non Conversion.

The comparison view opens in a new browser tab.

For the example above, the heatmaps (clickmaps and frictionmaps) reveal that non-converters repeatedly interact with the new form fields and navigation, indicating confusion or friction points. Using these insights, you can simplify the form layout and provide clear instructions to make the signup process smoother.

Troubleshooting

FAQs

• Will changing campaign report filters (Date, Segments) affect already collected heatmap data?
   No, filtering only changes what's displayed in the report. The underlying raw data collected by VWO Insights remains unaffected by report-level filter changes.
   
• How quickly does data from new campaign reports appear in integrated behavioral reports (heatmaps)?
  There's typically a short processing delay. Data for heatmaps usually appears within a few minutes to an hour, but this can vary based on server load and data volume.

Need more help?

For further assistance or more information, contact VWO Support.