What is a Heat Map?

A heat map is used to provide a visual representation of how visitors are interacting with a website. The infotmation conveyed in heat maps can be used in a number of different ways, including:

  • Impacting layout of a site
  • Changing design to highlight key sections / links
  • Varying display ad strategies to promote higher clicks or interaction

In many cases, a heatmap will be used in connection with split testing in order to evaluate how users interact with slightly different variations of a Web page.

Types of Heatmaps

A heatmap generally shows one of two things: where visitors are focusing their view or where visitors are clicking. The former is much harder to determine; it requires some advanced technology and at least a semi-formal experiment. Below is an example of what a heatmap of visual focus might look like:

Example of a Visual Heatmap

This image represents the sections of a website that receive the most focus from visitors. The pattern above is relatively common; visitors tend to focus most intently on content positioned in the top left of a page, with attention waning as they more down the page and to the right.

This type of heatmap will give important cues about what sections of a site naturally draw attention. This may be useful in positioning high value links or calls-to-action within these “hot zones.”

Heat maps may also show click activity:

Example of a Click Heat Map

This information is also extremely useful; it shows what sections of a site are compelling enough for visitors to click on them. This indicates what is capturing attention, and can give ideas for future split tests, redesigns, or revisions to existing copy on a site.

AdSense Heat Map

Heat maps can be either customized to a specific site or page (using services such as CrazyEgg) or more general in nature. For example, Google published a heatmap detailing the areas of a generic website that capture the majority of visitor attention:

Example of a Generic Heatmap

This heatmap is a great resource for any site monetizing via display ads; though simple, it incorporates the guiding principles that will help publishers to maximize revenue in the long term.

There are a number of high quality heatmap platforms, the best known of which is Crazy Egg.

If you’re looking for something that is easy to set up and maintain, this is probably the way to go.

It’s worth noting that Google Analytics now includes intermediate heatmap functionality. For example, it’s possible to get a visual representation of the outbound clicks from a page:

Analytics Heatmap

The example above is obviously free (it’s a part of Analytics, accessible through Behavior >> In-Page Analytics)

The advantages of using a heat map

Using a heatmap is surely useful and helps you with the data so you could get to know your audiences who have engaged with your website so you could make better decisions.

  • Website design and user experience

Using the heat map will surely be a great help for UX designers to get more data about the website visitors, so they could understand how the user’s behavior is impacted by graphic elements like color, contrast, and placement. 

 Using the data from a heat map will make website designer / UX designer can redesign the website so it would be more engaging to the visitors and increasing the conversion

  • A/B Testing

Almost every advertiser is doing A/B testing. Using heat maps gives you useful insights since it gives you the data about exactly your visitor differently on different versions of your landing page, blog posts, or even your homepage. 

When you’re doing testing like moving the CTA button, changing the copy, or altering the images, you can see the page’s conversion rate and understand why one page converts better than another

  • Content Marketing

Content marketing is very important to grab your audience’s attention. But the problem is whether your web visitors are reading and engaging with your content? 

By using a heat map you can get the data on far down the page your user scrolls, so you know if they’re reading your content. 

What you can get using a heat map 

Heat map data can give many insights: 

  • Which headlines more engaging to your visitor and make them click
  • Which images attract your visitor attention
  • What distracts your visitor on your page
  • Is your navigation working
  • Whether your visitors are reading your content on how much of it


What is a heat map for AdSense and Analytics?

Heat maps are extremely useful as they show the areas of your website that have the most clicked, how far they scroll down, or the results of eye-tracking tests.  

What is a heat map used for?

The primary purpose is to get a better data visualization at the volume of events within a website and to see which buttons get the most clicks. It is great data to use for split tests, website redesigns, and organizing content. 

How do heat maps work?

Heat map works by collecting data from a web page showing you which part of a page gets the most attention using the color spectrum. They can be customized to a specific page or more general in volume.