Integrated Tracking

New
  • 2 minute(s) read
Prev Next

Integrated Tracking is the recommended option for using Mapp Fashion, together with a Mapp Intelligence setup. It combines recommendation content retrieval and interaction tracking into a single, unified tracking model.

This page explains how to prepare your environment and add the Mapp Fashion extension on top of Smart Pixel. It covers the base setup required for all Mapp Fashion use cases, including extension integration, configuration, and control.

Additional guides in this section build on this setup and cover the concrete implementation details for specific functional areas:

  • User Interaction Tracking: tracking user behavior, including page views, product views, basket actions, and orders.

  • Recommendation Tracking: tracking interactions with recommendations when rendering them manually.

  • Outfits & Similar Items: retrieving personalized outfits and similar items for a product.

  • Facetted Search & Top Items: recommendation use cases without a specified product.

Prerequisites

Before adding the Mapp Fashion extension, Smart Pixel must already be integrated on your site.

Choose your preferred Smart Pixel integration method and follow the corresponding documentation:

Once Smart Pixel is running, continue with the following steps to add the Mapp Fashion extension.

Add the Mapp Fashion extension

The Mapp Fashion extension is provided as an add-on to the Mapp Intelligence Smart Pixel. The source code and packages are available on GitHub:

Mapp Fashion Smart Pixel Extension (GitHub)

The integration options below describe how the Mapp Fashion plug-in is loaded. They apply regardless of how Smart Pixel was integrated.

Browser (script included)

Integrate the Mapp Fashion extension in the <head> section of the page after the Smart Pixel, so the extension can reuse the existing tracking configuration.

<html>
    <head>
        <title>Homepage</title>
        <script type="text/javascript" async src="js/smart-pixel-loader.min.js"></script>
        <script type="text/javascript" async src="https://[TRACK_DOMAIN]/js/latest/smart-pixel-fashion.min.js"></script>
    </head>
    <body>
        The content of your website is placed here.
    </body>
</html>

Node (npm / bundler)

Use this option if you load Smart Pixel and extensions via a module bundler.

$ npm install @webtrekk-smart-pixel/fashion
const webtrekkSmartPixel = require('@webtrekk-smart-pixel/core');
const webtrekkFashion = require('@webtrekk-smart-pixel/fashion');
const wtSmart = webtrekkSmartPixel.use(window, window.document);
wtSmart.push(webtrekkFashion.use);

RequireJS (AMD loader)

Use this option if your setup relies on RequireJS or another AMD-compatible loader.

requirejs(['wtSmart', 'wtSmartFashion'], function(wtSmart, wtSmartFashion) {
    window.wtSmart = window.wtSmart ? window.wtSmart : wtSmart.use(window, window.document);
    window.wtSmart.push(wtSmartFashion.use);

    // do tracking stuff here
});

Extension Reference

Use the methods below to configure and control the Mapp Fashion extension after it has been loaded. In most setups, you set the configuration (config) and then enable the extension (activate).

name

Returns the extension name.

/**
 * @type {string}
 */
wtSmart.extension.fashion.name;

version

Returns the extension version.

/**
 * @type {string}
 */
wtSmart.extension.fashion.version;

config

Sets or returns the current configuration of the extension.

  • host: The Mapp Fashion host provided during onboarding.

  • namespaceId: The Mapp Fashion–provided identifier for your namespace.

/**
 * @param {{
 *      host: string,
 *      namespaceId: string
 * }} [config]
 *
 * @returns {object}
 */
wtSmart.extension.fashion.config(config);

isActivated

Get the status of whether the extension is enabled or not.

/**
 * @returns {boolean}
 */
wtSmart.extension.fashion.isActivated();

activate

Activates the extension.

wtSmart.extension.fashion.activate();

deactivate

Deactivates the extension.

wtSmart.extension.fashion.deactivate();

Example

This example shows a typical lifecycle: configuring the extension, checking its state, and activating it once the Smart Pixel is already running.

// is fashion activated
var isActivated = wtSmart.extension.fashion.isActivated();

// set fashion config
wtSmart.extension.fashion.config({
    host: 'fashion.example.com',
    namespaceId: '00000000-0000-0000-0000-000000000000'
});

// get fashion config
var fashionConfig = wtSmart.extension.fashion.config();

// activate fashion
wtSmart.extension.fashion.activate();

// deactivate fashion
wtSmart.extension.fashion.deactivate();