|
This article covers the following: |
Overview
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 |
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.
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.
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.
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
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.
Need more help?
For further assistance or more information, contact Wingify Support.
|
This article covers the following: |
Overview
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
- Reports Type: Select the report type you want to view the heatmap, clickmap, clickarea stats, scrollmap, or element list.
- Add Observation: Click the Add Observation icon to note down a comment or observation you made on the report. To learn more about adding an observation from a report, click here.
- URL: For multiple URLs, you can switch among reports of different pages.
- Refresh: Refresh the reports page to view updated data.
-
Navigate: Click this option to navigate through the pages of your website to view heatmaps of those pages.
The Wingify website runs heatmaps on your live website on any pages that contain the JavaScript code snippet. You can use this option to browse your website and view heatmaps on any page.NOTE: With this option, You can also view heatmaps on dynamic URLs such as pages behind sign-in, checkout pages, and so on. - Clicks: Displays the total number of visitor clicks on the page. Switch between Latest Clicks (latest 5000 clicks by default) and All Clicks to view.
- Intensity: Use the slider to increase or decrease graphic intensity on the reports.
- Device Type: Filter your reports based on the data collected based on visitor device types such as desktop, phone, iPad, and so on.
- Share: Click the option to share the heatmap link with others.
- Download: Use this option to download screenshots of the heatmaps report. To download the report, click on the download icon present at the bottom of the heatmap report viewer to download
How to View Reports on Different Devices?
To view the report of different devices, click on the desktop icon present at the bottom of the heatmap report viewer. As soon as you click on this icon, the options to view the report in the mobile view and the tablet view appear.
Viewing Report for Different Types of Heatmap
HEATMAP REPORT
This represents the graphical report of how visitors interact with a webpage. To view the heatmap report, click the HEATMAP tab on the reports page. The brighter area on the heatmap represents maximum interaction, and the darker shades indicate lesser activity. For heatmaps created as part of a test, the maximum number of clicks that can be plotted on the heatmap report is 100k. However, there is no limit to the number of clicks plotted on standalone “Advanced” Heatmaps.
CLICKMAP REPORT
A clickmap report lets you find out the exact number of clicks on specific sections of the page links, images, dead space, text, or any element on the page. You can compare the clicks of different variations and measure if the result improves. To view the clickmap report, click the CLICKMAP tab on the reports page. In the clickmap report, you can hover the mouse over the link or section of the website you want to track links, images, dead space, text, or any element on the page.
SCROLLMAP REPORT
Using the scrollmap report, you can, track how many visitors actually make it to any depth of the page This represents the level of scroll after which they abandon the page. This lets you arrive at a decision of placing the key elements of the website in the sections where visitors spend most of their time. To view the scrollmap report, click the SCROLLMAP tab on the reports page. In the scrollmap report, the most active and scrolled sections of your website page are displayed in brighter shades of different colors. It also displays the number of views for that area, along with the percentage of visitors who reached that specific area.
CLICKAREA REPORT
The clickarea report compares two sections of the same page to measure clicks and moves. This data is useful to track which sections get ignored or which sections should be prioritized. You can also check if the changes implemented in a section are making an impact on visitor behavior. To view the clickarea report, click the CLICKAREA tab on the reports page.
In the clickarea report, you can click and select the sections you want to compare.
ELEMENT LIST REPORT
The element list report lets you view the activities on each element on your website, including links, headers, list items, div, and so on. For each element on a particular page, you can view the number of clicks. To view the element list report, click the ELEMENT LIST tab on the reports page.
In the element list report, you can view the list of elements on the page and the related visitor data captured for each element. Sections present in the element list report:
- The Element column lists the location of each element, according to the element name provided in the HTML code of your website page.
- The Type column displays the type of element each represents (sections in div tags, headers and footers, forms, text, and so on), per the HTML structure of the webpage.
- The Clicks column shows the number of clicks that each element received.
- The Percentage of Total column displays the proportion of clicks that each element received compared to the total number of clicks on the page.
Need more help?
For further assistance or more information, contact Wingify Support.