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

Manage information being collected

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:

• Activity following the click is detected. See How page activity is calculated for details.
• The click does not lead to a new page being loaded, in which case, the Datadog Browser SDK generates another RUM View event.
• A name can be computed for the action. See Declaring a name for click actions for details.

Action timing metrics

For information about the default attributes for all RUM event types, see RUM Browser Data Collected.

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

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:

1. 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.

2. 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:

Introducing Datadog Real User MonitoringBLOG Explore your views within DatadogDOCUMENTATION Apply visualizations on your eventsDOCUMENTATION Learn about RUM dashboardsDOCUMENTATION