Heatmap¶

A heatmap is a data visualization tool that intuitively displays user interactions on web pages, such as clicks and scrolls, using color gradients. This color coding helps front-end engineers quickly identify elements of interest to users and areas that may need optimization. For example, high-frequency regions on the heatmap might indicate a strong demand for specific features, guiding engineers to highlight or enhance these features.

At the same time, heatmaps can reveal frustration points users encounter while searching for information or functionality, helping engineers discover and resolve these obstacles, thereby improving the usability and satisfaction of the user interface. Heatmaps provide direct feedback based on user behavior, enabling engineers to make more precise design decisions and optimize the user experience.

Viewing Heatmaps¶

1. Navigate to User Analysis > Session Heatmap;
2. Select Application;
3. Confirm the page URL, such as the current page /rum/heatmapindex;
4. Click confirm to enter the details page of the successfully created heatmap.

Heatmap Details¶

Click Heatmap¶

On the heatmap page, Guance defaults to opening the Click Heatmap type on the right side. Under this type, you can view statistics for different metrics on the current page and the top 100 events by page operation count.

Hover over the left heatmap page, click on a color block to directly view the number of clicks and percentage in that area. You can click to see more analysis and open the detailed page of the action on the right, or copy the action name to search in the Action Explorer; or directly open the action in the Action Explorer to view more details.

Statistics¶

Top 100 Operations¶

Based on operational events, Guance will tally the number of clicks and percentages for each operation, defaulting to a descending order.

On the left side of an event, two icons will appear:

• ：Positioning: Clicking this icon will scroll the page to display the corresponding hot zone in the background image;
• ：Invisible: This indicates that the operation's hot zone is not within the current background image.

Clicking on an event will take you to the operation details page. Guance will visualize the operation data for the current event using a time series distribution chart. It also provides statistical analysis from three dimensions: most popular operations, number of clicking users, and click counts. The last 10 related session replays are displayed (including time, duration, username, browser, etc.).

To view more detailed information, click the icon on the right side of the event to navigate to the explorer.

Element Analysis¶

Under this type, Guance will display the top 10 elements by click count. When hovering over a row in the right-side list, the left heatmap will highlight the corresponding position.

Clicking on an event will take you to the operation details page. Refer to here for page details.

Page Management¶

In addition to the different page displays under the two main types of heatmaps, you can manage the heatmap detail page with the following operations:

On the current heatmap, you can use the Time Widget to view heatmap data across different time spans;

At the top of the page, filter based on different metric dimensions including environment, version, service, city, etc. Hovering over a filter dimension allows you to delete it or add new filtering criteria by clicking More. Use as needed.

Set screen width, with four options available:

• Screen width greater than 1280 px;
• Screen width between 768px and 1280 px;
• Screen width less than 768px;
• Custom screen width, enter min and max values, then click confirm.

Switch Heatmap¶

To view heatmap data for other pages, simply click the dropdown box below the chart:

To switch Applications, click the dropdown box. Guance will display the top 5 most visited page views (based on page visit frequency), then select a page as needed:

When switching applications, if the session replay data required to generate the heatmap cannot be found, the heatmap page may not be displayed. You can try the following solutions:

1. Check if the heatmap code snippet has been added to the RUM SDK;
2. Verify that user visits and session replay data for your application are being collected correctly;
3. Adjust the filtering conditions to expand the query time range.

You can directly navigate to application management or jump to the page to check if there is any session data.

Save Heatmap¶

You can save the current heatmap page, and any applied filters will be saved as well. Saved pages will be added to the homepage for quick access, allowing you to share, copy links, or delete them later.

Saved pages are displayed uniformly in the heatmap list:

For saved heatmaps, you can:

Share the current heatmap as a snapshot externally, follow the same steps as for snapshots.

Shared heatmaps can be viewed in Manage > Share Management > Shared Snapshots:

Directly copy the heatmap link

Delete the heatmap

Change Page Screenshot¶

Considering that a page may contain embedded pages and you want to view other heatmaps under the same view_name, you can click to change the page screenshot. Guance will automatically capture screenshots from user session replays as the heatmap background, allowing you to choose among multiple page screenshots.

Further Reading¶