Tracked Event Integration Methods

Tracked event integration methods are used to implement tracked events on a property. Select the integration method to use when adding or editing a tracked event.
Note: To use tracked events in attribution heatmaps, use the JavaScript on-click event integration method.

DXA JavaScript API call

Use the DXA JavaScript API call integration method to implement tracked events with an on-page call to the DXA JavaScript API. This lets you define the context for a tracked event to be triggered, such as visitors going to a particular page or adding an item to the basket, and add a value to the tracked event.
Note: Learn more: SDK Reference Guide

Enabling DXA JavaScript API call

When adding or editing a tracked event, in the Integration method dropdown menu, select Decibel JavaScript API call.Integration method dropdown menu with DXA JavaScript API call highlighted

Implementing the tracked event integration code

  1. On the navigation bar, go to Define > Tracked Events > View.

    The tracked event settings screen appears.

  2. On the tracked event settings screen table, in the Actions column, click Show integration code for the tracked event you want to implement.

    The tracked event integration code appears in a text box.

    Tracked event integration code

  3. Copy the tracked event integration code.

  4. Implement the integration code using a tag manager or directly in the page code.

The tracked event is implemented.

Adding value to a tracked event

Using Decibel JavaScript API call, you can assign a value to each tracked event, such as the value of a product. All conversion type tracked events contribute to average order value and revenue impact.
Tip: DXA recommends assigning value to a maximum of four tracked events. Assigning more than this may reduce the accuracy of revenue impact calculations.

JavaScript on-click event

Use the JavaScript on-click event integration method to implement a tracked event using a CSS selector on a specific user-interface (UI) element, such as a button. The tracked event is then triggered when a visitor interacts with the selected UI element.
Note: You can create up to 150 tracked events using JavaScript On-click event. If you reach this limit, you can add more tracked events using DXA JavaScript API call.

Enabling JavaScript on-click event

  1. When adding or editing a tracked event, in the Integration method dropdown menu, select JavaScript On-click Event.

    The Selector text box and Search button search button appear.

    Selector text box

  2. In the Selector text box, point to the UI element you want to implement the tracked event on. The following options are available:
    Note: The Selector text box has a 200-character limit.
    • Manually enter a selector.

    • Use Search button the search button to select a UI element

For more information on using the Selector text box to populate the UI element you want to implement the tracked event on, see the sections below.

Manually entering a selector

  1. In the Selector text box, enter a selector. For example, #checkout or div.product > .addToBasket.

    Selector text box populated with details

  2. Click Save Tracked Event.

The tracked event will be triggered when a visitor interacts with the selected UI element.

Selecting a UI element with the search button

  1. Ensure the page with the UI element you want to integrate the tracked event on is available as a tab on the same browser you use DXA.
  2. To the right of the Selector text box, click Search button the search button.

    A dropdown menu appears listing names of the pages for your property currently available as tabs on your browser.Using the search button to the right of the Selector text box.

  3. On the dropdown menu, click the name of the page you want to trigger the tracked event on.

    The page you clicked opens in a new tab on the browser.

  4. On the recently opened page, hover over the UI element you want to trigger the tracked event on.

    In the image below, the element hovered over has the ID h2.title. The element title is contained within parentheses.Hovering over an element using the search button.

  5. Click the element you're hovering over.

    The element HTML appears in the Selector text box. The element ID is the final entry in the text.The HTML appearing in the Selector text box with the element ID at the end

  6. Click Save Tracked Event.

The tracked event will be triggered when a visitor interacts with the selected UI element.

Rules

Add rules to trigger tracked events when specific conditions are detected.

For example, in the image below, a tracked event is triggered when DXA detects a visitor has been in a session for five minutes:Rules creation screen
Note: Learn more: Rules