Tracking User Actions
Incident Management is now generally available! Incident Management is now generally available!

Tracking User Actions

Real User Monitoring (RUM) SDKs detect user interactions performed during a user journey. Set the trackInteractions initialization parameter to true to enable this feature.

Note: The trackInteractions initialization parameter enables the collection of user clicks in your application. Sensitive and private data contained on your pages may be included to identify the elements interacted with.

Once an interaction is detected, all new RUM events are attached to the ongoing action until it is considered finished. The action also benefits from its parent view attributes such as browser information, geolocation data, and global context.

Action timing metrics

For information about the default attributes for all RUM event types, see Data Collected. For information about configuring for sampling or global context see Advanced Configuration.

MetricTypeDescription
action.loading_timenumber (ns)The loading time of the action.
action.long_task.countnumberCount of all long tasks collected for this action.
action.resource.countnumberCount of all resources collected for this action.
action.error.countnumberCount of all errors collected for this action.

How action loading time is calculated

Once an interaction is detected, the RUM SDK watches for network requests and DOM mutations. It is considered finished once the page has no activity for more than 100ms (activity being defined as ongoing network requests or DOM mutations).

Action attributes

AttributeTypeDescription
action.idstringUUID of the user action.
action.typestringType of the user action. For custom user actions, it is set to custom.
action.target.namestringElement that the user interacted with. Only for automatically collected actions.
action.namestringUser-friendly name created (for example Click on #checkout). For custom user actions, the action name given in the API call.

Declaring a name for click actions

The RUM library uses various strategies to get a name for click actions, but if you want more control, you can define a data-dd-action-name attribute on clickable elements (or any of their parents) that will be 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="sr-only">Error:</span>
  Enter a valid email address
</div>

Custom user actions

Custom user actions are user actions declared and sent manually by using the addAction API. They can send information relative to an event occurring during a user journey (for example, a custom timing or customer cart information).

Once RUM is initialized, generate user actions when you want to monitor specific interactions on your application pages or measure custom timings with the addAction(name: string, context: Context) API call. In the following examples, the RUM SDK collects the number of items within a cart, what they are, and how much the cart is worth overall. 

import { datadogRum } from '@datadog/browser-rum';

datadogRum.addAction('<NAME>', '<JSON_OBJECT>');

// Code example
datadogRum.addAction('checkout', {
    cart: {
        amount: 42,
        currency: '$',
        nb_items: 2,
        items: ['socks', 't-shirt'],
    },
});
DD_RUM.onReady(function() {
    DD_RUM.addAction('<NAME>', '<JSON_OBJECT>');
})

// Code example
DD_RUM.onReady(function() {
    DD_RUM.addAction('checkout', {
        cart: {
            amount: 42,
            currency: '$',
            nb_items: 2,
            items: ['socks', 't-shirt'],
        },
    });
})
window.DD_RUM && DD_RUM.addAction('<NAME>', '<JSON_OBJECT>');

// Code example
window.DD_RUM &&
    DD_RUM.addAction('checkout', {
        cart: {
            amount: 42,
            currency: '$',
            nb_items: 2,
            items: ['socks', 't-shirt'],
        },
    });

Further Reading