Step 3: Registering Recommendation

After activating the Recommendation Tracking extension, you must register the elements on your website that you want to track as recommendations. This is required for all integration methods.

When a recommended product is loaded into a widget, becomes viewable on screen, or is clicked, the extension sends product details along with widget context (placement, algorithm, product position). The three product statuses and what triggers them are described in Recommendation Tracking.

If the clicked product is purchased within seven days, the stored widget context is included in the purchase request. Attribution follows a last-click approach.

Register recommendation

Use add() to register a recommended product element and the data you want to send for it. Call add() once for every product element.

wtSmart.extension.recommendation_tracking.add({
  selector: "li.item:nth-of-type(2)",
  shadowRoot: "#product-collection",
  exclude: ["li.item:nth-of-type(2) a:last-child"],
  data: {
    id: "MP12",
    cost: 19.95,
    currency: "EUR",
    placement: "pdp",
    algorithm: "similar items",
    occasion: "casual",
    position: 3
  }
});

Note

The extension evaluates the selector once, about one second after add() is called. The product elements must already exist in the DOM at that time. Call add() after your widget has rendered, and call it again whenever new product elements are added later, for example after a carousel loads more items, after a route change in a single-page application, or after the widget re-renders. Elements that are already registered are skipped, so a repeated call does not change their data. The loaded event is sent when an element is registered. Viewable and clicked events follow from the visitor scrolling the product into view and clicking it, and need no further registration.

Fields

Note

The extension listens for click events on all clickable elements inside the widget (a, area, button, input[type="submit"]).

Warning

Call add() for every product element you want to track. A selector that matches several elements gives all of them the same id and position, so use one call per product.

Example

// register multiple products inside the same widget
document.querySelectorAll(".recos li.item").forEach((el, index) => {
  wtSmart.extension.recommendation_tracking.add({
    selector: el,
    data: {
      id: el.dataset.sku,
      cost: el.dataset.price,
      currency: "EUR",
      placement: "homepage",
      algorithm: "similar items",
      occasion: "casual",
      position: index + 1
    }
  });
});

Testing your implementation

To verify that recommendation events are firing correctly, use your browser's developer tools or the Mapp Cloud debugger:

1. Open the page with a recommendation widget and start the Debugger.

2. Trigger the events (widget load, product in view, click, and later a purchase).

3. Check the outgoing requests and verify that the following values are sent: