See What's Hot and What's Not!
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.
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:
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:
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:
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:
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.
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:
If you want to create a new heatmap, you can do so by pressing this button.
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.
There are actions that can be taken for each particular heatmap. Clicking on the Settings icon of each tile will allow you to:
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.
Each time you create a new map, a new tile will appear in your overview. Each tile gives you basic information about the heatmap:
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:
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.
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:
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.