Heatmap¶

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

At the same time, heatmaps can reveal the friction points users may encounter when looking for information or features, helping engineers identify 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 a Heatmap¶

1. Go to User Analysis > Session Heatmap;
2. Select a workspace scope. The current workspace is selected by default, and you can also select multiple authorized workspaces on the same site;
3. Select an application from the candidate list; the application options also show the source workspace;
4. Specify the page URL, such as the current page /rum/heatmapindex;
5. Click OK to enter the heatmap details page.

A heatmap analyzes only one application at a time. Pages, actions, filter candidate values, and background replay all come from the source workspace of the selected application; other selected workspaces only provide application candidates and do not participate in the statistics of the current heatmap. Applications with the same name or the same application ID across workspaces are selected separately, and their heatmaps are not merged.

After switching workspaces or applications, the system re-queries according to the new effective application. If no application is available, heatmap analysis is not initiated. For authorization and read-only conditions, see Cross-Workspace Queries.

Heatmap Details¶

Click Heatmap¶

On the heatmap page, TrueWatch opens the Click Heatmap type on the right by default. Under this type, you can view statistics for different metrics of the current page and events for page actions ranked in the Top 100 by count.

Hover over the left heatmap page and click a color block to directly view the click count and percentage for that area. You can click View More Analysis to open the details page of the right-side action. You can also copy the action name in that area and go directly to the Action Explorer to use it as a search query, or click to open the action in the Action Explorer for more details.

Statistics¶

Top 100 Actions¶

Based on action events, TrueWatch calculates the click count and percentage for each action, listed from high to low by default.

Two icons may appear to the left of an event:

• : Locate: the action is in the left background image; clicking it scrolls the page to display that hotspot;
• : Not visible: the hotspot for this action is not in the current background image.

Click an event to enter the action details page. TrueWatch visualizes the action data of the current action event as a time series distribution chart. It also performs statistical analysis across three dimensions: most popular actions, number of users who clicked, and click count. The 10 most recent session replays related to this action are also displayed (including time, duration, username, browser, and other information).

To view more details, click on the right side of the event to open it in the Explorer.

Element Analysis¶

Under this type, TrueWatch displays the Top 10 elements by click count. When you hover over a row in the right-side list, the left-side heatmap scrolls to the corresponding position.

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

Page Management¶

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

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

• At the top of the page, filter by different metric dimensions, including environment, version, service, city, and more. Hover over a filter dimension to delete it, or click More to apply a new filter dimension. Choose as needed.

• Set the screen width with four options. Choose as needed:

• Screen width greater than 1280 px;

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

Switch Heatmap¶

To view heatmap data for other pages, click the dropdown shown below:

To switch applications, click the dropdown. TrueWatch displays the 5 most popular page views for the application (evaluated based on page visit counts), then select the desired page:

After switching applications or pages, if the heatmap background of the current View fails to generate, the system tries other candidate Views that match the current analysis conditions. If the heatmap still cannot be displayed after automatic attempts, troubleshoot as follows:

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

On the page, you can go directly to application management, or jump to the details page to check whether session data exists.

Save Heatmap¶

The save operation applies only when the current logged-in workspace is selected. In cross-workspace read-only mode, snapshot creation, editing, and deletion are not available. To save, go to the workspace to which the application belongs and select only the current workspace.

You can save the current heatmap page. If filter conditions have been added, they are saved along with it. The saved page is added to the homepage for quick access. You can subsequently share, copy the link, or delete the saved page.

Saved pages are displayed together in the heatmap list:

For cross-workspace pages, the snapshot list still reads from the currently logged-in workspace and does not merge snapshots from other workspaces. When restoring a snapshot, the query workspace scope and the source information of the selected application are restored as well; if the application source cannot be determined, you need to select the application again.

For saved heatmaps, you can:

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

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

Copy the heatmap link directly

Delete the heatmap

Change Page Screenshot¶

Because a page may contain other embedded pages, and you may want to view other heatmaps under the same view_name, you can click Change Page Screenshot. TrueWatch automatically captures screenshots from user session replays as the heatmap background, and you can select from multiple page screenshots.

When background generation for the current View fails, the system automatically tries other candidate Views that match the current analysis page and filter conditions. After a screenshot is successfully obtained, it is used to display the heatmap, and the current analysis conditions remain unchanged. You can still manually select other available screenshots by clicking "Change Page Screenshot".

For cross-workspace queries, candidate Views are limited to the currently selected application and its source workspace. Screenshots from other applications are not used as the background.

If no candidate is available, or all automatic attempts fail, the page stops loading and reports an error. You can retry as prompted on the page, or manually switch screenshots.

Further Reading¶