Heatmaps¶

Heatmaps is a data visualization tool that uses color gradients to intuitively show user interactions on a webpage, such as clicks and scrolls. This color coding helps frontend engineers quickly identify user-focused elements and areas that may need optimization. For example, high-frequency areas on a click heatmap may indicate a strong user demand for a specific feature, guiding engineers to highlight the interface or enhance the functionality.

At the same time, heatmaps can reveal points of frustration where users struggle to find information or features, 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 Heatmaps¶

1. Go to User Analysis > Session Heatmaps.
2. Select an Application.
3. Determine the page URL, e.g., the current page /rum/heatmapindex.
4. Click Confirm to enter the details page of the successfully created heatmap.

Heatmap Details¶

Click Heatmaps¶

On the heatmap page, TrueWatch defaults to opening the Click Heatmaps type on the right. Under this type, you can view statistical data of different metrics on the current page and the top 100 events by page action count.

Hover over the left heatmap page, click on a color block to directly view the click count and ratio for that area. You can click View More Analysis to open the details page of the action on the right, or copy the action name in that area to directly go to the Action Explorer for search queries. Alternatively, click Open in Action Explorer to view more details of the action.

Statistics¶

Top 100 Actions¶

Based on action events, TrueWatch counts the number of clicks and the ratio for each action, listed from high to low by default.

Two icons appear on the left side of the event:

• : Locate: This action is in the left background image. Clicking scrolls the page to display that hot area.
• : Not Visible: The action hot area is not in the current background image.

Click on an event to enter the action details page. TrueWatch visualizes the action data of the current action event using a time-series distribution chart. It also performs statistical analysis from three dimensions: most popular actions, number of click users, and number of clicks. The last 10 session replays related to this action are displayed together (including time, duration, username, browser, etc.).

To view more details, click the icon on the right side of the event to jump to the Explorer.

Element Analysis¶

Under this type, TrueWatch displays the top 10 clicked elements. When hovering over a row in the list on the right, the heatmap on the left scrolls to the corresponding position.

Click on an event to enter the action details page. For page details, refer to here.

Page Management¶

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

• On the current heatmap, you can view heatmap data across different time spans using the Time Widget.
• At the top of the page, filter by different metric dimensions, including environment, version, service, city, etc. Hover over a filter dimension to click delete, or click More to use a new filter dimension. Use as needed.

• Set the screen width, with four options available. Use 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, then click Confirm.

Switch Heatmaps¶

To view heatmap data for other pages, simply click the dropdown box as shown:

To switch Applications, click the dropdown box. TrueWatch displays the top 5 most popular page views for that application (based on page view counts), then select a page as needed:

When switching applications, if the page cannot find session replay data for generating the heatmap, the heatmap page may not be displayed. 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.

From the page, you can directly go to Application Management or jump to the details page to check if there is session data.

Save Heatmaps¶

You can save the current heatmap page. If you have added filter conditions, they will be saved together. The saved page will be added to the home page for quick access. You can later share, copy the link, delete, or perform other operations on the saved page.

Saved pages are displayed together in the heatmap list:

For a saved heatmap, you can:

Share the current heatmap as a snapshot externally. Steps are the same as snapshots.

The shared heatmap can be viewed at Manage > Share Management > Share 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. TrueWatch automatically captures screenshots from user access session replays as the heatmap background. You can choose from multiple page screenshots.

More Reading¶