Use the element picker

Use the element picker to measure and track user interactions within applications, and create custom events.

About the element picker

Use the element picker in Splunk Digital Experience Analytics (DXA) to measure and track user interactions within your browser applications. Instead of manually inspecting application code, the element picker allows you to select elements (for example, buttons or forms) on your page to define events.

Use cases for web element picker

  • Track clicks on specific buttons, links, or forms.

  • Monitor interactions with banners, widgets, or any UI element.
  • Quickly define custom events for A/B testing or campaign measurement.

Use the element picker

Select elements to measure the user interactions with specific elements in your browser applications. You can access the element picker within the event definition workflow. Follow these steps to use the element picker in DXA.

  1. Select the Event Definitions tab.

  2. Select the Pick from page button.

  3. Input the URL of the target page, and select Go to page.

  4. Turn the toggle on for the element picker. Navigate to the element you want to track, and select that element. The element's selector/xpath is automatically captured.

  5. (Optional) Use the slider to fine-tune your selection. For example, use the slider to select the parent element in the HTML code for the specific button. The data in the element picker dynamically updates based on your selection.

  6. Define where this event will be tracked:
    • All URLs: Track this element on all pages on your site
    • This URL: Track only on the current page URL

  7. Select Confirm.

  8. Create a new event definition for this interaction. Confirm that the definition is correct and select Save.

  9. You can view, edit, or delete your new event definition from the Event Definitions tab in Digital Experience Analytics.

Use data attributes with the element picker

Data attributes help you create more stable event definitions from the element picker. Instead of relying only on XPath or visible text, you can allowlist specific data-* attributes from your site and use them to identify clicked elements.

Use data attributes when your application already has stable element markers, such as:

  • data-trackid="checkout-submit"

  • data-test-id="save-button"

  • data-component="pricing-card"

These attributes are usually more stable than page structure or button text.

Add dataAttributesToCapture to your Splunk RUM Web configuration:

JSON 
SplunkRum.init({ realm: 'us0', rumAccessToken: 'YOUR_TOKEN', applicationName: 'shop-web', dataAttributesToCapture: ['data-trackid', 'data-test-id'], });

You can use either full data-* names or camelCase dataset names:

CODE 
dataAttributesToCapture: ['data-test-id', 'trackId']

Only attributes in this allowlist are captured and shown in the element picker.

Follow these steps to use data attributes:

  1. Open the element picker by selecting the Pick from page button.

  2. Select an element on the page. If the selected element has allowlisted data attributes, they appear as tags you can select.

  3. Select the data attribute tags you want to use.

  4. Confirm the selection. The generated event definition can use the selected data attributes by themselves, or combine them with URL scope, XPath, or target text.

Only allowlist attributes are safe to store in telemetry.

Avoid attributes that can contain:

  • email addresses

  • user names

  • account IDs

  • session IDs

  • unique per-render or high-cardinality values.

Splunk captures the attribute values you allowlist. The picker filters unsupported keys, but it does not classify or redact sensitive values.