NOTE: This new interface is being rolled out to Data360 accounts in phases. If you are not experiencing this interface, refer to the Non-Data360 Accounts tab.
A heatmap report displays a visual report to help you identify sections of the website which receive maximum visitor attention. The report helps you determine where to place your most important CTA buttons and links.
To access a heatmap report, go to Insights > Heatmaps > Generate a heatmap from this data, enter the URL in the Enter the URL for which you want to see heatmap field and click View Heatmap.
Components of the Heatmap Report
While viewing the heatmap data for your webpage, you can observe the details for various aspects, such as the number of hovers, clicks, scroll depth, etc. Additionally, you can view the report on several devices while adding observations. To avail of these, you can operate on the following components:
| Heatmap Types | Features the different types of reports as follows: Heatmap Clickmap Click area Hovermap Scrollmap Zonalmap Element list Frictionmap Click on the relevant report to view the corresponding data. Refer to this section for more details on each |
| Click type dropdown | Allows you to filter the heatmap report based on different types of clicks to see their distribution on your webpage. Select one of the following options and click Apply: All clicks - Displays all the clicks captured on your webpage. First <n> clicks - Displays the initial clicks visitors make on your webpage within a session. This is valuable for identifying the areas that draw your visitors’ interest first. For example, if you set n to 1, you can view the first click of all the sessions within the specified period. Only show the latest 5000 clicks - This option plots the most recent 5000 clicks, allowing for faster loading times. It's automatically enabled for pages with over 5000 clicks to optimize performance |
| Friction Type dropdown | For Frictionmap, you’ll see the following options: Rage clicks - Rage clicks are rapid, repetitive clicks by a frustrated visitor when a website fails to respond or load as expected, indicating a need for an improved visitor experience. Dead clicks - Dead clicks occur when a non-clickable element is clicked, reflecting a mismatch between visitor expectations and the website's functionality, often leading to visitor frustration Error Clicks - Error clicks are user interactions that trigger an error on your website, such as clicking a link that leads to a 404 (Page Not Found) error. Tracking these clicks helps identify broken links or malfunctioning elements that disrupt user experience and require prompt attention. |
| Filters | Features the following filters: Date filter - Select a specific date or a range to view the corresponding data. Visitor segmentation filter - Select a standard or a saved segment, or create your own custom segment to segment your visitors to view the corresponding data. Refer to this article to learn more about segmentation |
| Pages | Allows you to configure different URLs to view their corresponding heatmap reports. You can view individual pages or a group of them cumulatively. For example, you can plot the clicks of all product description pages across your website onto a single product page. Select a URL match option, specify the URL, and click Apply. Refer to this article to learn how to configure URLs |
| Navigate | Click this option to navigate through the pages of your website to view heatmaps of those pages. Wingify automatically collects heatmap data on live website pages with the JavaScript code snippet. This means you can easily view heatmaps for all your pages, including dynamic URLs like login screens and checkout areas |
| Compare Heatmaps | Click this option to compare heatmaps across pages with different visualizations, segments, device types, test campaigns, and more. For more information, see Compare Heatmaps in Wingify. |
| Copilot | Use Wingify Copilot to extract deeper insights from your web page’s heatmap and deliver precise and appropriate recommendations for testing. For more information, see Deriving Insights From Your Heatmaps Using Copilot. |
| Refresh | Click on this option to refresh the reports page to view updated data |
| Add Observation | Click on this option to add a comment or observation on a specific area of the report. To learn more about adding an observation from a report, click here |
| Device Type | Click on this option to filter your report based on the data collected based on visitor device types such as desktop, phone, and tablet |
| Test Campaign | Click on this option to select a test campaign and a specific variation. This will filter the heatmap data to show only the visitors who experienced that variation of the page. The heatmap will be plotted on the version of the page that corresponds to the selected variation. This allows you to analyze the qualitative performance of your test campaigns alongside the quantitative data available in test reports. This option is available for all Heatmap visualizations, including Scrollmap, Clickmap, Frictionmap, Element list and Click area, providing deeper insights into your test campaign results. |
| More Options | Click on the vertical ellipsis along the right end of the control panel to access the following options: Share - Provides a link you can copy to share the report for team collaboration. Intensity - Use the slider to increase or decrease the graphic intensity on the report. Help - Click to access Heatmap-related documentation. Download - Allows you to download the heatmap as a PDF |
TIP: As Wingify plots heatmap on the live website, it is recommended that you download the heatmap report of a page periodically for historical snapshots of the report. This is especially useful before making any changes to the website.
Viewing Report for Different Types of Heatmaps
Heatmap
This represents the graphical report of how visitors interact with a webpage. It features the cumulative data of your visitors’ interactions as spots. The color of a spot represents the density of clicks on that region, ranging from blue (low density) to red (high density), with green and yellow in between.
NOTE: Safari blocks third-party cookies by default. To load the heatmap data correctly, click Safari > Preferences > Privacy and disable the Prevent cross-site tracking option.
Clickmap
Clickmaps reveal where visitors click on your webpage - links, images, text, dead space or anything! Simply hover over an area to see the exact number of clicks. NOTE: The number of clicks and the visitor percentage are displayed on the mouse-over text.
Click Area
Clickareas let you compare two sections of a page, revealing which ones get more clicks and attention. Simply click and choose the sections you want to compare.
This helps you understand:
Visitor Preferences: Identify sections that resonate more with your audience.
Change Effectiveness: Track how updates impact visitor behavior.
Hovermap
Hovermaps visualize where visitors move and pause their mouse cursor on a webpage. They highlight cursor-hover intensity using color gradients, helping you understand which areas attract user attention, even when no clicks occur. This is especially useful for identifying misleading design cues, content that draws interest, or sections that users inspect before deciding to take action, for example, the reviews section on a product page. Hover data helps you understand:
Attention: Identify which parts of the page naturally catch the visitor’s eye based on cursor movement and hover behavior. Example: Visitors consistently hover over a pricing table, even if they do not click on it to express interest in comparing plans.
- Engagement without clicks: Identify sections users explore or read without interacting directly. Example: Visitors hover over the review section for several seconds, suggesting they are reading customer feedback even without interacting.
- Design cues: Detect elements that unintentionally attract or fail to attract attention. Example: A decorative icon draws a high hover concentration, showing it’s being mistaken for a clickable element.
Note: Hovermaps are supported only for desktop visitors, as hover interactions cannot be captured on mobile devices. Wingify records a hover event when the cursor remains still for 350 milliseconds or longer.
Scrollmap
Scrollmaps show how far visitors scroll down your page, revealing areas of engagement and drop-off. This helps you optimize your website layout by placing crucial elements where visitors spend the most time.
Your scrollmap reveals the report in the following format:
Visual Heatmap: Brighter colors indicate areas with higher scroll activity.
Engagement Insights: See the percentage of visitors reaching specific sections.
Zonalmap: Introducing Metric Conversion Rates
Note: The Zonalmap feature is currently in early access and available only to select users.
Wingify's Zonal Heatmaps quickly reveal high and low engagement areas on your website by automatically dividing the page into zones based on structure and click data. This enables you to understand user behavior at a glance and optimize for higher conversions.
Each zone displays aggregated interaction data, such as clicks and metric conversions, providing insights into user behavior within specific areas of the page. By selecting different metrics, you can further customize your analysis and gain deeper insights into user engagement and conversion patterns.
Refer to the detailed article here for more information.
Element List Report
The element list report provides a detailed breakdown of clicks on your website's individual elements - links, headers, buttons, and more in the following format:
- Element: This column lists the location of each element according to its name in your website's HTML code.
- Type: This column displays the type of element (e.g., link, header, button, form, text).
- Clicks: This column shows the exact number of clicks that each element received.
- Percentage of Total: This column displays the proportion of clicks that each element received compared to the total number of clicks on the page.
Frictionmap
The Frictionmap visualizes visitors’ frustration through dead clicks, rage clicks, and error clicks, helping you identify problematic sections of your webpage that may impact conversions. Navigate to the Frictionmap option to see these clicks, which indicate visitor frustration.
You can use the Friction Type dropdown to toggle between Dead clicks, Rage clicks, Error clicks, or view them all together. By using Frictionmap, you can quickly identify and fix areas causing visitor friction, ultimately improving visitor experience and conversions.