Heatmap¶

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

At the same time, heatmaps can reveal potential frustration points where users may encounter difficulties in finding information or functionalities, helping engineers discover and resolve these obstacles to improve 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.

View Heatmap¶

1. Navigate to User Analysis > Session Heatmap;
2. Select an Application;
3. Determine the page address, 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 opens the Click Heatmap type by default on the right side. In this type, you can view statistical data of different metrics on the current page and the top 100 most frequent page actions.

Hover over the left heatmap page, and click on the color blocks to directly view the number of clicks and the percentage in that area. You can click "View More Analysis" to open the details page of the action on the right, or copy the action name to directly search in the Action Explorer; or click to open the action in the Action Explorer for more details.

Statistics¶

Top 100 Actions¶

Based on action events, Guance will count the number of clicks and the percentage for this action, listed from high to low by default.

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

• Locate: Click to scroll the page and display the heat area in the left background image;
• Invisible: The heat area of this action is not in the current background image.

Click on an event to enter the action details page. Guance will visually display the action data of the current event in a time series distribution chart. At the same time, it will conduct statistical analysis from the three dimensions of the most popular actions, the number of users who clicked, and the number of clicks. The last 10 session replays related to this action are also displayed (including time, duration, username, browser, etc.).

To view more detailed information, click the on the right side of the event to jump to the Explorer.

Element Analysis¶

In this type, Guance will display the top 10 elements with the most clicks. When you hover over a row in the right list, the left heatmap will scroll to the corresponding position.

Click on an event to enter the action details page. Page details can be referred to here.

Page Management¶

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

In the current heatmap, you can view heatmap data over different time spans using the Time Widget;

At the top of the page, filter based on different metric dimensions, including environment, version, service, city, etc. Hover over a filter dimension to delete it, or click More to adopt a new filter dimension. Use as needed.

Set the screen width, including four options, use as needed:

• Screen width greater than 1280 px;
• Screen width between 768px and 1280 px;
• Screen width less than 768px;
• Custom screen width, fill in min and max values, and click Confirm.

Switch Heatmap¶

To view heatmap data for other pages, simply click the drop-down box in the illustration:

To switch Applications, click the drop-down box, Guance will display the 5 most popular page views for this application (based on page access evaluation), then select a page as needed:

When switching applications, the page may not be found for generating heatmap session replay data, so the heatmap page cannot be displayed for you. You can try the following methods:

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

On the page, you can directly go to application management or jump to the details page to check if there is session data.

Save Heatmap¶

You can save the current heatmap page, and any filter conditions added will be saved synchronously. The saved page will be added to the homepage for quick querying. Later, you can share, copy the link, or delete the saved page.

The saved pages are displayed uniformly in the heatmap list:

For saved heatmaps, you can:

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

The shared heatmap can be viewed in Management > Share 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 Change Page Screenshot, Guance will automatically capture a screenshot from the user access session replay as the heatmap background, and you can choose from multiple page screenshots.

Further Reading¶