Configure user interaction capturing for web frontends

• Latest Dynatrace
• How-to guide
• Updated on May 18, 2026

Early Access

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

Activate capturing of user interactions

To capture 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.

Key press capturing

Key press events are captured for combinations involving the Ctrl or Meta (Windows or Cmd) keys. Alt is recorded in the event when held together with Ctrl or Cmd, but Alt-only combinations are not captured. All keys pressed together with Ctrl or Cmd are collected into a single event in the keys field. Holding a key does not generate repeated events—only the initial keydown fires.

In addition to key combinations, certain standalone keys are captured when pressed without Ctrl or Cmd:

All standalone key events are throttled at 500 ms per unique key to prevent event spam.

Activation of buttons and links—for example, pressing Enter on a button—triggers synthetic click events in the browser. Here, only a key press event is captured, and the click event is dropped.

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.

<!-- 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:

<!-- 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>

Customization

You can enrich captured user interactions with additional context to support more targeted analysis.