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
| Task | You | Frosmo |
|---|---|---|
| Required | ||
| 1. Provide the Frosmo script elements and the Frosmo Control Panel user account credentials. | X | |
| 2. Add the Frosmo scripts to the site. | X | |
| 3. Make sure that Enhanced 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, add your Google Analytics tracking ID to the Frosmo Control Panel. | 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 figure shows an example where the <script> elements have been added at the end of the <head> element in the page source code.
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 solutions.
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
| Event | Description | Example (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
| Property | Description |
|---|---|
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. |
name | Product name. |
category | Product category or type. Define a hierarchy of parent and child categories as a breadcrumb using |
brand | Brand name for the product, or the company that produces the product. |
price | Unit price for the product. |
image | Product image URL. You can alternatively define the product image URL using the |
url | Product page URL. You can alternatively define the product page URL using the |
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
| 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.png" /> |
og:type | Page type. The possible values are:
| 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
- Recommendation 1:
- Product category page:
- Recommendation 1:
frosmo-category-reco-1 - Recommendation 2:
frosmo-category-reco-2 - Recommendation 3:
frosmo-category-reco-3
- Recommendation 1:
- Product page:
- Recommendation 1:
frosmo-product-reco-1 - Recommendation 2:
frosmo-product-reco-2
- Recommendation 1:
- Home page:
- 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.
Table: 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 |
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-srcdefault-srcframe-srcimg-srcscript-srcstyle-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.
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" 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 requirements
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 Enhanced 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.
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 (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
- 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.
