Heatmap¶

A heatmap is a data visualization tool that intuitively displays user interactions on a webpage, such as clicks and scrolling, through color gradients. This color coding helps frontend engineers quickly identify elements users focus on and areas that may need optimization. For example, high-frequency areas on the click heatmap may indicate a strong user demand for a specific feature, guiding engineers to highlight the interface or enhance the function.

At the same time, heatmaps can reveal frustration points users may encounter while searching for information or features, helping engineers discover and resolve these obstacles, improving the usability and satisfaction of the user interface. Heatmaps provide engineers with direct feedback based on user behavior, enabling them 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 address, such as the current page /rum/heatmapindex;
4. Click confirm, and you will be directed to 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, clicking on a color block allows you to directly view the number of clicks and its percentage in that area. You can open the details page of the right-side operations by clicking to view more analysis, or copy the operation name of that area directly to search in the Action Explorer; or directly open the operation in the Action Explorer to view more details.

Statistics¶

Top 100 Operations¶

Based on operation events, Guance will tally the number of clicks and percentages for these operations, defaulting to listing from highest to lowest.

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

• ：Position: Indicates that clicking on this operation scrolls the page to display the corresponding hotspot on the left background image;
• ：Invisible: This operation's hotspot is not within the current background image.

Clicking on an event will take you to the operation detail page. Guance will visualize the operation data for the current operation event in a time-series distribution chart. It also analyzes statistics from three dimensions: the most popular operations, the number of clicking users, and the number of clicks. The last 10 session replays related to this operation are displayed together (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 Viewer.

Element Analysis¶

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

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

Page Management¶

Besides the different page displays under the two main types of heatmaps mentioned above, you can manage the heatmap detail page via 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 by clicking, or you can click More to adopt new filter dimensions as needed.

Set screen width, with four options available as needed:

• 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, and click confirm.

Switch Heatmap¶

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

To switch Applications, click the dropdown box, Guance will display the top 5 most popular page views of that application (based on page visit counts), then select a page as needed:

When switching applications, if the page cannot find session replay data used to generate the heatmap, the heatmap page will not be displayed. You can try the following methods:

1. Check if the heatmap code snippet has been added to the RUM SDK;
2. Verify whether your application's user visits and session replay data are being collected normally;
3. Adjust the filter conditions and expand the query time range.

You can directly navigate to application management or jump to the details 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 synchronously. Saved pages will be added to the homepage for quick access, allowing you to perform actions such as sharing, copying links, or deleting the saved page later.

Saved pages will be uniformly displayed in the heatmap list:

For already saved heatmaps, you can:

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

Shared heatmaps can be viewed in Management > Sharing Management > Shared Snapshots:

Directly copy the heatmap link

Delete the heatmap

Change Page Screenshot¶

Considering that a page may contain other 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 visit session replays as heatmap backgrounds, allowing you to choose among multiple page screenshots.

Further Reading¶