Implementing the Product List Tracking Plugin

Browser support

The product list tracking plugin uses "querySelector" to find the configured products. This method is supported by the following browsers:

• Internet Explorer version 8 or higher
• Microsoft Edge
• Firefox version 3.5 or higher
• Google Chrome
• Safari version 3 or higher
• Opera version 10 or higher

Methods and properties

name

Get the name of the extension.

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

version

Get the version of the extension.

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

config

Set and get the current configuration of the extension.

• actionName: Here you can specify an alternative action name.
• viewPercent: Specify how long a list element has to be visible or outside in the user's viewport in order to recognize the listed product as "viewed" or "not visible". Products that have been "viewed" by the user are automatically tracked with the status "list". Only elements meeting this criterion can be sent more than once when they are "visible" again. By default, products are sent when the HTML element is visible in the user's viewport for 1000 milliseconds, and these elements are marked when they are outside the viewport for at least 1000 milliseconds.
• viewTime: Specify what percentage of the height and width of a list element must be visible or outside in a user's viewport in order to recognize the listed product as "viewed" or "not visible". Products that have been "viewed" by the user are automatically tracked with the status "list". Only elements meeting this criterion can be sent more than once when they are "visible" again. By default, products are sent when the HTML element is 100% visible in the user's viewport and these elements are marked when they are 100% outside the viewport.
• sampling: When a sampling rate is specified, the plugin is only activated once for every X user. Enter "0" for the value to capture all users.
• maxSendProducts: Request limiting.
  • session: Define a limit for sending products within the browser session. By default, a maximum of 10000 products is permitted during the browser session. Enter "-1" for the value to enable capturing all products within a browser session.
  • page: Define a limit for sending products on a single page. By default, a maximum of 1000 products is permitted on a single page. Enter "-1" for the value to enable capturing all products on a page.
• maxCookieSize: Here you can define the maximum size of the product list tracking cookie. By default, 4000 characters are used.
• sendMultipleProductViews: In order to send previously sent products again after user interaction, for example when the user scrolls up and down, enter "true" to activate this feature.

/**
 * @param {{
 *		[actionName=webtrekk_ignore]: string,
 *      [viewPercent=100]: number,
 *      [viewTime=1000]: number,
 *      [sampling=0]: number,
 *      [maxSendProducts]: {
 *          [session=10000]: number,
 *          [page=1000]: number
 *      },
 *      [maxCookieSize=4000]: number,
 *      [sendMultipleProductViews=false]: boolean
 * }} [config]
 *
 * @returns {object}
 */
wtSmart.extension.product_list_tracking.config(config);

isActivated

Get the status, if the extension is enabled.

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

activate

Activate the extension.

wtSmart.extension.product_list_tracking.activate();

deactivate

Deactivate the extension.

wtSmart.extension.product_list_tracking.deactivate();

update

Recalculation of the view port for dynamic elements.

wtSmart.extension.product_list_tracking.update();

Example

// is product list tracking activated
var isActivated = wtSmart.extension.product_list_tracking.isActivated();
 
// set product list tracking config
wtSmart.extension.product_list_tracking.config({
    viewPercent: 100,
    viewTime: 1000,
    sampling: 0,
    maxSendProducts: {
        session: 10000,
        page: 1000
    },
    maxCookieSize: 4000,
    sendMultipleProductViews: false
});
 
// activate product list tracking
wtSmart.extension.product_list_tracking.activate();
 
// deactivate product list tracking
wtSmart.extension.product_list_tracking.deactivate();

Initialisation of the product list elements

To flag the product list elements you want to measure, add the configuration to the "wtstp_pli" array. The configuration for a product list element is divided into "selector" and "data".

Under "selector", enter the product list element to be measured. You can either pass this directly as an HTML element or pass the respective CSS selector for the element.

If your product list element is inside a shadow DOM element, specify the CSS selector of the shadow DOM element. If you have defined a CSS selector as the "selector", it will refer to the "shadowRoot" selector you have defined. 

Under "data", enter the product information for the list element. As mandatory information, pass the product identifier "id" and the product position "position" here. The product position specifies where the element is within the list. You can also pass additional product information here. This would be:

• cost: Contains the product price ("0" prices are allowed). If you transmit a product several times (quantity property greater than 1), use the total price not the unit price.
• quantity: Contains the product quantity.
• variant: Use this to transmit the variant of the product.
• soldOut: Use this to transmit the product is sold out or in stock (sold out = true, in stock = false).
• parameter: You can use parameters to enrich analytical data with your own website-specific information and/or metrics.
• category: Product categories allow the grouping of products.

window.wtstp_pli = window.wtstp_pli || [];
wtstp_pli.push(
 {
        selector: document.getElementById("list-item-1"),
        data: {
            id: "075eo2f002",
            position: 1,
 
            // optional
            cost: 49.99,
            quantity: 1,
            category: {
                1: "100% cotton",
                2: "normally",
                6: "en",
                7: "men",
                8: "shirts"
            },
            parameter: {
                1: "blue"
            },
            variant: "button-down design",
            soldOut: false
        }
    }
);