NOTE: This new interface is being rolled out to Data360 accounts in phases. If you're 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 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:
| Report type dropdown |
Features the different types of reports as follows:
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:
|
| Friction Type dropdown |
For Frictionmap, you’ll see the following options:
|
| Filters |
Features the following filters:
|
| 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. VWO 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 |
| 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:
|
TIP: As VWO 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.
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.
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
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 and rage 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, or view both together. Soon, error clicks will be added, allowing you to visualize clicks that result in errors such as API errors, unhandled exceptions, and console errors.By using Frictionmap, you can quickly identify and fix areas causing visitor friction, ultimately improving visitor experience and conversions.
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. To learn more, refer to this video.
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 VWO 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.