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, you can mask action names with privacy options, 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:
Note: When an action is being tracked, other actions within the next 100 ms
do not get sent, unless they are custom actions.
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.
How action names are computed
The Datadog Browser SDK uses different strategies to compute click action names:
If the data-dd-action-name
attribute or a custom attribute (as explained above) is explicitly set by the user on the clicked element (or one of its parents), its value is used as the action name.
If data-dd-action-name
attribute or its equivalent is not set, depending on the element type, the sdk uses other attributes such as label
, placeholder
, aria-label
from the element or its parents to construct the action name. If none of these attributes is found, the sdk uses the inner text as name for the action.
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: