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 functionalities, guiding engineers to highlight interfaces or enhance features.

Simultaneously, heatmaps can reveal frustration points users may encounter while searching for 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 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, TrueWatch opens the Click Heatmap type on the right by default. Under this type, you can view statistical data for different metrics on the current page and the top 100 events by number of page operations.

Hover over the heatmap on the left, and click on a color block to directly view the number of clicks and its proportion in that area. You can click "View More Analysis" to open the details page for the operation on the right. You can also copy the operation name from this area to use in a search query in the Action Explorer, or directly click "Open in Action Explorer" to view more details for that operation.

Statistics¶

Top 100 Operations¶

Based on operation events, TrueWatch statistics the click count and proportion for each operation, listed from high to low by default.

Two types of icons appear to the left of the event:

• : Locate: Clicking this icon scrolls the page in the left background image to show the corresponding heat area.
• : Invisible: The operation heat area is not in the current background image.

Clicking on an event takes you to its operation details page. TrueWatch visualizes the operation data for the current event with a time series distribution chart. It also provides statistical analysis from three dimensions: most popular operations, number of clicking users, and number of clicks. The latest 10 session replays related to this operation are also displayed (including information like time, duration, username, browser, etc.).

To view more detailed information, 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 elements by click count. When you hover over a row in the list on the right, the heatmap on the left will scroll to the corresponding position.

Clicking on an event takes you to its operation details page. Page details can be referenced here.

Page Management¶

In addition to the different page displays under the two main heatmap types above, you can manage the heatmap details page through 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. Hover over a filter dimension to delete it, or click More to add new filter dimensions. Use as needed.

• Set the screen width, includes 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. Enter min and max values and click Confirm.

Switch Heatmap¶

To view heatmap data for other pages, simply click the dropdown shown in the figure:

To switch Applications, click the dropdown. TrueWatch will display the 5 most popular page views for that application (evaluated based on page access frequency). Then select the desired page:

When switching applications, the heatmap page might not be displayed if no session replay data is found for generating the heatmap. You can try the following: 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 for session data.

Save Heatmap¶

You can save the current heatmap page. Any applied filters will be saved simultaneously. The saved page will be added to the homepage for quick access. Later, you can perform operations like sharing, copying the link, or deleting the saved page.

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 for snapshots.

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

Copy the heatmap link directly.

Delete the heatmap.

Change Page Screenshot¶

Considering that a page might contain other embedded pages, and you might want to view other heatmaps under the same view_name, you can click "Change Page Screenshot". TrueWatch will automatically capture screen shots from user session replays to use as the heatmap background. You can choose from multiple page screenshots.

Further Reading¶