A product is a good or service offered to visitors on a site.

What is product tracking?

Product tracking is the process of:

• Collecting product data from a site.
• Counting the number of views different products receive from visitors.

Product data and product view statistics are stored in the Frosmo back end.

Product tracking is essential for building a database of products to which transactions and other product conversions can be mapped, and for tracking which products visitors view. Product data and product view statistics are a prerequisite for implementing product recommendations and other features that revolve around products, such as segmenting visitors based on the types of products they have viewed.

You collect product data by either scraping the data from product pages as they load in a visitor's browser or by reading the data from a product feed.

Figure: Product tracking in the Frosmo Platform (click to enlarge)

Product tracking generates product information and statistics, which you can view in the Frosmo Control Panel.

Tracking products with the data layer

Tracking products with the data layer means triggering a product view event whenever a visitor navigates to a product page or otherwise views a product on a site. The data you pass in the product view event is the product data for the viewed product.

You can trigger product view events from:

• Modifications (either from custom content or, if you're using a template, from the template content)
• Shared code
• Page code (meaning directly from your site source code)

Figure: Tracking products by triggering a product view event from shared code (click to enlarge)

When you trigger a product view event:

• If the product is not in the product database, the Frosmo Platform adds the event data to the database as a new product. The Frosmo Platform uses the product ID to uniquely identify the product.
• If the product is already in the product database, and if the event data differs from the product data in the database, the Frosmo Platform updates the data in the database. The platform only updates product attributes whose values differ and adds attributes that do not already exist in the database. The platform does not remove existing product attributes that are missing from the event data.
• If the product is already in the product database, and if the event data does not differ from the product data in the database, the Frosmo Platform ignores the event data.
• By default, the Frosmo Platform increments the view count for the product by one. For a newly added product, this is the first view for the product.

To check that the product data is correctly stored in the Frosmo back end, call the Product API.

Triggering product view events

To trigger a product view event, call the dataLayer.push() function with a product object containing the product data:

dataLayer.push({
    frosmoProductId: 'string',
    /* Optional */
    frosmoProductCategory: 'string',
    frosmoProductData: {},
    frosmoProductDiscountPrice: 0,
    frosmoProductImage: 'string',
    frosmoProductName: 'string',
    frosmoProductPrice: 0,
    frosmoProductPromotionLabel: 'string',
    frosmoProductUrl: 'string'
    /* ... */
});

Product object

The product object contains the product data for a product.

Table: Product object properties

Product object examples

Retail

dataLayer.push({
    frosmoProductId: '123456',
    frosmoProductCategory: 'Plushies',
    frosmoProductDiscountPrice: 9.99,
    frosmoProductImage: '/images/cheetah_plushy.png',
    frosmoProductName: 'Cheetah Plushy',
    frosmoProductPrice: 19.99,
    frosmoProductPromotionLabel: 'Weekend Sale',
    frosmoProductUrl: '/products/123456'
});

/* frosmoProductColors is a JavaScript object */

dataLayer.push({
    frosmoProductId: '123456',
    frosmoProductCategory: 'Plushies',
    frosmoProductDiscountPrice: 9.99,
    frosmoProductImage: '/images/cheetah_plushy.png',
    frosmoProductName: 'Cheetah Plushy',
    frosmoProductPrice: 19.99,
    frosmoProductPromotionLabel: 'Weekend Sale',
    frosmoProductUrl: '/products/123456',
    frosmoProductColors: {
        black: '#000000',
        blue: '#0000ff',
        lime: '#00ff00',
        red: '#ff0000'
    }
});

/* frosmoProductColors is a JSON-stringified object */

dataLayer.push({
    frosmoProductId: '123456',
    frosmoProductCategory: 'Plushies',
    frosmoProductDiscountPrice: 9.99,
    frosmoProductImage: '/images/cheetah_plushy.png',
    frosmoProductName: 'Cheetah Plushy',
    frosmoProductPrice: 19.99,
    frosmoProductPromotionLabel: 'Weekend Sale',
    frosmoProductUrl: '/products/123456',
    frosmoProductColors: '{"black":"#000000","blue":"#0000ff","lime":"#00ff00","red":"#ff0000"}'
});

dataLayer.push({
    frosmoProductId: '123456',
    frosmoProductConversion: 1
});

dataLayer.push({
    frosmoProductId: '234567',
    frosmoProductCategory: '',
    frosmoProductCategories: [
        'Accessories',
        'Bedding',
        'Toys'
    ],
    frosmoProductImage: '/images/cheetah_pillow.png',
    frosmoProductName: 'Cheetah Pillow',
    frosmoProductPrice: 29.99,
    frosmoProductUrl: '/products/234567'
});

iGaming

dataLayer.push({
    frosmoProductId: 'bet-1234567', // Bet Id
    frosmoProductCategory: 'Football / Germany / Bundesliga', // Combination of main event information
    frosmoProductCountry: 'Germany',
    frosmoProductData: {
        date: '2020-06-12 21:30:00'
    },
    frosmoProductMainCategory: 'Football', // Event category (here, sport name)
    frosmoProductModel: 'Live', // Event type
    frosmoProductName: 'TSG Hoffenheim - RB Leipzig', // Event name
    frosmoProductUrl: '/event/1006388033', // Event URL
    frosmoProductVenue: 'Bundesliga' // Event venue (here, sports league)
});

Testing product tracking

To test that products are correctly tracked with the data layer:

1. Go to the site.
2. Enable console logging for Frosmo Core.

3. Go to a page where products are tracked. If product view events are successfully triggered with the data layer, the browser console displays the following messages for each event:

   • EASY [conversion] log:: Product sent with the product type "<frosmoProductCategory>" and product name "<frosmoProductName>"
   • EASY [events] info:: product (contains the product data parsed from the product object)
   • EASY [events] info:: dataLayer (contains the product object passed to the data layer)

   The following figure shows an example of the produc view event messages.

   

4. If you want more details on a data layer call, select the Network tab in the developer tools, and check the setProductData request to the Optimizer API. If the status is 200, the request completed successfully.

   

Checking that the product data is in the Frosmo back end

If you want to verify that the product data you're tracking is correctly stored in the Frosmo back end, try retrieving the data with the Product API.

# Request the data for product ID 123456

GET https://example.frosmo.com/productApi?method=fetch&
    origin=shop_company_com&
    ids=["123456"]

# Response for product ID 123456, if the product exists

{
  "data": [
    {
      "id": "123456",
      "type": "Plushies",
      "name": "Cheetah Plushy",
      "created_at": "2020-05-07T14:31:59Z",
      "updated_at": "2020-05-13T15:53:34Z",
      "attributes": {
        "discountPrice": "9.99",
        "image": "/images/cheetah_plushy.png",
        "price": "19.99",
        "promotionLabel": "Weekend Sale",
        "url": "/products/123456"
      }
    }
  ]
}