Skip to content

Track User Actions

Browser Monitoring automatically detects user interactions and provides insight into user behavior without requiring you to manually instrument every click in your application.

You can achieve the following goals:

  • Understand the performance of key interactions (e.g., clicking a button)
  • Quantify feature adoption
  • Determine the steps leading to a browser error

Control Whether Action Collection Is Enabled

The trackUserInteractions initialization parameter enables collection of user clicks in the application. This means that sensitive and private data contained in the page may be included to identify the element with which the user interacted.

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.init({
    // Other initialization configuration
    trackUserInteractions: true
  })

Track User Interactions

The RUM SDK automatically tracks clicks. A click action is created if all of the following conditions are met:

  • Activity is detected after the click, i.e., page activity state;
  • The click does not result in a new page load (in which case the RUM SDK generates a separate RUM View event);
  • The Action name can be determined.

Action Metrics

Metric Type Description
action.duration number(ns) Load time of the action.
action.action_long_task_count number Count of all long tasks collected for this action.
action.action_resource_count number Count of all resources collected for this action.
action.action_error_count number Count of all errors collected for this action.

The RUM SDK calculates the action load time by monitoring page activity after each click. An action is considered complete when the page is no longer active.

Action Attributes

Attribute Type Description
action.action_id String UUID of the user action
action.action_type String Type of the user action. Set to custom for custom user actions
action.action_target String The element the user interacted with. Only applicable for automatically collected actions
action.action_name String A user-friendly name (e.g., "Click on #checkout"). For custom user actions, the action name given in the API call

Action Name

The RUM SDK infers the Action name from the clickable element and its parent elements. If the automatically generated name is unreliable, you can explicitly name the action using built-in attributes.

Add data-guance-action-name on the clickable element or its parent:

<button type="button" data-guance-action-name="Submit Order">Submit Order</button>

By using the actionNameAttribute initialization parameter, you can specify a custom attribute on the element to define the action name.

Specify the attribute name during initialization:

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.init({
    // Other initialization configuration
    trackUserInteractions: true,
    actionNameAttribute: "data-custom-name"
  })

Set the corresponding attribute on the clickable element or its parent:

<button type="button" data-custom-name="Submit Order">Submit Order</button>

When an element has both the built-in attribute and a custom attribute configured via actionNameAttribute, the built-in attribute takes precedence.

Actions in Shadow DOM

The RUM SDK supports automatic collection of click actions inside open Shadow DOM (mode: "open"):

  • The Action name and location information (including Shadow boundary) are generated based on the actual clicked element of the event;
  • Supports elements created by an iframe's JavaScript realm and then mounted into a ShadowRoot, such as buttons rendered by a wujie micro-frontend;
  • Supports obtaining names from elements associated via aria-labelledby within the same ShadowRoot;
  • Supports single-layer and multi-layer nested open ShadowRoots.

When crossing Shadow DOM boundaries, the automatic Action name only uses explicit naming attributes, or interactive elements with clear semantics such as buttons, links, and ARIA elements. It does not use arbitrary text nodes, table rows, or aggregated text from card containers as names. For custom containers without native interactive semantics, add data-guance-action-name on the clicked element or its ancestor, or configure a custom naming attribute via actionNameAttribute:

<div data-guance-action-name="Open Payment Slip" role="button">
  <!-- Payment slip content -->
</div>

This restriction applies only to automatic Action naming across Shadow DOM boundaries; the regular DOM maintains its original naming strategy.

Closed Shadow DOM (mode: "closed") does not expose internal nodes to external scripts, so only the Shadow Host information provided by the browser event can be collected, and the name and location information of internal elements cannot be guaranteed.

Custom Actions

For business operations that cannot be expressed by clicks, use the addAction API to create custom actions.

Verify Instrumentation

  1. Click a button with a clear name.
  2. In the browser Network tab, confirm that there is a /v1/write/rum request.
  3. In the Action explorer of the corresponding web application, check the Action name, duration, and the associated Resource and Error counts.

If no Action appears, sequentially verify that trackUserInteractions is set to true, that the current session is not sampled, and that attributable page activity occurred after the click.

Feedback

Is this page helpful?