Mapp Fashion

The Mapp Fashion plugin extends Mapp Intelligence tracking to support fashion-specific use cases, including recommendation tracking and content retrieval.

It enables a unified tracking setup by integrating Mapp Fashion into an existing Mapp Intelligence implementation, without requiring a separate tracking pixel.

Use this plugin to:

track user interactions with Mapp Fashion recommendations (for example, clicks, carousel navigation, pagination)
retrieve fashion-specific recommendation content such as outfits and similar items
link recommendation interactions to customer journeys and conversions in Mapp Intelligence

This page covers loading, configuring and controlling the extension. The fashion-specific implementation guides live in the Mapp Fashion documentation.

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:

You also need the Mapp Fashion host and namespaceId for your account. Both are provided during Mapp Fashion onboarding.

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
});

Methods and properties

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();

Next steps

With the extension activated, continue with the fashion-specific implementation guides:

User Interaction Tracking: page views, product views, basket actions and orders.
Recommendation Tracking: interactions with recommendations you render yourself.
Outfits and Similar Items: retrieving personalized outfits and similar items for a product.
Faceted Search: recommendation use cases without a specified product.
Hosted widgets: ready-made widgets served by Mapp Fashion.

Note
Mapp Fashion also requires a product feed, a transaction feed and a delegated domain. These are covered in the Mapp Fashion integration guide, not by this extension.

Documentation Index