- 4 Minutes to read
- Print
- DarkLight
Product List Tracking
- 4 Minutes to read
- Print
- DarkLight
With the Product List Tracking plugin, you can analyze what products are viewed and clicked in the catalog and on the product overview page. You can also link to the product detail view, products placed into the shopping basket, and purchased products.
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
}
}
);
Code Generator
Use the code generator to create individual code that you can then integrate directly into the website.