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:
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:
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-labelledbywithin 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¶
- Click a button with a clear name.
- In the browser Network tab, confirm that there is a
/v1/write/rumrequest. - 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.