User Interaction Tracking

Overview

User Interaction Tracking records the kind of customer behavior required to use Mapp Fashion in a meaningful way. It captures page views, product views, basket actions, and completed orders. These events provide the context used for recommendations, reporting, and attribution.

Without User Interaction Tracking, Mapp Fashion can’t reliably interpret customer behavior or link interactions to products and conversions.

Here we’ll explain which customer interactions must be tracked and how to trigger the corresponding events. As a prerequisite, Integrated Tracking and the Mapp Fashion extension should already be set up.

Tracking Events and Functions

Product identifiers

Tracking identifiers map directly to the Mapp Cloud Product Catalog:

• id is the variant-level identifier (SKU): a specific purchasable item including colour and size.

• fashionStyleId is the Style ID: the grouping of variants that share the same style and colour across sizes.

Always send the same identifiers you store in the Mapp Cloud Product Catalog.

Each of the following tracking methods captures a specific type of customer interaction. Use these calls to record the corresponding actions at the appropriate point in your site logic.

Page View Tracking

Tracks when a shopper views a page. This function is essential for linking all subsequent events, especially when the user has multiple tabs open. Always trigger a page view before sending any product, basket, or order events to ensure proper session context.

wtSmart.track();

Identify (Customer Identification)

Connects customer actions before and after login. Use this function when a customer:

• Logs in

• Registers a new account

You can also include customer identity details in the order event to link purchases with known users.

Warning

Customer identity details can also be included in the order event to associate purchases with known customers.

Example

wtSmart.customer.data.set({
  registrationEmail: "customer@example.com", // pseudonymized automatically
  id: "id_from_your_database_here"
});

Parameters

Product Detail Page (PDP) /itemView

Captures when a shopper views a specific product detail page or product view. Trigger this event when a customer:

• opens a product detail page

• switches to another product variant (for example, color or size)

• views products that are loaded dynamically via JavaScript

If products are loaded dynamically, trigger a new PDP call for each view.

Example

wtSmart.product.view.data.set([{
  id: "SKU-12345",
  cost: 99.90,
  quantity: 1,
  fashionStyleId: "XYZ789"
}]);

Parameters

Add to Basket / Remove from Basket

Use this function when a shopper adds or removes a product from their basket.

Example

wtSmart.product.addToCart.data.set([{
  id: "SKU-12345",
  cost: 99.90,
  quantity: 1,
  currency: "GBP",
  fashionItemTitle: "Dress",
  fashionItemCategory: "Dresses"
}]);

wtSmart.product.deleteFromCart.data.set([{
  id: "SKU-12345",
  cost: 99.90,
  quantity: 1,
  currency: "GBP",
  fashionItemTitle: "Dress",
  fashionItemCategory: "Dresses"
}]);

Order Confirmation

Captures completed orders.

Each order must include at least one product entry. A product entry represents a specific product variant and its corresponding quantity that is part of the order. These entries use the same product parameters as other product tracking events, but are submitted in the context of an order.

An order is considered invalid if:

• No line items are provided, or

• A line item has no id or quantity

Example

wtSmart.order.data.set({
  value: 120.99,
  id: 'M-12345',
  tax: 19.99,
  shippingCosts: 4.95,
  currency: "GBP"
});

wtSmart.product.confirmation.data.set([{
  id: "SKU-12345",
  cost: 99.90,
  quantity: 1,
  currency: "GBP",
  fashionItemTitle: "Dress",
  fashionItemCategory: "Dresses"
}]);

Order Parameters

Product Parameters