Skip to main content

Preparing your retail site

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.

Tasks for preparing your retail site for the Frosmo Platform
TaskYouFrosmo
Required

1. Provide the Frosmo script elements and optionally the Frosmo Control Panel user account credentials.

X

2. Add the Frosmo scripts to the site.

X

3. Make sure that ecommerce events and optionally page metadata are correctly set up on your site.

X

4. Set up recommendation placement on the site.

X

X

5. Deploy the retail setup to the site.

X

Optional

If your site uses a Content Security Policy (CSP), update the policy to allow Frosmo content and scripts.

X

Set up a product data feed for the site, if one does not already exist, and provide Frosmo with the URL of the feed.

X

To see Frosmo events in Google Analytics, set up Google Analytics integration.

X

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 code snippet shows an example where the <script> elements have been added at the end of the <head> element in the page source code.

    <!-- Load the Frosmo Platform -->
    <script type="text/javascript" charset="utf-8" src="//d2wzl9lnvjz3bh.cloudfront.net/frosmo.easy.js" async></script>
    <script type="text/javascript" charset="utf-8" src="//d2wzl9lnvjz3bh.cloudfront.net/sites/company_com.js" async></script>

</head>

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 ecommerce events for product and visitor tracking on a site. You can use, for example, Universal Analytics (UA) Enhanced Ecommerce events or Google Analytics 4 ecommerce events. The setup also supports the Open Graph protocol for tracking additional data.

You need to ensure that your site sends at least the required 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 Data tracking solutions.

Supported ecommerce events​

You must use the data layer to send ecommerce events.

The following table describes the ecommerce events supported by the Frosmo Platform and shows you which events are required by the retail setup. The table also provides Universal Analytics (UA) data layer examples for sending the events as well as links to Google's ecommerce event documentation.

Ecommerce events
EventDescriptionExample (UA 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.

note

The platform treats this event as an item list view.

Google's documentation:

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.

note

The platform treats this event as an item view.

Google's documentation:

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

Add-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.

note

The platform treats this event as an add-to-cart cart action.

Google's documentation:

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.

Google's documentation:

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.

note

The platform treats this event as a transaction.

Google's documentation:

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 ecommerce events.

tip

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

Product data for ecommerce events
PropertyDescription

id

Product ID.

This property is required.

note

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.

name

Product 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

brand

Brand name for the product, or the company that produces the product.

price

Unit price for the product.

image

Product image URL.

tip

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.

tip

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

note

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 provide product image and page URLs in ecommerce events or in a product data feed, define the URLs with Open Graph.

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

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

      • Recommendation 4: frosmo-home-reco-4

    • Product category page:

      • Recommendation 1: frosmo-category-reco-1

      • Recommendation 2: frosmo-category-reco-2

      • Recommendation 3: frosmo-category-reco-3

    • 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) to control where resources can be loaded, you must update the policy to allow Frosmo content sources. Otherwise, the platform will not function on your site.

Frosmo 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.

Frosmo content sources to allow in a CSP
RegionContent sources

Asia

asia.frosmo.com *.asia.frosmo.com dk0tzorg7uge9.cloudfront.net

EU

inpref.com *.inpref.com d2wzl9lnvjz3bh.cloudfront.net

EU2

eu2.frosmo.com *.eu2.frosmo.com d1225795gabrip.cloudfront.net

Finland

fi1.frosmo.com *.fi1.frosmo.com d2oarllo6tn86.cloudfront.net

US

us.frosmo.com *.us.frosmo.com d22j8luu453d90.cloudfront.net

Affected policy directives​

You must update the following policy directives, if used on the site, to include the Frosmo content sources for your platform region:

  • connect-src

  • default-src

  • frame-src

  • img-src

  • script-src

  • style-src

The exact set of directives that you need to update depends on what's defined in the site's CSP configuration. For example, if the CSP only defines the default-src directive, update only that directive to include the Frosmo content sources. Do not define additional directives just for Frosmo content. By comparison, if the CSP defines all six directives listed above, update all of them to include the Frosmo sources.

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. The examples include both the original configuration without Frosmo content sources and the updated configuration with Frosmo sources.

Example: CSP for EU site using HTTP response header
# Original CSP
Content-Security-Policy: default-src 'self';
                         script-src 'self' app.company.com;


# CSP updated for Frosmo content
Content-Security-Policy: default-src 'self' inpref.com *.inpref.com https://d2wzl9lnvjz3bh.cloudfront.net;
                         script-src 'self' app.company.com inpref.com *.inpref.com https://d2wzl9lnvjz3bh.cloudfront.net;
Example: CSP for EU site using <meta> element
<!-- Original CSP -->
<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self' app.company.com;"
/>

<!-- CSP updated for Frosmo content -->
<meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self' inpref.com *.inpref.com https://d2wzl9lnvjz3bh.cloudfront.net; script-src 'self' app.company.com inpref.com *.inpref.com https://d2wzl9lnvjz3bh.cloudfront.net;"
/>

Setting up a product data feed for the site​

note

Data feeds are a common feature on today's websites, so you may already have one available, in which case you would only need to provide Frosmo access to it. Check with your system administrator before setting up a new data feed.

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" and "Bearer" schemes for HTTP authentication)

  • 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 setup​

The product data feed must be in either the JSON or XML format. Optionally, the feed can be gzip-compressed.

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

  • ID (must match the one in the ecommerce events)

  • Availability

  • Brand

  • Category

  • Image URL

  • Name

  • Page URL

  • Price, discount

  • Price, original

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

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",
    "categories": [
      "Power Tools/Woodworking",
      "Campaigns/Summer Building"
    ],
    "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 with the data layer.

Sending Frosmo events to Google Analytics​

If you're using Google Analytics (GA4) on your site, you can have the Frosmo Platform send basic modification events (clicks, displays, true displays) and visit events (whenever a visitor starts a new session) to GA4. This means that, for every basic modification event and visit event, the platform also triggers a corresponding GA4 event, allowing you to consolidate reporting and analytics in GA4.

Frosmo will set up the integration for your site. This requires access to your GA4.

Where to go next​