Pages

Versions Compared

Old Version 1

changes.mady.by.user Timo Lagus

Saved on

compared with

New Version 2

changes.mady.by.user Timo Lagus

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 19.0


Note

To use the data layer on a site, the data layer module must be enabled for the site.

For an introduction to item list view tracking in the Frosmo Platform, see Data tracking solutions.

Tracking item list views with the data layer means triggering an item list view event whenever a visitor opens a page or other view that displays a list of items, such as a category page or a search results page. You can also use these events to track live filtering that visitors apply to item lists, such as when a visitor filters search results on a search results page.

You can trigger item list view events from:

  • Page code (meaning directly from the site source code)
  • Shared code

Page code is the recommended solution. If you cannot use the data layer in your page code, use shared code.

Tracking item list views by triggering an item list view event from a pageImage Added

Figure: Tracking item list views by triggering an item list view event from a page (click to enlarge)

Triggering item list view events

To trigger an item list view event, call the dataLayer.push() function with the following object:

Code Block
languagejs
themeRDark
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                <attribute_name>: ['<attribute_value_1>', '<attribute_value_2>'],
                ...
            }
        }
    }
});

The frosmo.viewItemList object contains the event data.

viewItemList object

The viewItemList object contains the data of a single item list view event.

Table: viewItemList object properties

PropertyDescriptionTypeRole
filters

Attributes and attribute values that together describe the listed items.

You can think of the attributes and their values as the filters that would need to be applied to produce the set of listed items.

For example, a product category page that lists fruits and vegetables might trigger the following item list view event:

Code Block
languagejs
themeRDark
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                type: ['Food/Fruits', 'Food/Vegetables']
            }
        }
    }
});

You must define at least one attribute with at least one value. You can define a maximum of 20 attributes, each with a maximum of 20 values. If you define no attributes, more than 20 attributes, or more than 20 values for an attribute, the platform ignores the event.

Warning

The platform uses item list view events for tracking visitor affinity. For an item list view event to impact affinity, the event must contain attributes for which the platform tracks affinity. If you define an item list view event without any affinity-tracked attributes, the platform effectively ignores the event.

An attribute name must be a string with a length of 1-256 characters. If the name is empty or longer than 256 characters, the platform ignores the event.

An attribute value must be a string with a length of 1-256 characters. If the value is empty or longer than 256 characters, the platform ignores the event.

Note

The platform automatically trims leading and trailing spaces from the attribute names and values. The platform validates the length of the trimmed names and values.


ObjectRequired

Item list view examples

Code Block
languagejs
themeRDark
titleExample: Category page
collapsetrue
// Visitor views a category page for 'Food'.
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                type: ['Food']
            }
        }
    }
});


Code Block
languagejs
themeRDark
titleExample: Category page with filters
collapsetrue
// Visitor views a category page for 'Power Tools/Drills'.
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                type: ['Power Tools/Drills']
            }
        }
    }
});

// Visitor filters the category page for brand and color.
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                type: ['Power Tools/Drills'],
                brand: ['Wakita'],
                color: ['Red']
            }
        }
    }
});


Code Block
languagejs
themeRDark
titleExample: Brand page
collapsetrue
// Visitor views a brand page for 'Wakita'.
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                brand: ['Wakita']
            }
        }
    }
});


Code Block
languagejs
themeRDark
titleExample: Search results page
collapsetrue
// Visitor filters search results by availability, brand, and price.
dataLayer.push({
    frosmo: {
        viewItemList: {
            filters: {
                availability: ['in stock'],
                brand: ['Wakita'],
                priceRange: ['20-100']
            }
        }
    }
});

// NOTE! For all three attributes to affect the visitor's affinities,
// the platform must track all three for affinity.

Testing item list view tracking

To test that item list views are correctly tracked with the data layer:

  1. Go to the site.
  2. Launch Frosmo Preview.

  3. Select Advanced > Events.

    Testing item list view trackingImage Added

  4. Go to a page where item list views are tracked. If item list view events are successfully triggered with the data layer, Frosmo Preview shows a dataLayer message for each event. The message contains the object passed to the data layer.

    Testing item list view trackingImage Added

  5. To verify that the correct event data was sent, expand the Data section of the dataLayer message, and check the frosmo.viewItemList object.

    Testing item list view trackingImage Added

  6. If you want more details on a data layer call, select Advanced > Requests, and check the viewItemList request to the Optimizer API.

    Testing item list view trackingImage Added