Pages

For Frosmo to deploy the retail setup to your site, the site must be ready to be integrated with the Frosmo Platform. This guide walks you through the steps of making sure your site is ready.

Process overview

The following table summarizes the preparation process and shows you who's responsible for which task (either you or Frosmo, or both). The table also shows which tasks are required.

If you are at any point unsure how to proceed, contact Frosmo support, and we'll help you forward.

Table: Tasks for preparing your retail site for the Frosmo Platform

Preparing your site

The following tasks are your responsibility in the preparation process:

Adding the Frosmo scripts to the site

To integrate the Frosmo Platform with your site, add the two <script> elements provided by Frosmo to every page of your site. The following figure shows an example where the <script> elements have been added at the end of the <head> element in the page source code.

Frosmo script elements in the source code of a web page

Figure: Frosmo script elements in the source code of a web page

The first element loads the Frosmo Core library (frosmo.easy.js). The second element loads the Frosmo custom script (<site_origin>.js).

For instructions on how to add the elements to your site, see Adding the Frosmo scripts to your site.

For more information about the Frosmo scripts, see Technical overview.

Setting up events and metadata for product and visitor tracking

The retail setup relies on Universal Analytics (UA) Enhanced Ecommerce events for product and visitor tracking on a site. The setup also supports the Open Graph protocol for tracking additional data.

You need to ensure that your site sends at least the required Enhanced Ecommerce events from the appropriate pages. For example, every product page must send a Product details view event, so that the Frosmo Platform can store the data for the product as well as log a view for the product. In addition, it is recommended that you always define at least the page type with Open Graph metadata.

For more information about data tracking in the Frosmo Platform, see the Data tracking overview.

Supported Enhanced Ecommerce events

You must use the data layer to send Enhanced Ecommerce events.

The following table describes the Enhanced Ecommerce events supported by the Frosmo Platform and shows you which events are required by the retail setup. The table also provides data layer examples for sending the events.

Table: Enhanced Ecommerce events

EventDescriptionExample (data layer)Required
Product impressions

The visitor saw one or more products, but did not necessarily view their details.

Example: The visitor searched for products and viewed the search results, which listed a number of products.

Documentation: Google Developers

dataLayer.push({
    'ecommerce': {
        'impressions': [{
            'id': '123',
            'name': 'Coconut',
            'category': 'Food/Fruits',
            'brand': 'Mr. Fruit',
            'price': 5.00,
            'image': 'https://company.com/images/products/product-123.png',
            'url': 'https://company.com/products/123'
        }]
    }
});
X
Product details view

The visitor viewed the details of a product.

Example: The visitor viewed a product page.

Documentation: Google Developers

dataLayer.push({
    'ecommerce': {
        'detail': {
            'actionField': {'list': 'Food/Fruits'},
            'products': [{
                'id': '123',
                'name': 'Coconut',
                'category': 'Food/Fruits',
                'brand': 'Mr. Fruit',
                'price': 5.00,
                'image': 'https://company.com/images/products/product-123.png',
                'url': 'https://company.com/products/123'
            }]
        }
    }
});
X
Addition to cart

The visitor added a product to their shopping cart.

Example: The visitor added a product to their shopping cart from a product category page.

Documentation: Google Developers

dataLayer.push({
    'event': 'addToCart',
    'ecommerce': {
        'currencyCode': 'EUR',
        'add': {
            'products': [{
                'id': '123',
                'name': 'Coconut',
                'category': 'Food/Fruits',
                'brand': 'Mr. Fruit',
                'price': 5.00,
                'image': 'https://company.com/images/products/product-123.png',
                'url': 'https://company.com/products/123'
            }]
        }
    }
});

Checkout

The visitor started the checkout process for the products in their shopping cart.

Example: The visitor entered the first page in the checkout funnel.

Documentation: Google Developers

dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
        'checkout': {
            'actionField': {'step': 1},
            'products': [{
                'id': '123',
                'name': 'Coconut',
                'category': 'Food/Fruits',
                'brand': 'Mr. Fruit',
                'price': 5.00,
                'image': 'https://company.com/images/products/product-123.png',
                'url': 'https://company.com/products/123'
            }]
        }
    }
});

Purchase

The visitor completed the checkout process and successfully purchased one or more products.

Example: The visitor entered the final page in the checkout funnel.

Documentation: Google Developers

dataLayer.push({
    'ecommerce': {
        'purchase': {
            'actionField': {
                'id': '11111', // Transaction ID
                'revenue': '5.00'
            },
            'products': [{
                'id': '123',
                'name': 'Coconut',
                'category': 'Food/Fruits',
                'brand': 'Mr. Fruit',
                'price': 5.00,
                'image': 'https://company.com/images/products/product-123.png',
                'url': 'https://company.com/products/123'
            }]
        }
    }
});
X

The following table describes the supported product data for Enhanced Ecommerce events.

To get the most out of the Frosmo Platform and ensure optimal recommendation performance, include all product attributes listed in the table.

Table: Product data for Enhanced Ecommerce events

PropertyDescription
id

Product ID.

This property is required.

The ID of a given product must be consistent across all events. For example, the product impression and purchase events for the same product must use the same product ID.

nameProduct name.
category

Product category or type.

Define a hierarchy of parent and child categories as a breadcrumb using / as the separator. For example: Electronics/Televisions/OLED

brandBrand name for the product, or the company that produces the product.
priceUnit price for the product.
image

Product image URL.

You can alternatively define the product image URL using the og:image Open Graph property. For more information, see Supported Open Graph metadata.

url

Product page URL.

You can alternatively define the product page URL using the og:url Open Graph property. For more information, see Supported Open Graph metadata.

The Frosmo Platform also supports additional product attributes. As a rule, if you want to send additional attributes to the platform, use a product data feed. If you cannot use a feed, consult with Frosmo about a custom solution for sending the attributes directly from the site.

Supported Open Graph metadata

Using Open Graph metadata is optional. However, it is recommended that you always define at least the page type with Open Graph. Otherwise, Frosmo needs to implement custom tracking for page type. In addition, if you cannot or prefer not to provide the URLs of product pages and images in Enhanced Ecommerce events, define the URLs with Open Graph on the appropriate pages, if not already defined.

The following table describes the supported Open Graph metadata and where to define it on the site.

Table: Supported Open Graph metadata

PropertyDescriptionPage(s)Example
og:image

Product image URL.

The URL must be an absolute URL.

Product page
<meta property="og:image" content="https://company.com/images/products/product-123.png" />
og:type

Page type.

The possible values are:

  • page.front: Site home page
  • page.cart: Shopping cart page
  • page.category: Product category page
  • page.checkout: Checkout page
  • page.product: Product page
  • page.search: Search results page

Checkout page

Home page

Product page

Product category page

Search results page

Shopping cart page

<!-- Site home page -->
<meta property="og:type" content="page.front" />

<!-- Product page -->
<meta property="og:type" content="page.product" />
og:url

Product page URL.

The URL must be an absolute URL.

Product page
<meta property="og:url" content="https://company.com/products/123" />

Setting up recommendation placement on the site

The Frosmo Platform uses placements to position content – modifications – on a web page. Placements, in turn, use CSS selectors to define the target web page element or elements in relation to which modifications are placed. The recommendation modifications included in the retail setup all use predefined placements (which are also included in the setup). However, for the platform to correctly place the recommendations on a page, the CSS selectors of the placements must be customized for your site.

You and Frosmo together plan where to place the recommendations on your site. Once there's a plan, Frosmo needs to know the specific selectors to use in the recommendation placements. You have two options for defining the selectors:

  • If possible, add empty elements for the recommendations to the designated places in your site's source code. Use the following ID attributes for the elements:
    • Home page:
      • Recommendation 1: frosmo-home-reco-1
      • Recommendation 2: frosmo-home-reco-2
      • Recommendation 3: frosmo-home-reco-3
    • Product category page:
      • Recommendation 1: frosmo-category-reco-1
      • Recommendation 2: frosmo-category-reco-2
    • Product page:
      • Recommendation 1: frosmo-product-reco-1
      • Recommendation 2: frosmo-product-reco-2
  • If it's not possible to add the web page elements, Frosmo uses existing elements to determine the correct selectors.

Frosmo applies the selectors to the placements during deployment.

Updating a Content Security Policy to allow Frosmo content and scripts

The Frosmo Platform uses scripts to both inject content to your site and collect data from the site. If the site uses a Content Security Policy (CSP), you need to update the policy to allow Frosmo content. Otherwise, the platform will not function on your site.

Allowed content sources

The exact content sources you need to allow depend on the platform region where your site is hosted. The following table lists the sources by region.

Table: Frosmo sources to allow in a CSP

RegionDefault sourcesScript sources
Asiaasia.frosmo.com *.asia.frosmo.comhttps://dk0tzorg7uge9.cloudfront.net
EUinpref.com *.inpref.comhttps://d2wzl9lnvjz3bh.cloudfront.net
EU2eu2.frosmo.com *.eu2.frosmo.comhttps://d1225795gabrip.cloudfront.net
Finlandfi1.frosmo.com *.fi1.frosmo.comhttps://d2oarllo6tn86.cloudfront.net
USus.frosmo.com *.us.frosmo.comhttps://d22j8luu453d90.cloudfront.net

Example policy

You can define a CSP either with the Content-Security-Policy HTTP response header, which you set in your web server configuration, or with the HTML <meta> element, which you define directly on a web page. The HTTP response header is the recommended approach.

The following CSP configuration examples show you how to allow Frosmo content on a site hosted in the EU region.

Example: CSP for EU site using HTTP response header
Content-Security-Policy: default-src 'self' inpref.com *.inpref.com; script-src https://d2wzl9lnvjz3bh.cloudfront.net
Example: CSP for EU site using <meta> element
<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self' inpref.com *.inpref.com; script-src d2wzl9lnvjz3bh.cloudfront.net; style-src 'unsafe-inline'"
/>

Setting up a product data feed for the site

You can use a product data feed to:

  • Provide Frosmo with additional, relevant product information that is not available through product tracking on the site.
  • Ensure that the product data stored in the Frosmo product database is always up to date.

While not required, a product data feed is a useful complement to product tracking. Since product tracking relies on visitors viewing pages that contain and send product data, and since the product data on the site may be incomplete or out of date, a product data feed is an excellent way to ensure that the Frosmo Platform always has the latest and complete product data available for analytics and web content.

To read your product data feed, Frosmo needs:

  • URL of the feed
  • If used, authentication credentials for reading the feed (the platform currently supports the basic HTTP authentication scheme)
  • Description of the feed data structure if the structure is not self-explanatory

Once you've provided this information, Frosmo will set up and schedule a feed reader to retrieve and save the product data at set intervals. The available update intervals are: 1 day, 2 hours, 1 hour, 15 minutes. The feed reader will handle any conversions between your product data structure and the Frosmo product data structure.

Product data feed requirements

The product data feed must be in either the JSON or XML format.

It is recommended that the feed contain at least the following attributes for each product:

  • ID (must match the one in the Enhanced Ecommerce events)
  • Name
  • Category
  • Brand
  • Price, original
  • Price, discount
  • Page URL
  • Image URL
  • Number of units in stock

The following code is an example of the contents of a product data feed in the JSON format.

Example: Product data feed contents in JSON
[
  {
    "id": 1,
    "name": "Electric Planer Brandix KL370090G 300 Watts",
    "price": 509.32,
    "priceOrig": 749.00,
    "brand": "Wakita",
    "compareAtPrice": null,
    "images": [
      "https://company.com/images/products/product-1.jpg"
    ],
    "badges": [
      "new",
      "sale"
    ],
    "rating": 4,
    "reviews": 12,
    "availability": "In stock",
    "category": "Power Tools",
    "subcategory": "Woodworking",
    "features": [
      {
        "name": "Speed",
        "value": "750 RPM"
      },
      {
        "name": "Power Source",
        "value": "Cordless-Electric"
      },
      {
        "name": "Battery Cell Type",
        "value": "Lithium"
      },
      {
        "name": "Voltage",
        "value": "20 Volts"
      },
      {
        "name": "Battery Capacity",
        "value": "2 Ah"
      }
    ],
    "options": [],
    "stock": 7,
    "deliverTime": 3,
    "url": "https://company.com/products/1",
  },
  {
    "id": 2,
    "name": "IRadix DPS3000SY 2700 Watts",
    "price": 580.82,
    "priceOrig": 580.82,
    "brand": "Wakita",
    "compareAtPrice": null,
    "images": [
      "https://company.com/images/products/product-2.jpg"
    ],

// ...

For more information about the Frosmo product data structure, see Tracking products.

Sending Frosmo events to Google Analytics

If you're using Google Analytics (GA) on your site, you can have the Frosmo Platform track basic modification events (clicks, displays, true displays) also as GA events. This means that, for every basic event, the platform also triggers a corresponding GA event, allowing you to consolidate reporting and analytics in GA.

For instructions on how to send Frosmo events to Google Analytics, see System and service integrations.

Where to go next