Page Heatmaps

The Page 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 receive the most clicks (for desktops) and taps (for mobiles and tablets); which areas the mouse is moved most frequently across the screen, and what the average scroll rate is for a specific page. While the visitor recordings feature focuses on viewing a single user session, heatmaps are based on up to 8,000 views of one page.

1. Options to Create Heatmaps
2. Overview of Heatmaps & Main Tile Structure
3. Detailed View of a Heatmap
4. Manually Screenshot the Page Behind the Heatmap
5. Global Page View Map
6. Desktop Heatmap
7. Tablet Heatmap
8. Mobile Heatmap

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

Choose a name for your heatmap and a color, then select the desired page from the autogenerated list and the amount of maximum page views to record. You can use up to 8,000 page views 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. 

Important notes:

• You can only select 50 page views when using the free version for the selected website.
• The list of pages is generated based on the pages of your website for which there were visits recorded beforehand. Our app can only know the pages of a website if they were visited at least once.
• If the page you want to select does not appear in the list, just visit that page and reload the app to check if it is there.
• Only the name and the color can be edited after the heatmap has been created, so make sure you create it for the right page. Otherwise the heatmap needs to be deleted and a new one has to be created.

If you have similar 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.

Important Note: If you create a heatmap for your similar/dynamic pages, the screenshot you will see for this heatmap will be made on the first visited page of this defined type. For instance, the screenshot might be taken on the first visited product page, but the color-coded data will be gathered from all pages of this type.

Moving forward, you have another two ways to create a heat map with this option:

If you are not new to the application, 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://www.website.com/shop/product/*/

Important Notes:

• The autogenerated list is based on the Dynamic pages you have already defined within the Page Settings section of your website.
• If you did not create one, you can do it following the instruction here, or choose the next option presented below to define the URL pattern on the spot.

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 “URL Pattern”. The following options will appear:

• Simple URL 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 URL Match: sometimes, the same page can be displayed at more than one URLs. This targeting focuses on a specific URL with its protocol. The URL can also contain a fragment or query string.
• URL Starts With: heat map data will follow the visits on URLs that start with the value you entered.
• URL Contains: heat map data will follow the visits on URLs that contain the value you entered.
• URL Ends With: heat map data will follow the visits on URLs that end with the value you entered.

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

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

1) Feature Counter

Here you see the amount of heatmaps that you have left of your current plan. Hovering the counter will reveal more info about the package you are currently using and a button that allows you to change your plan, in case you need to increase those limits. There are different limits set for each feature, depending on the plan you have signed up for.

2) Status of Heatmaps Overview

There are two statuses for the heatmaps in the application: Active and Inactive.
The main status is Active if there is at least one active heatmap. Clicking again on the status button will deactivate/activate all heatmaps.
For an easier navigation on the page, the heatmaps are also categorised right from the start as:

• All: The sum of maps with active and inactive statuses.
• Active: The heatmaps which are currently gathering further data until the set limit.
• Inactive: The heatmaps for which the gathering of further data has been paused.

3) Create Heatmap Button

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

4) Search Option

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.

5) Actions and Mass Actions for Heatmaps

There are actions that can be taken for each particular heatmap. Clicking on the Settings icon of each tile will allow you to:

• Edit Details: This option allows you to edit the name of the selected heatmap, and the icon color for a better distinction.
• Start Recording: The gathering of data is started again until the individually set visits limit have been reached.
• Pause Recording: The gathering of data for the selected heatmaps will be paused (can be continued at any point in time).
• Reset & Update: 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 heatmaps 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.
• Select Heatmap: You can choose to select the desired heatmaps this way, or simply by clicking on the colored icon of each heatmap.
• Delete: The selected heatmaps will be deleted forever. This action can not be reversed.

If you move your cursor across each heatmap's colored icon, you will see a small dot in the upper left corner, making it possible to select it. Also, after the desired tiles are selected, the mass-action selector will appear right above them, so you can take action for all the selected ones at once. 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 which were described above, this time applied en masse: Start Recording, Pause Recording, Reset & Update, Delete.

6) Parts of a Specific Heatmap Tile - Explained

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

• Colored icon (or heatmap selector): In the top part of each tile you will find an icon which allows you to select the heatmap when hovering it.
• Name: In the top part of each tile you will find the name of the heatmap, as you have set it while creating it.
• Created by: The name of the creator, which can be the Owner of the site or an Editor contributor, which is invited to contribute to the stats of this website, under a different account, and has editing permissions.
• Settings Icon (or heatmap's actions): This is meant for editing the heatmap's details or its status and also for resetting or deleting it.
• Heatmap status & created/edited timestamp + the name of the creator/editor: Displaying the actual status of the heatmap (whether the heatmap is paused and not collecting data or active and collecting data), the date and time of creation and the name of the creator. Furthermore, if there were any changes made to the heatmap, details about the date and time of the last change and the name of the editor are also being shown.
  If you want to pause gathering new data and just check the status quo, you can do this by simply deactivating the heatmap, directly by hovering the current status and clicking on the play/pause button, or from the settings icon of each heatmap.
• Target: 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 pattern like “URL contains XY”.
• URL: The url that is the base for gathering data for the heatmap.
• Pageviews: The amount of pageviews which have already been recorded out of the limit which was set as a maximum during the initial setup.

7) 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 "View Heatmap" button.

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).

• If the screenshot of your heatmap seems not to be the right one after creating it, or if you just changed the design of your page in the meantime and you would like to have that updated in your heatmap as well, you can always re-take the screenshot for the heatmap manually.

1. Overview of the selected heatmap, allows you to see the actual screenshot of the page with its hot spots, select the device and the type of the recorded actions.
2. Show all data, will display a table with the actual data acuired for the selected device and actions type. 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. 
3. Global overview, shows a map with all the countries your visitors are coming from, that were recorded for this heatmap.
4. See a heatmap based on all page views (including the amount) done with a desktop device.
5. See a heatmap based on all page views (including the amount) done with a tablet device.
6. See a heatmap based on all page views (including the amount) done with a mobile device.
7. See a heatmap heating layer based on the visitors actions: Click/Tap, Move, Scroll.
8. Manually Screenshot the page behind the Heatmap: For further information on this, please check the below information.
9. Download heatmap: This button downloads the selected heatmap as a PNG image when being in the Overview mode. When in Show All Data mode, the download icon will save the table of actions as a .csv file.
10. Colored scale: This coloured scale shows you the level of interaction done by visitors (clicks, taps, movement, scroll).

This option allows you to re-take the screenshot of the selected page, manually from your end, just in case there were some elements on it, that were not loaded at the moment the screenshot was taken, or the image is incomplete, due to slower/dynamic loading content (lazy scroll pages), or if the design has simply changed.

You have the possibility to take a screenshot for each of the 3 devices (PC, tablet, phone), depending on your needs. All you have to do is to:

1. Open the heatmap in question
2. Click on the button named "Manually Screenshot the Page behind the Heatmap"
3. Select the device you want to re-take the screenshot for
4. Your page will open in a new window, make sure you scroll down to the bottom of it and that all the content has been loaded on it
5. Click on "Capture New Screenshot"
6. Add the new fresh screenshot to the Heatmap, or re-capture it (if needed)

Important Hint: You'll still have all existing heatmap data of the page after the manual screenshot and you can repeat the process of manually screenshooting the heatmap's background whenever you wish. In case you want to also reset your data, please see the "Actions and Mass actions for heatmaps" section above on the page.

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 amount of visitors from each country within the list on the left side. You can also hover specific areas on the map to discover the number of visitors. If you want to zoom in, you can do so by simply using the scroll or the touchpad.

Grey coloured countries mean that no visit from this country contributed to this specific graphical representation. The country colouring changes from high engagement (as darker color) to low engagement (as lighter color).

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.

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. The example above is for a Movement Heatmap on 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. Use this information to optimize your content, re-arrange elements so that your visitors interact with the points you want them to interact with.
 

This gives you an overview of all points of interaction on a certain page, recorded for all visits done using a tablet device.  The example above is for a Tap Heatmap on a tablet.

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.
 

This one provides you with all points of interaction on a certain page recorded for all visits done using a mobile device.  The example above is for a Scroll Heatmap on a mobile phone.

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.