Preparing your retail site

Before Frosmo can deploy the retail setup to your site, the site must be ready to be integrated with the Frosmo Platform. This guide shows you how to prepare your site so that it 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 and which are optional.

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
Task	You	Frosmo
Required
1. Provide the Frosmo script elements and optionally the Frosmo Control Panel user account credentials.		✕
2. Add the Frosmo scripts to the site.	✕
3. Set up a product data feed for the site, if one does not already exist.	✕
4. Set up the events and metadata for product and visitor tracking.	✕
5. Set up recommendation placements on the site.	✕
6. Deploy the retail setup to the site.		✕
Optional
If the site uses a Content Security Policy (CSP), update the policy to allow Frosmo content and scripts.	✕
Set up Google Analytics integration.		✕

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

The retail setup uses a product data feed as the primary source for collecting data about the products on your site. A data feed is more reliable than product tracking on the site, since the latter 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. Using a data feed ensures that the Frosmo Platform always has the latest and complete data available for analytics and web content.

To read your product data feed, Frosmo needs:

Feed URL
Feed data structure description

If the data structure of the feed is not self-explanatory, Frosmo needs a description of the data structure.
Authentication credentials

If reading the feed requires authentication, Frosmo needs the proper authentication credentials. The Frosmo Platform currently supports the "Basic" and "Bearer" schemes for HTTP authentication.
Frosmo IP whitelisting

If access to the feed is restricted by IP address, Frosmo's IP addresses must be whitelisted for permanent access. Frosmo will provide the appropriate IP addresses on request.

Once you've provided this information, Frosmo will set up and schedule a feed reader to retrieve and save the product data at regular time 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.

The following table describes the minimum recommended set of attributes per product in the feed. For an example of a feed, see the code snippet below the table.

Minimum recommended set of product attributes in a feed
Attribute	Description	Required
Category	Product category or categories. This can also be a keyword, tag, type, or any other form of classification used on the site. Define a hierarchy of parent and child categories as a breadcrumb using `/` as the separator. note The category or categories must be the same as the ones sent for the product from the site.	✕
ID	Product ID. note The ID must be the same as the one sent for the product from the site.	✕
Availability	Product availability in the web store.
Brand	Brand name for the product, or the company that produces the product.
Image URL	Product image URL or URLs.
Name	Product name.
Page URL	Product page URL.
Price, current	Current unit price for the product, such as a discount price.
Price, original	Original unit price for the product, before any discounts.

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": 123,
    "name": "Electric Planer KL370090G 300 Watts",
    "price": 599.00,
    "priceOrig": 799.00,
    "brand": "Wakita",
    "images": [
      "https://company.com/images/products/product-123-large.webp",
      "https://company.com/images/products/product-123-medium.webp",
      "https://company.com/images/products/product-123-small.webp"
    ],
    "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/123",
  },
  {
    "id": 456,
    "name": "IRadix DPS3000SY 2700 Watts",
    "price": 579.00,
    "priceOrig": 579.00,
    "brand": "Wakita",
    "images": [
      "https://company.com/images/products/product-456-large.webp",
      "https://company.com/images/products/product-456-medium.webp",
      "https://company.com/images/products/product-456-small.webp"
    ],
    // ...
  },
  // ...
]

Setting up events and metadata for product and visitor tracking

The retail setup uses ecommerce events for collecting product and visitor data on a site. You can use, for example, Google Analytics (GA) ecommerce events. The setup also supports the Open Graph protocol for collecting additional data.

note

Product tracking is supplementary to a product data feed.

You need to ensure that your site sends at least the required events from the appropriate pages. For example, every product page must send a View product details 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 GA data layer examples for sending the events. For more information about the product data defined in the events, see Required product attributes in ecommerce events.

Ecommerce events
Event	Description	Example (GA data layer)	Required
View product list	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. See: GA documentation	`dataLayer.push({ event: 'view_item_list', ecommerce: { items: [{ item_id: '123', item_category: 'Power Tools', item_category2: 'Woodworking' }] } });`	✕
View product details	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. See: GA documentation	`dataLayer.push({ event: 'view_item', ecommerce: { currency: 'EUR', value: 599.00, items: [{ item_id: '123', item_category: 'Power Tools', item_category2: 'Woodworking' }] } });`	✕
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. See: GA documentation	`dataLayer.push({ event: 'purchase', ecommerce: { transaction_id: '11111', currency: 'EUR', value: 1797.00, items: [{ item_id: '123', price: 599.00, quantity: 3 }] } });`	✕
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. See: GA documentation	`dataLayer.push({ event: 'add_to_cart', ecommerce: { currency: 'EUR', value: 599.00, items: [{ item_id: '123', price: 599.00, quantity: 3 }] } });`
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. See: GA documentation	`dataLayer.push({ event: 'begin_checkout', ecommerce: { currency: 'EUR', value: 1797.00, items: [{ item_id: '123', price: 599.00, quantity: 3 }] } });`

Required product attributes in ecommerce events

The following table describes the required product attributes for ecommerce events and shows you in which events each attribute is required.

note

The actual attribute names that you need to use in your code depend on your ecommerce event scheme. The following table uses GA event parameter names.

note

The Frosmo Platform also supports additional product attributes, which you can provide in the product data feed.

Product attributes for ecommerce events
Attribute	Description	Events
`item_id`	Product ID. note The ID of a given product must be consistent across all events. For example, the product view and purchase events for the same product must use the same product ID. note The ID must be the same as the one provided for the product in the product data feed.	Add to cart Checkout Purchase View product details View product list
`item_category` `item_category2` `item_category3` `item_category4` `item_category5`	Product category or categories. This can also be a keyword, tag, type, or any other form of classification used on the site. If the category is hierarchical, consisting of a main category and subcategories, such as `Power Tools/Woodworking`, define the category either as a single property with `/` as the separator or as multiple properties, depending on your ecommerce event scheme: Single property: `item_category: 'Power Tools/Woodworking'` Multiple properties: `// GA4 item_category: 'Power Tools', item_category2: 'Woodworking'` note The category or categories must be the same as the ones provided for the product in the product data feed.	View product details View product list
`price`	Current unit price for the product, such as a discount price.	Add to cart Checkout Purchase
`quantity`	Number of units included in the event, such as the number of units purchased.	Add to cart Checkout Purchase

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 the 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
Property	Description	Page(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-large.webp" />`
`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 placements on the site

The Frosmo Platform uses placements to position 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 selectors of the placements must be customized for your site.

You and Frosmo first plan where on your site to place the recommendations. 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:

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 feasible or possible to add the web page elements, Frosmo uses existing elements to determine the correct selectors.

note

The first option is the recommended one. The second option should only be considered in cases where the first option would result in significant delay in preparing the site.

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 Frosmo Platform region where your site is hosted. The following table lists the sources by region.

Frosmo content sources to allow in a CSP
Region	Content 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`

To find out your region, see the FAQ.

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;"
/>

Sending Frosmo events to Google Analytics

If you're using Google Analytics (GA) on your site, you can have the Frosmo Platform send visit-related events to GA, for example, whenever a visitor starts a new session or whether the visitor belongs to the comparison group.

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

Where to go next

Learn about best practices for getting the most out of the integration between your site and the Frosmo Platform.
Learn how to get started with developing your site with the Frosmo Platform, starting with how to log in to the Frosmo Control Panel.
Learn about how to further set up the Frosmo Platform for your organization and site.
Explore the documentation to learn even more about the Frosmo Platform and what you can do with it.

Process overview​

Preparing your site​

Adding the Frosmo scripts to the site​

Setting up a product data feed for the site​

Product data feed setup​

Setting up events and metadata for product and visitor tracking​

Supported ecommerce events​

Required product attributes in ecommerce events​

Supported Open Graph metadata​

Setting up recommendation placements on the site​

Updating a Content Security Policy to allow Frosmo content and scripts​

Frosmo content sources​

Affected policy directives​

Example policy​

Sending Frosmo events to Google Analytics​

Where to go next​

Process overview

Preparing your site

Adding the Frosmo scripts to the site

Setting up a product data feed for the site

Product data feed setup

Setting up events and metadata for product and visitor tracking

Supported ecommerce events

Required product attributes in ecommerce events

Supported Open Graph metadata

Setting up recommendation placements on the site

Updating a Content Security Policy to allow Frosmo content and scripts

Frosmo content sources

Affected policy directives

Example policy

Sending Frosmo events to Google Analytics

Where to go next