Configure user interaction capturing for web frontends

  • Latest Dynatrace
  • How-to guide

Early Access

The New RUM Experience allows you to capture user interactions such as clicks and scrolls and turn them into actionable insights:

  • You can view all user interactions that occurred during a user session using the Users & Sessions Users & Sessions app. This is especially useful for customer support teams and developers when diagnosing customer issues or bugs.

  • User interaction analysis via DQL allows you to understand behavioral patterns across a wide range of use cases; see DQL examples.

During the User Interaction Early Access, there are no additional charges for ingesting user interactions. Querying user interactions is also included at no extra cost, because raw DEM data queries are currently in Early Access; see Calculate your consumption of Digital Experience Monitoring (DEM) - Query.

Activate capturing of user interactions

To capture user interactions

  1. Go to Experience Vitals Experience Vitals > Overview.
  2. Select Web to view all web frontends.
  3. Select the frontend you want to configure.
  4. Switch to the Settings tab.
  5. Under Enablement and cost control, turn on User Interactions .

Types of user interactions

The following table provides an overview of the available types of user interactions. For a detailed specification, see User interaction in the Semantic Dictionary.

User interaction type

Description

When a user clicks or touches an HTML element. Note that a touch on an HTML element is captured as a click.

When a user presses a key combination involving the Ctrl, Alt, or Meta (Windows or Cmd) keys, or presses one of the individual keys Esc, Enter, Tab, and Space.

When a user zooms in or out, or resizes the viewport.

When a user focuses on or leaves an HTML element. These user interaction types are only captured if you have opted in.

When a user modifies a value in a form field, for example, by selecting a checkbox.

When a user scrolls through a page or view.

When a user starts or ends a drag operation. Valid external drop actions are also captured, for example, dropping a file into an upload area. In both cases, the position is recorded.

When a user hovers over an HTML element. This user interaction type is only captured if you have opted in.

Opt-in user interaction types

Most user interaction types are captured automatically once you have activated user interaction capturing. Some interaction types, however, require an explicit opt-in by adding dedicated attributes to the corresponding HTML elements. These attributes enable event capture but don't affect the element's behavior.

Focus/Blur

To capture focus and blur user interactions, add the attributes data-dt-focus and data-dt-blur to the corresponding HTML elements. The attribute can be empty or assigned a value; both data-dt-focus and data-dt-focus="true" are valid.

Examples
<!-- Track when users focus on search -->
<input data-dt-focus type="text" placeholder="Search products...">


<!-- Monitor form field interaction -->
<form>
  <input data-dt-focus name="email" type="email" placeholder="Email">
  <input data-dt-focus name="password" type="password" placeholder="Password">
  <button type="submit">Login</button>
</form>


<!-- Track focus on custom components -->
<div data-dt-focus tabindex="0" role="button">Custom Button</div>


<!-- Track both focus and blur for complete interaction -->
<textarea data-dt-focus data-dt-blur placeholder="Your feedback..."></textarea>


<!-- Monitor search abandonment -->
<input data-dt-focus data-dt-blur type="search" placeholder="What are you looking for?">

Mouseover

To capture mouseover user interactions, add the attribute data-dt-mouse-over="<milliseconds>" to the corresponding HTML element. The attribute's value specifies how many milliseconds the user must hover over the element before the interaction is captured. When choosing an appropriate delay, consider the following factors:

  • If you want to measure engagement with CTAs (call-to-action elements) or product cards, how many milliseconds should the user hover before the mouseover is considered intentional?
  • If your goal is to track tooltip interactions, what delay does your application use before tooltips appear?
Examples
<!-- Track hover after 300ms (shows intent) -->
<button data-dt-mouse-over="300">
  Learn More
</button>


<!-- Monitor product card interest with 500ms threshold -->
<div class="product-card" data-dt-mouse-over="500">
  <img src="product.jpg">
  <h3>Premium Headphones</h3>
  <p>$299.99</p>
</div>


<!-- Track tooltip hover with 1 second threshold -->
<span data-dt-mouse-over="1000">
  <i class="info-icon">?</i>
  <div class="tooltip">Detailed information appears here</div>
</span>


<!-- Possible different thresholds for different intents -->
<nav>
  <div data-dt-mouse-over="200">Products</div>      <!-- Quick hover -->
  <div data-dt-mouse-over="500">Solutions</div>     <!-- Medium intent -->
  <div data-dt-mouse-over="1000">Documentation</div> <!-- Strong intent -->
</nav>
Related tags
Digital Experience