A heatmap is a visual representation of data that uses color-coding to represent how users browse through your website. From clicking elements to selecting an option from a modal box to browsing page content, a heatmap is a true representation of all visitor actions. Heatmaps report helps you identify visitor behavior and how they interact with a web page, where they click if an important CTA or link is getting enough clicks, and other data. Based on your heatmap reports, you can determine where to place your most important CTA buttons and links.
Using VWO, you can analyze click patterns and behavior of your website visitors by generating different report types like- Clickmap, Scrollmap, ClickArea, and Element List.
To know more about heatmaps in VWO, refer to this video.
Types of Heatmap
VWO consists of following types of heatmaps:
A heatmap is a visual representation of visitor clicks on your website. It uses color-coding to indicate different levels of activities. The brighter or hotter an area is, the more interaction it represents. Red areas are the areas with the most interactions, yellow indicates average activity, green indicates areas with less activity and blue indicates the areas with least interaction. You can use a heatmap report to improve your website performance by determining which elements are receiving maximum visitor attention and which ones are not getting noticed. For example, you can determine which CTA button or section gets maximum clicks by your website visitors. Analyzing a heatmap report can help you determine where maximum attention is drawn on the page and rethink the layout of elements.
Clickmaps display the exact number of clicks on specific elements or links on a page, images, text, and other elements. With every modification you implement on a page, you can compare and measure if the number increases. Clickmaps display the number of clicks when you hover your mouse over an element, clickable, or button. In addition to the number of clicks, clickmaps give you the percentage of click on an element compared to the total number of clicks on a page.
Scrollmap is a visual representation of the scrolling behavior of your visitors’ on your webpage. You can find out how many visitors scrolled through a page, made it to the middle or bottom of a page, or where they abandoned a page. A Scrollmap report highlights the most active and scrolled sections of your website page in different colors. Red indicates areas of high engagement, yellow indicate average activity, and blue indicates little user interaction. Scrollmaps help determines how deep visitors generally scroll on-page and help determine an optimal length of the webpage, below which most visitors don't scroll. Using scroll map data, you can identify the most visited sections of the page, where to add important content, key information, and CTA buttons.
ClickArea data helps you compare engagement between two sections of the same webpage. You can compare the elements/sections within a page. Simply select areas by drawing two or more squares on the webpage, and reports are generated in real-time to compare them.
Using the ElementList option, you can view clicks on each element of your webpage in a tabular form. Here, you can view the activities on each element on your website, including links, headers, list items, div, and hidden elements such as elements inside a drop-down menu, and so on.