Heatmaps

Heatmaps identify user experiences, such as frustration indicators and the length of time users focus on particular areas on a page or screen. Depending on the heatmap type selected, you can view visual representations of different user experiences, such as interactions and Behaviors.

Heatmaps overlay color-coded markers on a background page from your property using a cool-to-warm color spectrum. Warmer colors indicate areas with high user engagement or behavior scores, while colder colors indicate areas with low user engagement or behavior scores.

Note: Heatmaps can only be viewed using using Google Chrome and Mozilla Firefox. DXA recommends using the DXA browser extension with either browser for for optimal performance.

Viewing heatmaps

On the navigation bar, go to Analyze > Heatmaps > Analyze. Analyze Heatmaps

You can change the type of heatmap you want to view by clicking the Heatmap type button, followed by the heatmap of your choice, and then clicking Generate heatmap. The heatmap will then begin to load, and this will be displayed to the user in a progress bar.

When viewing heatmaps with our DXA browser extension installed in Google Chrome or Mozilla Firefox, all of our heatmaps are live, meaning they show the website as it currently is, while also allowing the user to navigate the website from within DXA. Just like you would on a live site, you can click links to go to different pages, and the heatmap will update accordingly to the page that you are viewing. You can view previous versions of the page using the Background Type dropdown menu.You can refresh the data on display within heatmaps at any time by clicking the Update View button in the top-right corner below the Export drop-down menu.

Note: To change the selected date range, on the top-left of the screen, click the date range dropdown menu. By default, this is set to Last 7 full days (excluding today).

You can refresh the data on display within heatmaps at any time by clicking the Update View button in the top-right corner below Export.

Heatmap toolbar

The heatmap toolbar is available above any heatmap.

Note: The heatmap toolbar is not available for DXA for Mobile.

The following settings are available on the heatmap toolbar:


Setting	Description
Property dropdown menu	To select a property, click the dropdown menu.
URL text box	To go to a specific page on the property, enter a URL path and click Go.
? Include Query	To register any query parameters included the URL path entered in the text box, click ? Include Query.
# Include Fragment	To register any fragment parameters entered included in the URL path entered in the text box, click # Include Fragment.
Go	To refresh the heatmap, click Go.
Background type	Select the background type to overlay the heatmap on. The following background types are available: Live Website — Overlays the heatmap on the page as it currently is in real time. Smart Selection — Overlays the heatmap on a version of the page from a session replay within the selected date range. This background type is useful for split testing. Manual Selection — Overlays the heatmap on the page from a specific session. Browser Tab — Overlays the heatmap on a page from one of your browser tabs. This heatmap type is useful for pages with masked details.
Comparison mode	Comparison mode displays two heatmaps side by side allowing you to compare the same page with different parameters.
Boundary mode	Boundary mode allows you to target specific areas on the page to view details, such as number of clicks.
Open in a new window	Click this button to open the heatmap in a new window.
Pause heatmap generation	Click this button to pause a heatmap with Live Website background type while generating in real time.