Create heatmaps
To create a heatmap, you go to “Data sources/Heatmaps & session recordings” and then select “Manage heatmaps” in the sidebar menu.
Click on the button “Create heatmaps”.
You now have some settings to fill in.
Name
Give your heatmap a descriptive name. This name will only be visible to the users of your account, but it will help you to tell your heatmaps apart once you have more than one.
Target page rules
The target page rules determines where you collect data for your heatmaps. When configuring rules for your heatmap, remember that all rules operate with "AND" logic. This means:
- Each rule is a condition that must be met for a sample to be recorded.
- If you set multiple rules, only data that meets all these rules will be included.
First, you choose between URL, path, and URL parameter.
Then define the rule. Again, there are several options.
“Equals simple” means the URL protocol, search parameters and trailing slash will be ignored. This is the most popular way for tracking certain pages.
“Is exactly” is for when you want to track specific URL paths.
“Contains” can be used when you want to track partial URL paths or a range of options with a similar theme.
“Starts with” is useful for tracking subdomains.
“Matches the expression” is the most advanced option and requires knowledge about regEx.
Lastly, write the URL etc that you want for your rule.
Excluded elements
There may be elements on the page for the heatmap that you don’t wish to include in the heatmap. You can define CSS selectors to exclude the elements you want to mask from the heatmap preview (screenshot). Please note you cannot use this to exclude personal data, as the data will still be collected. It will just not be shown in the heatmap.
Sample rate and breakpoints
The heatmap collects data continuously, but you can select how quickly you want it to collect data. If you select a sample rate of 10%, you will collect every tenth visit. If you have analytics data, it's helpful to check how many visits the page usually gets before deciding on the sample rate.
As the heatmaps are divided based on device, you can also select the breakpoints for mobile and tablet.
Personal information warning
Lastly, don’t forget to make sure that no personal information is included in the heatmaps. There is a link in the settings, or you can read more here.
After you have saved your heatmap, the heatmap will start to collect samples. Repeat the process for all other heatmaps you want.
Although the heatmap is collecting data, there is one more setting left before you can view the heatmap.
Capture screenshot
To view the heatmap, you will need to capture a screenshot. However, the screenshot is not needed to collect samples, and the samples collected before the screenshot was taken will still be used. So you don't need to hurry with the screenshot.
If you haven't captured a screenshot for your heatmap, you will be asked to do so when you attempt to view the heatmap.
Enter the URL for the screenshot (make sure it's the same as the target page rules for the heatmap) and then click the button to open the page.
As the page is opened in a new tab, you will get a message in the bottom right corner with a "Capture screenshot" button. Make sure there is no personal information on the page, for example profile name in logged in mode, before clicking on the button.
Go back to the heatmap and refresh the page if needed.
If you didn't get the message with the "Capture screenshot" button, it may be that the script requires cookie approval before loading, and that you either haven't accepted cookies or rejected cookies. The easiest solution for rejected cookies is to try again in incognito mode.
Edit heatmaps
After you have created your heatmaps, you are able to edit the settings, which are the same as above. However, don’t change any settings that will affect what data is included.
A setting you can change is the sample rate, for example, if you find that the heatmap is collecting data slower than you’d like it to.
When to replace heatmaps
Although the heatmaps are collecting data continuously, you may need to place some of them occasionally. You do so by manually stopping the heatmap, and then create a new one to replace it.
You should always create a new heatmap if you change the page in such a way that the old screenshot is no longer relevant. Perhaps you moved an element, or changed the menu, or added something to the page. Once the screenshot doesn't match the current page, you should replace the heatmap.
For smaller changes, such as updating the text or changing colours or images, you can keep the same heatmap.
Next, we'll look at how to collect session recordings, but if you are only using heatmaps, you can move on to the tips instead.
