Skip to main content

Visitor Heatmaps

See what is hot and what is not

Watch this Video to Learn How to Use Heatmaps

What it is all about

The Visitor Heatmaps feature enables you to see which areas of your website your users interact with the most. It uses colors to display the frequency of a certain action on a page. You see the exact spots that get the most clicks (for desktops), taps (for mobiles and tablets), which are the areas where the mouse is moved on screen, as well as what the average scroll rate is for a page. While the visitor recordings feature focuses on viewing a single user session, heatmaps are based on up to 8000 views of one page.

 

  1. Two Options of Heatmap Creation
  2. Overview of Heatmaps & Main Tile Structure
  3. Detail View of a Heatmap
    1. Overview
    2. Global Visitors Map
    3. Desktop Heatmap
    4. Tablet Heatmap
    5. Mobile Heatmap

Some general hints

  • A lot of elements contain options to hover information or further actions. Just let your cursor run over various elements and discover how much data is actually packed into a tile.
  • Almost all views and some single elements have a little "i-icon" in the upper right corner, giving you even more information about the view/element. Just move your cursor there and you will see more information.

Two options for creating a heatmap

Within Visitor Analytics you have two options of creating heatmaps:

A. Create a heatmap for a single page (i.e. homepage)

This is the default option you can use to analyze user behavior on single pages. 

Choose a name for your heatmap and select the amount of maximum pageviews to record. You can use up to 8,000 pageviews to generate one map. You will be able to see the resulting color-coded graphics overlaid on a screenshot of the page you want to analyze. As the page gets more and more pageviews, your heatmap will evolve to include data from all these pageviews and it will stop once it reaches the amount you selected in this step. 

The final step is to select a page you want to follow in the dropdown and click on “create heatmap”.
 

B. Create a heatmap for similar/dynamic pages (i.e. product pages)

If you have similarly looking pages, as e.g. product pages, that always follow the same structure but have different texts or images used, it makes sense to create a heatmap which combines all of these views. 
This option is especially useful if you have an e-commerce website that uses the same template for several product pages. Most likely, visitor behavior on these pages will be similar, in terms of attention distribution. If you select this scenario, you will be able to create an aggregated map for all of these pages in one. Moving forward, you have another two ways to create a heat map with this option:
 

B.1 Select a dynamic page

If you are not new to Visitor Analytics, you may have used the dynamic page option before. It allows you to cluster pages that have the same URL path up to a certain point, and get aggregated stats for that cluster. For example if you want to track the aggregated data for all of your product pages, you could have a dynamic page structured like: https:// yourdomain.com/shop/product/*/

B.2 Define a new URL pattern

If you want to specify a URL pattern for a number of similar pages, you have various options available for it. First click on the dropdown “Choose URL matching type”. The following options will appear:

  • Simple Match: this match is used to follow a single page. The targeting model includes all elements of the page URL, such as fragments or query strings, protocol or the addition of “www”.
  • Exact Match: sometimes, the same page can be displayed at more than one URL. This targeting focuses on a specific URL with its protocol. The URL can also contain a fragment or query string.
  • Starts with: heat map data will follow the visits on URLs that start with the value you entered.
  • Ends with: heat map data will follow the visits on URLs that end with the value you entered.
  • Contains: heat map data will follow the visits on URLs that contain the value you entered.

Important hint: Further information about each of the URL patterns, can be found here.

Important hints: 

  • Please note that it may take some minutes/hours to gather enough information to create a heatmap from your visits - it all depends on your website’s traffic. 
  • Your website heatmap can only use data collected after you set everything up and your first visitor lands on the page. It cannot be generated retroactively, based on visits acquired before the initial setup. 
  • The screenshot over which the color-coded data is displayed, will reflect the status of the page from the moment of the first visit. If you make changes to the page design after this first visit, you will have a mismatch in the representation of the data. We recommend you reset the heatmap after you make significant changes to the page.
     

Overview of Heatmaps & Main Tile Structure

General Structure of view

The main overview is the core of the module. It gives an overview of all created heatmaps as tiles for the website you are moving in and mostly consists of the following elements:

1) Searchbar

Use this field to search for a heatmap, either by name or by the URL (or parts of it) of the page that is being monitored. 

2) Pause heatmaps 

Everytime you create a new map, you will have to define the amount of visits that you want to be reflected/that you want to be recorded in it. Remember that the graphics are based on the sum of all data collected for a certain amount of visits. If you want to pause gathering new data and just check the status quo, you can do this by simply activating this marked button.

3) Plan & number of heatmaps created 

Here you see which package of Visitor Analytics you are currently using and the amount of heat maps that you have already created. There are different limits set, depending on the plan you have signed up for..

4) + Create heatmap

If you want to create a new heatmap, you can do so by pressing this button.

5) Status of heatmaps overview

There are two statuses for a heatmap in Visitor Analytics. All detailed views can be accessed at any time.


Active: A heatmap which is currently gathering further data until the set limit.
Paused: A map for which the gathering of further data has been paused or the set visits limit was reached. 
All: The sum of maps with active and paused statuses.

6) Actions and Mass actions for heatmaps

If you move your cursor across the tiles, you will see a dot in the upper left corner of each heatmap tile appear, making it possible to select it. Also a green bar above all tiles will appear giving you actions to choose for the selected heatmap(s). You can also easily select all of them in your overview, by clicking on the action “select all”.

In the mass actions dropdown, you can choose between the following actions:

  • “Pause recordings”: The gathering of data for the selected heatmap(s) will be paused (can be continued at any point in time).
  • “Start recordings”: The gathering of data is started again until the individually set visits limit have been reached.
  • “Reset & update heatmap(s)”: If you have updated the design/UI of your website or a specific page recently and you want your heatmaps to show your newest page design, you can reset the heatmap data completely for an existing heatmap. 

    Please note however, that this action will update all changes in your page’s layout shown in the selected heatmap(s) AND also reset all of the user action data recorded so far. After that your visitor’s actions will be recorded from scratch again, thus creating an entirely new map for your new UI. Of course, if you want to keep your current heatmaps and all of the collected data, you can simply pause it and create a new one with the same URLs or download them as a .csv-file and reset the data afterwards. 
     
  • “Delete heatmap(s)”: The selected heatmap(s) will be deleted forever. This action can not be reversed.

7) Tiles of a specific heatmap

Each time you create a new map, a new tile will appear in your overview. Each tile gives you basic information about the heatmap:

  • Name: In the top part of each tile you will find the name, as you have set it while creating it.
  • URL: The url that is the base for gathering data for the heatmap.
  • Status: Whether the heatmap is paused and not collecting data or active and collecting data
  • Heatmap for: This line summarizes the rules which you set while creating a heatmap. So whether you created it for a certain page, a dynamic URL or based on a URL rule like “URL contains XY”.
  • Created at / by: The date and time when the heatmap was created and by which account member.
  • Pageviews: The amount of pageviews which have already been recorded out of the limit which was set as a maximum during the initial setup..

8) Detail view of a heatmap access 

If you want to access the detail view of a heatmap and get a deep insight, you need to click this button.
 

Detail View of a Heatmap

Overview

As soon as you enter the detail page, there are many different views and information, that you can extract. In general there are 4 different types of heatmaps for desktop, tablets and mobile devices:

Click: Only available on desktop devices. Shows where visitors click with the cursor on desktop devices. 
Movement: Only available on desktop devices. Shows where visitors move their mouse on the screen. 
Tap: Only available on mobile and tablet devices. Shows where visitors tap with their fingers.
Scroll: Available for all devices. Shows until what positions visitors scroll on average on a page of your website. 

Important hints: 

  • The options will only appear, once you have selected a main device category first.
  • On the right side of each view containing a heatmap, you will be shown a color scale implying the representation of each coloring in terms of engagement (i.e. if an area is marked with a dark red colour, it means that at this point a lot of interaction happened or typically for a scrolling heatmap, the lower part of a page is way bluer/cooler than the upper part, meaning that way less people scroll to the end. So keep your important content at the top of a page).
     

General Structure of a Detail View

  1. Global overview, showing you where all the visits came from that were recorded for this heatmap. Just some useful information that will help you have a full picture.
  2. See a heatmap based on all page views (including the amount) done with a desktop device.
  3. See a heatmap based on all page views (including the amount) done with a tablet device.
  4. See a heatmap based on all page views (including the amount) done with a mobile device.
  5. “View data”: this button will open a list of all the elements that were clicked within a page. You may need more advanced technical knowledge in order to fully understand it and use it. An “element” is just a html node with a unique identifier. So, for example, a specific button on the page will have a corresponding ID in this list. Some elements (e.g. pop-ups) might be displayed here, but not on the graphical representation, because they are not visible by default. This is what the column “visible” refers to. 
  6. “Download heatmap”: This button downloads the selected heatmap as a PDF.
  7. “Coloured scale”: This coloured scale shows you the level of interaction done by visitors (clicks, views, taps, etc.)
  8. “Reset & update heatmap”: For further information on this, please click here.

Global page view map

This view gives you a nice overview of where all the visits that have been recorded for the selected heatmap have been coming from. You can visually emphasize the top 5 countries by clicking on the green link in the upper left corner of the map. If you want to zoom in, you can do so by clicking on the button “Zoom in” in the upper middle part of the map.

Everytime you hover a country with your cursor, it will show you the amount of visits that were recorded from this country. Grey coloured countries mean that no visit from this country contributed to this specific graphical representation. In the right part of the view, you see a coloured bar, showing you how the country colouring changes from low to high engagement.

Important hint: Of course, you may have received visits from other countries in the period that you were recording visits. But those visits did not happen on the pages that you selected for this specific heatmap.

Desktop Heatmap

This will show you the points of interaction on a certain page of your website (the one you selected for this specific heatmap) recorded for all visits done using a desktop device. 

As soon as you have selected the button, 3 further options will appear on the right. You can now “sub-differentiate” between click, move and scroll-heatmaps for a desktop device. For a definition of each of them please read here. Use this information to optimize your content, re-arrange elements so that your visitors interact with the points you want them to interact with.
 

Tablet Heatmap

This gives you an overview of all points of interaction on a certain page, recorded for all visits done using a tablet device.  

As soon as you have selected the button, 2 further options will appear on the right. You can now “sub-differentiate” between tap- and scroll-heatmaps for a tablet device. For a definition of each of them please read here. Use this information to optimize your content, re-arrange elements so that your visitors interact with the points you want them to interact with.
 

Mobile heatmap

This one provides you with all points of interaction on a certain page recorded for all visits done using a mobile device.  

As soon as you have selected the button, 2 further options will appear on the right. You can now “sub-differentiate” between tap- and scroll-heatmaps for a mobile device. For a definition of each of them please read here. Use this information to optimize your content, re-arrange elements so that your visitors interact with the points you want them to interact with.