The Heat maps tab of Page Analysis helps teams understand user interactions on a given page by reconstructing that page as it was seen by users and providing visual overlays to indicate where users click and how deep they scroll.
Click Maps
After choosing a page for analysis, the Click Maps page displays an interactive reconstruction of the page, overlaid with a colour gradient that visualizes the frequency of user clicks. They are useful for evaluating the effectiveness of CTAs, image placements, and page elements, and for validating if interaction patterns change following content updates.
At the top of the click map, you’ll see in indicator of the total number of clicks and pageviews logged by Noibu that make up the data for the selected period of time
A colour scale indicates the frequency of clicks on elements on the page. Red denotes areas with high interaction; blue indicates low engagement. Hovering over any element reveals the percentage of total clicks during the selected timeframe and device type.
Scroll Maps
Scroll Maps present the depth at which users engaged with the page. They help assess content visibility and can inform layout adjustments to surface high-value content higher on the page.
Note: scroll maps are only available on a page-by-page basis, not for Page Groups.
Similar to Click Maps, colour gradients represent scroll depth engagement. Red indicates a high proportion of users scrolled to the given page depth; blue indicates fewer users reached that page depth. Hovering over the scroll map will display a tooltip indicating scroll depth as a percent of page height) and the proportion of users who reached that depth.
Note that due to variations in browser dimensions and responsive design, scroll data is estimated across normalized viewport measurements. This allows Noibu to aggregate data across sessions while minimizing distortion.
Changing page snapshots
Unlike other analytics tools that use synthetic or placeholder layouts, Noibu’s heat map visualizations are based on reconstructed snapshots, derived directly from a representative user session within the selected timeframe.
This ensures the snapshot contains real content, styling, and elements as rendered in the user’s browsers.
Choosing a custom snapshot allows you to specifically capture the contents of dynamic elements on a page that require user interaction—like dropdown menus, carousels, or slide-outs. These interactive elements may otherwise not display unless they were open during the session used for the snapshot.
Click the Change Snapshot button to open the current page in a new tab. A widget displayed on the right-hand side allows you to interact with the website as you normally would and take a snapshot for visualization in Noibu.
Note: you may need to ensure your browser or extensions are not blocking popups, and cookies are enabled.
Click Take Snapshot, or use the shortcut key to capture a custom snapshot. Using the shortcut key is especially helpful for hover states, where you must hold your mouse over a menu item while taking the snapshot. If the widget happens to disappear when interacting with an element on the page, use the keyboard shortcut (Cmd/Ctrl + S) to capture the snapshot.
Custom snapshots for mobile pages
When capturing a snapshot for a mobile web page, the snapshot window may not automatically open at a mobile viewport size. If this occurs, manually resize your browser window to approximate a standard mobile dimension (for example, 375 × 667 px) before taking the snapshot. This ensures that the captured snapshot accurately reflects the mobile layout and element positions as rendered on users’ devices.
Adjusting Cross-Origin-Opener-Policy (COOP) to enable custom snapshot
In some cases, when Noibu opens a website in a new browser tab, the Noibu agent toolbar may fail to load. This occurs because the new tab does not retain a window.opener reference, which the toolbar requires to communicate with the Noibu console and complete the snapshot workflow.
Cause
Some websites implement a restrictive security header, such as: Cross-Origin-Opener-Policy: same-origin-allow-popups
This Cross-Origin-Opener-Policy (COOP) isolates the page into a separate browsing context when it’s opened from a different origin. As a result, the new tab cannot maintain the window.opener reference to the Noibu console, preventing the toolbar from initializing.
How to check the header
1. Open the site in your browser
2. Open DevTools → Network
3. Reload the page
4. Select the main document request.
5. In the Response Headers section, look for: Cross-Origin-Opener-Policy
Fix
To restore the opener relationship, remove or relax the COOP header. This preserves the window.opener reference, allowing the Noibu toolbar to load and function normally.
Analyzing heat maps for conversion insights
By individually analyzing pages that have been recently launched or updated, you can glean insights that can inform UX decisions and technical improvements to optimize conversions. Types of questions that can be answered with Heat Maps include:
Are people scrolling far enough to see the important content?
- Example: The “Find My Store” button is among the most clicked elements on a Product Detail Page (PDP), but it’s located low on the page.
- Insight: Moving the button higher may improve accessibility and drive faster customer decision-making.
Are users engaging with key elements placed in highly visible locations?
- Example: A "Collections" link occupies prime space in the main navigation but receives very few clicks.
- Insight: Users may not expect to find Collections there. Consider relocating the link to reduce clutter and focus attention on higher-value actions.
Are campaign landing pages driving the right actions?
- Example: Users land on a marketing campaign page but often click the top navigation, moving away to the main site instead of converting on the landing page.
- Insight: Consider simplifying or hiding the main site navigation on marketing landing pages to keep users focused on the intended CTA.
Additionally, opening two browser tabs for different time ranges (e.g. before and after a conversion drop) can yield insights into how customer engagement has changed.
For example, comparing click maps across different date ranges can help you understand if the total number of interactions scaled with traffic, and whether click distribution patterns shifted. Similarly, differences in scroll depth across different date ranges may help uncover layout issues or content fatigue.
This kind of side-by-side comparison can be invaluable for diagnosing changes in customer behaviour related to recent feature releases, marketing launches, or UX updates.