Overview
Browser Monitoring automatically detects user interactions performed during a user journey and provides insights into your users’ behavior without requiring you to manually instrument every single click in your application.
You can accomplish the following objectives:
- Understand the performance of key interactions (for example, a click on the Add to cart button)
- Quantify feature adoption
- Identify the steps that led to a specific browser error
The trackUserInteractions initialization parameter enables the collection of user clicks in your application, which means sensitive and private data contained in your pages may be included to identify elements that a user interacted with.
To control which information is sent to Datadog, manually set an action name, or implement a global scrubbing rule in the Datadog Browser SDK for RUM.
Track user interactions
The RUM Browser SDK automatically tracks clicks. A click action is created if all of the following conditions are met:
Action timing metrics
For information about the default attributes for all RUM event types, see RUM Browser Data Collected.
| Metric | Type | Description |
|---|
action.loading_time | number (ns) | The loading time of the action. |
action.long_task.count | number | Count of all long tasks collected for this action. |
action.resource.count | number | Count of all resources collected for this action. |
action.error.count | number | Count of all errors collected for this action. |
The Datadog Browser SDK for RUM calculates action loading time by monitoring page activity following every click. An action is considered complete when the page has no more activity. See How page activity is calculated for details.
For more information about configuring for sampling or global context, see Modifying RUM Data and Context.
Action attributes
| Attribute | Type | Description |
|---|
action.id | string | UUID of the user action. |
action.type | string | Type of the user action. For custom user actions, it is set to custom. |
action.target.name | string | Element that the user interacted with. Only for automatically collected actions. |
action.name | string | User-friendly name created (for example, Click on #checkout). For custom user actions, the action name given in the API call. |
Declare a name for click actions
The Datadog Browser SDK for RUM uses various strategies to get a name for click actions. If you want more control, you can define a data-dd-action-name attribute on clickable elements (or any of their parents) that is used to name the action.
For example:
<a class="btn btn-default" href="#" role="button" data-dd-action-name="Login button">Try it out!</a>
<div class="alert alert-danger" role="alert" data-dd-action-name="Dismiss alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="visually-hidden">Error:</span>
Enter a valid email address
</div>
Starting with version 2.16.0, with the actionNameAttribute initialization parameter, you can specify a custom attribute that is used to name the action.
For example:
<script>
window.DD_RUM.init({
...
trackUserInteractions: true,
actionNameAttribute: 'data-custom-name',
...
})
</script>
<a class="btn btn-default" href="#" role="button" data-custom-name="Login button">Try it out!</a>
data-dd-action-name is favored when both attributes are present on an element.
Send custom actions
To extend the collection of user interactions, send your custom actions using the addAction API. These custom actions send information relative to an event that occurs during a user journey.
For more information, see Send Custom Actions.
Further Reading
Additional helpful documentation, links, and articles:
