This website works best with JavaScript enabled. Learn how to enable JavaScript.

Types of Heatmaps

Last updated

Heatmap reports help you identify user behavior and interaction with your web page such as an important call-to-action (CTA) or link getting enough clicks or visitors mistaking certain texts for CTA buttons.

Using VWO, you can generate a visual report to understand the behavior of your website visitors:

  • Heatmaps
  • Clickmaps
  • Scrollmaps
  • ClickArea
  • Element List


A heatmap is a visual representation of visitor clicks on your website. Use 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, and a color like blue indicates areas with less activity.


You can use a heatmap report to improve your website performance by determining which elements are receiving maximum visitor attention and which ones aren’t 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 to place your most important CTA buttons and links.


Clickmaps display the exact number of clicks on specific elements or links on a page—links, 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.


Scrollmaps is a visual representation of the webpage scrolling behavior of your visitors. 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 Scrollmaps report highlights the most active and scrolled sections of your website page in different colors. For example, red indicates high activity, yellow indicates average activity, and blue indicates little user interaction.


Scrollmaps help determine the average fold of the website and the optimal length of the webpage, below which your visitors don’t scroll. Using scroll map data, you can identify the most visited section of the page, where to add important content, key information, and CTA buttons. Sections where users spend most of the time should contain the key elements of the website.


ClickArea data helps you compare between two sections of the same webpage. You can compare the elements/sections within a page.


Setting up ClickArea data collection is as easy as drawing two or more selection squares on the webpage, and reports are generated in real time to compare them.

Element List

Using the Element List report option, you can views clicks on each element of your webpage in a tabular form. 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.

  • 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 click on the page.

Was this article helpful?

Thanks for your feedback!
Please email us at to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login