How do I use Heatmaps in Session Recording analysis?

In this help, we'll discuss how to use Heatmaps to:

• Create heatmaps
• Draw heatmaps
• Retake heatmap snapshots

Create heatmaps 

In Heatmaps, you can see the intensity of interactions on snapshots of your pages. Heat is a spectrum of color. Red means high heat, lot of interactions. Blue means low heat, fewer interations. In heatmaps, you can see which parts of the page were clicked/tapped the most, which parts users moved their cursor over the most or how people drop off as you scroll further down the page. To draw heatmap images, you first need to set up which pages you want to make heatmaps of.

To do create a heatmap, click Create heatmap (or Create if you already have one or more existing ones)

You can give your heatmap a name and a description. The name is what it will be listed under, so pick something easy to recognize from other heatmaps.

There are multiple ways how to match the URLs that are to be included in the heatmap. Matching more than one exact URL will allow you to create collective heatmaps from pages that use the same template (e.g. pages of various products in e-commerce). We'll explain these mothods in the following URL:

https://www.example.com/path/?product=x#description

• Simple URL match (the default option) matches the hostname and path of the URL. HTTP/HTTPS protocols are considered interchangeable, "www" in hostname is optional.
  E.g.: http://example.com/path matches https://www.example.com/path/?product=x#description
• Exact URL match only matches the exact URL.
  E.g.: https://www.example.com/path/?product=x#description matches https://www.example.com/path/?product=x#description
• URL starts with matches URLs that start with a specified string.
  E.g.: https://www.example.com/path/?product matches https://www.example.com/path/?product=x#description
• URL ends with matches URLs that end with a specified string.
  E.g.: #description matches https://www.example.com/path/?product=x#description
• URL contains matches URLs that contain a specified string.
  E.g.: product=x matches https://www.example.com/path/?product=x#description
• URL regular expression allows you to define a regular expression to match URLs with.
  E.g.: https://.*/path/.* matches https://www.example.com/path/?product=x#description

After defining the URL of your page (or pages), click Create.

Once you've created at least one heatmap, a dropdown list will appear at the top. Click the list or use the arrows on its sides to swap between your heatmaps.

Click the split button dropdown next to the Create button for more actions with the currently selected heatmap.

• Edit - change anything about the heatmap.
• Clone - make a copy of the heatmap.
• Delete - remove the heatmap.

Draw heatmaps 

Once you've switched into a heatmap, that heatmap will be drawn automatically. A heatmap will be calculated from the last 10000 recorded pageviews. The snapshot of the page is taken from the last recorded pageview, at the moment when the page was loaded.

You have multiple options for how you want to draw your heatmap.

Date range - Select pageviews from a specific time period.

• Today
• Yesterday
• Last 3 days
• Last 7 days
• Last 30 days
• Custom - Select a beginning and ending date manually

Device type - Pageviews are sorted into three categories depending on the type of device. The number in parentheses is how many pageviews there in the selected date range (hit Reload analysis data in the upper right corner to refresh this information).

• Desktop
• Tablet
• Smartphone

Device screen - There are two approaches to how different viewport widths are handled by heatmaps.

• Combine all - The heatmap combines data from all viewport widths. This option is only available for Click and Scroll maps (since movement behavior is more dependent on viewport size than clicks and scrolling are). The width of a combine-all-wiewports heatmap depends on the type of device:
  • Desktop - 1280px
  • Tablet - 800px
  • Smartphone - 380px
• Specific width - For extra accuracy, you can choose any viewport width that has been observed in recorded pageviews. Only pageviews with this viewport width will be used to render the heatmap.

Heatmap type - There are three types of interactions that a heatmap can portray.

• Click (desktop)/Tap (tablet, smartphone) - Shows where on the page the visitors clicked/tapped most. If the heatmap combines multiple viewport sizes, affecting the page layout, the clicks/taps will be placed relative to where the clicked element is shown in the page snapshot.
• Move (desktop only) - Shows which areas were the most cursor-movement intensive.
• Scroll (all devices) - Lets you see the percentage of users who scrolled down to any part of the page.

Heatmaps only show clicks and movements on elements that are visible in the heatmap snapshot. (E.g. clicks in a collapsible menu will not be visible unless that menu is also visible.)

Don't forget to hit Redraw to render a new heatmap that applies the changes that you made.

In Click/Tap heatmaps, you can move your cursor over a clicked element to see the number of clicks and the number of visitors who clicked it. Click the area to add the clicks on this element to the Smartsearch. You can either make it a brand new filter or add it into the current filter.

In Scroll heatmaps, there are lines that show which what section of the page was seen by 75%, 50%, 25% and 0% visitors. You can move your cursor over any part of the page to see the exact percentage of visitors who have viewed it. The heatmap also shows the Average Fold - how much of the page have visitors seen by average without scrolling down.

The split button next to Redraw allows additional actions with the currently displayed heatmap.

• View data - See the data from the heatmap within a table.
• Retake screenshot - See the next section for more details.
• Open source URL - Open the URL of the page in the snapshot in a new tab.
• Download image (PNG) - Download the heatmap you're currently seeing as a .png file.
• Download data (CSV) - Download the heatmap data found in View data as a .csv file

Retake heatmap snapshots 

Sometimes, the snapshot image of a page might not look the way you want it to. One particular example that can break the snapshot is lazy loading. Lazy loading is when the page dynamically loads images as you scroll down.

Retaking the screenshot may fix it. When you click Retake screenshot, UXtweak revisits the page at the current time and makes a new screenshot while automatically scrolling down the page to deal with lazy loading.

Please note that retaking the snapshot only replaces the snapshot under the heatmap. It doesn't affect the heatmap's data.