Mobile Heatmaps enable you to visualize how users interact with your mobile app screens. By displaying tap and scroll activity through an intuitive color-coded overlay, you can quickly identify areas of high engagement, low interaction, or unexpected user behavior, helping you optimize your mobile experience.
Mobile Heatmaps provide visual insights into user behavior on your mobile app screens, helping you understand:
- Engagement hotspots: Identify which elements users tap most frequently and where they focus their attention, even beyond detected UI elements.
- Scroll behavior: See how far users scroll down your screens to determine if important content is being viewed or missed.
- Unexpected interactions: Uncover areas where users are tapping but shouldn’t be, revealing potential confusion or unmet expectations.
- Screen layouts: Use visual data to make informed decisions about element placement, content hierarchy, and screen design.
- Design changes: Measure the impact of UI updates by comparing user interaction patterns before and after changes.
Before you begin
- Your app must be running a minimum SDK version: iOS 4.44.1 or later, Android 4.41.1 or later.
- If you use Flutter (version 3.19.0) or React Native, contact your Customer Success Manager (CSM) to join the Beta
- Jetpack Compose (Android only): Add a Gradle plugin to capture scroll data. Learn more in our technical documentation.
- You need captured sessions on the screens you want to analyze.
- Screen view tagging: Mobile Heatmaps require a accurate screen view tagging plan. If multiple screen views share IDs or names, the system will aggregate data from multiple screens, resulting in inaccurate visualizations.
How to set up a Heatmap for mobile apps
- From the main menu, go to "Zoning Analysis", then click '+ New Zoning'.
-
Browse and select a screenshot. Sort by newest or name A-Z, or use the page selector to filter by screen.
Screens are shown as cards, each displaying a thumbnail, traffic, and the number of screenshots taken.
Note
If no screenshots have been taken yet, scan the QR code on the screen from your device, then refresh the page to see it appear. The QR code for taking screenshots is available in the sidebar throughout the whole flow.
Note
Only screenshots captured via the device are shown here. Screenshots from Session Replay are not included.
-
Filter by app version using the 'App version' dropdown to refine your screenshot selection.
-
Click ‘Next’ to create your Heatmap.
-
Switch between the Tap or Scroll map.
Type of Heatmaps
Mobile Heatmaps offer two visualization types to help you understand different aspects of user behavior on your app screens.
Tap Map
A Tap Map shows where users tap on a screen. Every tap is recorded at its exact position and aggregated across all sessions matching your selected criteria .
Colors represent the relative concentration of taps across the screen: red areas indicate higher tap activity, blue indicates lower tap activity. Taps are collected on both fixed elements (headers, footers) and scrollable elements (main screen content).
Scroll map
A Scroll Heatmap shows you how far users are scroll down your screen. The colored overlay indicates the percentage of users who reached each portion of the screen: red means most users scrolled that far, blue means few did. Hover over a zone to see the exact percentage.
Scroll Maps use exposure metrics to track element positions and scroll events during a screen view.
The average fold metric, the lowest visible point when a screen first loads, is not yet available for Mobile Heatmaps.
Manage your Heatmap
Change your screenshot
-
When viewing a Heatmap, click the picture icon to open the menu.
-
Select 'Add new screenshot.'
-
Choose a new screenshot from the suggested options, or capture a new screenshot with the QR code.
- Follow the on-screen next steps to update your screenshot.
Changing the screenshot won't affect your filters, date range, or other analysis settings.
Share a Heatmap
-
While viewing your Heatmap, click the 'Share' button in the top right corner.
-
Click the 'Copy link' button and it to other users who have access to your Contentsquare project.
Use Shortcuts
From your Heatmap analysis, you can access related tools directly:
- Session Replay: Click ‘View replays’ to access the Session Replay linked to your current segment.
- Impact: Visualize the impact of taps on your conversion goals to understand which interactions drive business results.
FAQs
What is the current data limitation?
Heatmap data is sampled at 100,000 screen views. For performance reasons, Mobile Heatmaps analyze data from up to 100,000 screen views only. If your screen gets more traffic, the system will sample the data proportionally.
How accurate is the screen view tagging?
If multiple screens share the same screen view ID or name, Contentsquare will aggregate data from all those screens onto a single Heatmap. This results in inaccurate or disproportionate visualizations. Ensure each screen has a unique identifier in your tagging plan.
How is Dynamic Content managed within Heatmaps?
Interactions on Dynamic Content that appear based on user actions (such as modals, pop-ups, or expandable panels) are included in the interaction calculations, even when the dynamic content is not visible in the screenshot. This can affect the accuracy of tap positioning. Similarly, dynamic content that changes the position of other UI elements (like collapsible panels that push content down) may reduce the precision of the Heatmap.
What are the other device-related limitations?
Mobile Heatmaps currently do not support:
- Tablets: only phone form factors are supported.
- Horizontal scrolling: only vertical scrolling can be tracked.
- Multiple vertical containers are at the same hierarchy level.
- Device rotation: landscape orientation is not supported.
Is the Average Fold available on Mobile Heatmaps?
The Average fold is not available yet. Reminder: The Average fold on your screen is the lowest visible point on the screen when a user opens a screen app before they've done any scrolling.