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 define the widget element and the product-specific data you want to send.

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

Loaded events are triggered automatically as soon as elements matching the selector appear in the DOM. This also works for lazy-loaded content and SPA environments, as no separate event is required. 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

You must call add() for each widget you want to track.

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: