Skip to main content

User Action Hitmap

Note

Feature reorganization notice

The former Page Load Analysis feature has been reorganized into User Action Analysis. Its scope now covers not only page load events but also clicks, touches, and other user interactions, so you can analyze them together.

Home > Select Project > Analysis > User Action Hitmap

A user action event occurs when an end user visiting your web application finishes loading a page or interacts with it by clicking, touching, and so on. These events are provided in a hitmap chart, and the detailed information about each event can be viewed in a timeline. This lets you identify performance problems and the factors that degrade the user experience. The following information is included.

  • Page load events

    • Time details for each page load event section
    • Details of the loaded resources
    • Browser error data
  • Click and touch events

    • Click response time
    • Information about the resources loaded on the click
    • Information about the errors that occurred on the click

Checking the user action event list

You can analyze a single user action event. A hitmap and various metrics are provided to help you analyze user action performance.

user-action-hitmap

  1. Drag the chart area of the User Action Hitmap widget.

  2. The event list for the dragged area appears as the User Action List below the User Action Hitmap, and you can check it by page group in the Page group List on the right of the screen.

    • You can search the page list you want in Page URL of the User Action List.

User Action Hitmap

The User Action Hitmap widget shows the response time of user actions over time as a distribution chart. Drag the chart area of the widget. The User Action List for the dragged area appears at the bottom of the screen.

  • The horizontal axis is the end time of the user action event.

  • The vertical axis is the elapsed time (response time) of the user action event.

  • The density of normal user action events is shown in the order of light bluebluenavy.

  • The density of user action events with errors is shown in the order of yelloworangered. A user action event counts as an error when a browser error occurred while the event was being processed.

Hitmap AI Analysis

Click the AI Analysis button on the option bar to have WhaTap AI read the hitmap distribution and report what it finds. The button shows an icon only; hover over it to see its name in a tooltip. The analysis works differently depending on whether an area is selected.

  • No area selected: WhaTap AI reads the whole hitmap for the queried period and suggests the time ranges and response time ranges to check.

  • Area dragged: WhaTap AI analyzes the events inside the selected area and presents candidate causes of the slowdown. The selected area appears to the left of the button. To clear it, click the X icon on the item.

When you drag an area, the User Action List appears together as before. AI Analysis does not change this behavior.

If the button is disabled, hover over it to see the reason.

MessageDescription
Loading dataThe hitmap query is in progress. The button is enabled once the query finishes.
No data in the selected period.The queried period contains no event. Widen the time range and query again.
Note

For how AI Analysis behaves in common and the data scope it uses, refer to the following document.

User Action List

The user action events in the area you dragged on the User Action Hitmap appear in the User Action List. Click the Detail view icon icon on the far left of each item in the list to open the User Action Analysis detail window.

The User Action List includes the following basic information.

  • Start time: Start time of the user action event

  • Elapsed time: Time taken until the user action event completed

  • Page URL: URL path of the page where the user action occurred

  • Browser: Browser type used by the end user

  • Device: Device type used by the end user

  • OS: OS of the device used by the end user

  • Client IP: IP address of the device used by the end user

Note

WhaTap stores client-related information by default.

Adding and editing column information

You can add other information columns to the table, or hide the columns you added. Click the Column icon Column Settings button at the top right of the User Action List.

Filtering the user action list

You can enter a search term and filter the user action list for matching items. Select the item you want to query, enter a search term, and press Enter or click Search icon.

  • Page URL
  • Browser
  • Device
  • OS
  • Client IP
  • User ID

Filtering the page group list

You can filter the page group list. Select the page group list you want.

Getting a recommended investigation order from the list

Click the AI Analysis button above the User Action List to have WhaTap AI recommend which of the queried events to check first. The sample considers slow items and items with errors together, so you can narrow down candidate causes faster than by sorting the list and scanning from the top.

  1. Drag an area on the hitmap to show the User Action List.

  2. Click the AI Analysis button above the list.

  3. The AI Analysis drawer opens on the right of the screen and shows the recommended items with the reasoning.

  • Click a recommended item to open the User Action Analysis detail window for that event.

  • The recommendation does not change the sort order of the list or the filters you applied.

  • Query string values in URLs and user IDs are masked before being used for the analysis.

If the button is disabled, hover over it to see the reason.

MessageDescription
Loading dataThe list query is in progress. The button is enabled once the query finishes.
No log collected.The dragged area contains no event. Select another area and query again.
Note

For how AI Analysis behaves in common and the data scope it uses, refer to the following document.

User action event details

Click the Detail view icon icon on the left of each item in the User Action List to open the User Action Analysis detail window. The window consists of the event list on the left and the detailed information on the right. Various metrics are provided to help you analyze user action performance and identify what affects it.

Event list

The user action events for the selected time range appear as a list on the right of the User Action Analysis detail window, sorted by elapsed time. Click an event in the list to show its detailed information in the right panel.

event-list

  • Response time: Response time of the user action (ms)

  • Page URL: URL of the page where the user action occurred

  • Browser: Browser type used by the user

  • Device: Device type used by the user

  • OS: OS used by the user

Detailed information

On the left of the User Action Analysis detail window, you can check the detailed information about the selected event on the Overview, User Session Analysis, and Session Replay tabs. The information consists of the following.

details-events

Basic information

  • Page URL: Full URL of the page where the event occurred

  • Page title: Title of the web page

  • User agent: Details of the browser and OS

  • Browser/Version: Browser type and version

  • OS/Version: OS type and version

  • Device: Device type used (desktop, mobile, and so on)

  • City: Access location of the user

  • Session ID: Identifier of the user session

  • Client IP: IP address of the user

  • Effective connection type: Network connection type (3g, 4g, wifi, and so on)

  • Effective bandwidth: Network bandwidth information

  • RTT: Round Trip Time

Time information

You can check the total elapsed time, start time, and end time of the event.

Time taken per section (timeline chart)

For a page load event, you can check the time taken per section visually.

  • Redirect time: Time taken to redirect the page

  • Request waiting time: Time waiting for the server response

  • Download time: Time taken to download resources

  • Time to first byte: Time until the first byte was received

  • Dom Interactive: Point at which the DOM became interactive

  • Dom Content Loaded: Time at which the DOM content was loaded

  • Dom Complete: Time at which the DOM completed

  • OnLoad event time: Time at which the page load completed

  • Caching time: Time taken to look up cached resources

  • DNS lookup: Time taken to look up the domain

  • TCP connection time: Time taken to establish the TCP connection

Overview AI Analysis

Click the AI Analysis button at the top right of the Overview area to have WhaTap AI read the time taken per section and the resource list of the selected event, and report which section drove up the overall response time.

  • The analysis uses only the information already shown on the screen, so no additional query occurs.

  • Only some of the resources are sent, prioritizing the ones that took longest. The number sent is shown together with the total number.

  • If an APM-linked transaction exists, whether it is linked is also taken into account.

  • If you select another event in the list, the analysis result for the previous event is cleared.

Note

For how AI Analysis behaves in common and the data scope it uses, refer to the following document.

Resource list

The detailed information about the resources loaded while the event was processed is provided. Each resource appears in a timeline so that you can see the loading order and the time taken at a glance.

  • Name: File name or URL of the resource

  • Elapsed time: Loading time of each resource

resource-list

Resource details

Click a resource in the resource list to see its detailed information in a tooltip. The resource details let you pinpoint performance bottlenecks and identify the resources that need optimization.

  • Resource timing information

    • Caching time: Time taken to look up cached resources

    • DNS lookup: Time taken to look up the domain

    • Connection time: Time taken to establish the connection to the server

    • Request waiting time: Time waiting for the server response (TTFB)

    • Download time: Time taken to download the resource

    • Elapsed time: Total time taken to load the resource

  • Resource information

    • Type: Resource type (css, js, image, and so on)

    • Size: File size of the resource

    • Delivery Type: Delivery method (cache load, and so on)

Checking the browser errors

A page load event that contains browser error data appears in red. You can see the steps in which errors occurred in Resource List.

check-browser-error

User session analysis

Based on the user session, you can see the events and errors that occur while interacting with the website in chronological order. For more information about User session analysis, see the following.

Session replay

It provides the feature to record and replay all events that users perform on the website. The Session replay feature allows you to reproduce user behaviors such as clicking, scrolling, typing, and page switching. This helps you understand exactly how users actually interact with the website.

Note
  • For information about application of the Session replay feature by using agent options, see the following.

  • For more information about using the Session replay feature, see the following.