Preparing your iGaming site

Before Frosmo can deploy the iGaming 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 iGaming 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 game data feed for the site, if one does not already exist.	✕
4. Set up the events and metadata for game and visitor tracking.	✕
5. Set up recommendation placements on the site.	✕
6. Deploy the iGaming 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 a mechanism for sending customer information to the Frosmo Platform.	✕
Set up Google Analytics integration.		✕
Participate in Frosmo training.	✕

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.

note

If your site has content inside <iframe> elements whose origin differs from that of the containing page, and if you want the Frosmo Platform to track and personalize that content, add the Frosmo scripts also inside the <iframe> elements.

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

Setting up a game 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 iGaming setup uses a game data feed as the primary source for collecting data about the games on your site. A data feed is more reliable than game tracking on the site, since the latter relies on visitors viewing pages that contain and send game data, and since the game 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.

If you have distinct sets of games for different sites or environments, provide separate feeds for them.

To read your game 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 game 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 game data structure and the Frosmo product data structure, which the platform uses also for game data.

Game data feed setup

The game 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 game in the feed. For an example of a feed, see the code snippet below the table.

Minimum recommended set of game attributes in a feed
Attribute	Description	Required
Category	Game category or categories. This can also be a keyword, tag, theme, 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. For example: `Jackpots/Slot Jackpots` note The category or categories must be the same as the ones sent for the game from the site.	✕
ID	Game ID. note The ID must be the same as the one sent for the game from the site.	✕
Brand	Brand name for the game, or the company that develops or provides the game.
Features	Game features.
Image URL	Game image URL.
Launch URL	Game launch URL.
Name	Game name.
Volatility	Game volatility.

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

Example: Game data feed contents in JSON
[
  {
    "id": 123,
    "name": "Agent Jane Blonde Returns",
    "type": "Slot Machine",
    "brand": "EntNet",
    "category": "Slots/Themed",
    "themes": [
      "movie"
    ],
    "badges": [
      "new"
    ],
    "images": [
      "/images/products/agent-jane-blonde-returns.webp"
    ],
    "launch": "https://entnet.com/games/123/launch",
    "features": [
      "respins",
      "wilds"
    ],
    "reels": 5,
    "paylines": 15,
    "rtp": 96.5,
    "volatility": "medium",
    "rating": 4,
    "reviews": 12
  },
  {
    "id": 456,
    "name": "Arabian Nights",
    "type": "Slot Machine",
    "brand": "EntNet",
    "category": "Jackpots/Slot Jackpots",
    // ...
  },
  // ...
]

Setting up events and metadata for game and visitor tracking

The iGaming setup uses specific data layer events for collecting game and visitor data on a site. The setup also supports the Open Graph protocol for collecting additional data.

note

Game tracking is supplementary to a game data feed.

You need to ensure that your site sends at least the required events from the appropriate pages. For example, any page where visitors can launch a game must send a Game launch event for the game when it's launched. 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 iGaming events

You must use the data layer to send iGaming events.

note

If your site already has events set up that provide the same data as the iGaming events, the Frosmo Platform can use the existing events. You do not need to create duplicate events. For example, if your site already sends the necessary data in Google Analytics (GA) events, the Frosmo Platform can capture those events.

tip

The iGaming events are conceptually similar to GA ecommerce events. If you have GA running on your site, the iGaming events are also sent to Google.

The following table describes the iGaming events supported by the Frosmo Platform and shows you which events are required by the iGaming setup. The table also provides data layer push templates for sending the events. For more information about the event data, see iGaming event data.

iGaming events
Event	Description	Data layer push	Required
Game impressions	The visitor saw one or more games but did not launch any. Example: The visitor opened a game category page, or the visitor searched for games and viewed the search results, which listed a number of games from different categories. This event tells the platform which games a visitor sees on a game category or search page. note The platform treats this event as an item list view.	`dataLayer.push({ event: 'gameImpressions', products: [{ gameId: 'Game ID', category: 'Category/Subcategory', image: 'https://vendor.gameimage.url', launchUrl: 'https://vendor.gamelaunch.url' name: 'Game Name', vendor: 'Vendor', }] });`	✕
Game launch	The visitor launched a game. Example: The visitor selected a game from a category page or from search results, launching the game. This event allows the platform to track which games visitors play the most. This, in turn, allows the platform to recommend (a) the most popular games and (b) similar or otherwise related games, where visitors who played game A also played games B, C, and so on. This event also allows the platform to collect game data, which is a prerequisite for generating game recommendations. note The platform treats this event as an item view.	`dataLayer.push({ event: 'gamePlay', products: [{ gameId: 'Game ID', category: 'Category/Subcategory', image: 'https://vendor.gameimage.url', launchUrl: 'https://vendor.gamelaunch.url' name: 'Game Name', vendor: 'Vendor', }] });`	✕
Deposit	The visitor completed a deposit. Example: The visitor transferred money from their bank account to their digital wallet on your site. This event allows the platform to track when and how much money registered visitors reserve for gaming on the site. This, in turn, allows the platform to drive those visitors to spend that money accordingly. If you cannot or prefer not to provide the amount of money deposited, send the event with `amount` set to 0. The event provides the platform with valuable information even without the amount. note If you cannot provide a deposit event but have another mechanism available for tracking deposits, the Frosmo Platform can use that mechanism. However, using a mechanism other than a deposit event must be separately agreed and planned with Frosmo.	`dataLayer.push({ event: 'deposit', amount: 123.45, option: 'Payment Method' });`	✕
Game spin	The visitor placed a wager or otherwise made a purchase in a game. Example: The visitor placed a bet and spun the wheel in a roulette game. This event allows the platform to track which games visitors spend money on. This provides a stronger scent of visitor interest than, for example, tracking `gameImpressions`, and allows the platform to recommend popular games with greater confidence. note The platform treats this event as a transaction. note While optional, it is recommended that you send this event.	`dataLayer.push({ event: 'gameSpin', products: [{ gameId: 'Game ID' amount: 123.45, }] });`
Registration	The visitor completed the registration process and created a new user account. Example: The visitor signed up as a new user to your site. This event allows the platform to track the conversion of anonymous visitors to registered ones, which is both a user journey milestone and often a key performance indicator (KPI). In terms of the user journey, this event allows the platform to target unregistered and registered visitors with different recommendations.	`dataLayer.push({ event: 'registrationSuccess' });`

iGaming event data

The following table describes the supported data for iGaming events. The table also show for which event types each data property is valid.

tip

To get the most out of the Frosmo Platform and ensure optimal recommendation performance, include all the data listed for each event type.

iGaming event data
Property	Description	Event types
`event`	Event type. The possible values are: Deposit: `deposit` Game impressions: `gameImpressions` Game launch: `gamePlay` Game spin: `gameSpin` Registration: `registrationSuccess`	All
`amount`	Amount of money deposited. If you cannot or prefer not to provide the amount, set this property to 0.	`deposit`
`option`	Payment method the visitor used to make the deposit.	`deposit`
`products`	List of games included in the event. The list is an array of game data objects. Each object contains the details of a single game.	`gameImpressions` `gamePlay` `gameSpin`

Game data object

The following table describes the game data object for the products property in iGaming event data. The object contains the details of a single game. The table also show for which event types each data property is valid.

note

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

Game data object
Property	Description	Event types
`amount`	Amount of money the visitor wagered.	`gameSpin`
`category`	Game category or categories. This can also be a keyword, tag, theme, 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. For example: `Jackpots/Slot Jackpots` note The category or categories must be the same as the ones provided for the game in the game data feed.	`gameImpressions` `gamePlay`
`gameId`	Game ID. note The ID of a given game must be consistent across all events. For example, the game impressions and game launch events for the same game must use the same game ID. note The ID must be the same as the one provided for the game in the game data feed.	`deposit` `gameImpressions` `gamePlay`
`image`	Game image URL.	`gameImpressions` `gamePlay`
`launchUrl`	Game launch URL.	`gameImpressions` `gamePlay`
`name`	Game name.	`gameImpressions` `gamePlay`
`vendor`	Brand name for the game, or the company that develops or provides the game.	`gameImpressions` `gamePlay`

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 game image and launch URLs in the game data feed or in data layer events, 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`	Game image URL. The URL must be an absolute URL.	Game page	`<meta property="og:image" content="https://vendor.com/images/games/game-123.webp" />`
`og:type`	Page type. The possible values are: `page.category`: Game category page `page.front`: Site home page `page.product`: Game page	Game category page Game page Home page	`<!-- Site home page --> <meta property="og:type" content="page.front" />`
`og:url`	Game launch URL. The URL must be an absolute URL.	Game page	`<meta property="og:url" content="https://vendor.com/games/123/launch" />`

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 iGaming 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
- Game category page:
  - Recommendation 1: frosmo-category-reco-1
  - Recommendation 2: frosmo-category-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 customer information to Frosmo

The Frosmo Platform can use customer information for visitor segmentation and content personalization. If you have relevant customer information stored in, for example, a customer relationship management (CRM) system, and if you want to make the information available to Frosmo, let us know, and we'll figure out together the best way to send the information to the platform.

An easy way to send the information is through the data layer. The following example shows a data layer push for a login event with associated customer information.

dataLayer.push({
    event: 'login',
    user_id: '9876ad45ef9',
    promotions: [1234, 5678, 9012],
    segments: [1212, 3434, 5656, 7878],
    balance: 1234.56,
    age: 56,
    country: 'GB',
    language: 'en'
});

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 game data feed for the site​

Game data feed setup​

Setting up events and metadata for game and visitor tracking​

Supported iGaming events​

iGaming event data​

Game data object​

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 customer information to Frosmo​

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 game data feed for the site

Game data feed setup

Setting up events and metadata for game and visitor tracking

Supported iGaming events

iGaming event data

Game data object

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 customer information to Frosmo

Sending Frosmo events to Google Analytics

Where to go next