Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 1.3

This document provides a technical overview of the architecture and key features of the Frosmo platform. For a high-level introduction to what the platform offers, see Introduction to the Frosmo platform.

Table of Contents
maxLevel2

...

The Frosmo platform is a web UI development solution for improving website functionality and personalizing online user experience. For an introduction to the platform, see Introduction to the Frosmo platform.

The following figure introduces the basic architecture and information flows of the Frosmo platform.

...

  • The Frosmo JavaScript library handles the modifications to the websitesite, manages segmentation, collects usage data, and fetches content to display from the back end.
  • The Frosmo back end stores the usage data collected by the Frosmo JavaScript library and processes the data for reporting and analysis purposes. The back end also stores operational data related to modifications, segments, and other configurable resources.
  • The Frosmo Control Panel manages the Frosmo JavaScript library (and thereby how the website site is modified and improved) and pools analytics data from the Frosmo back end.

...

Figure: Frosmo platform architecture and information flows in detail

For more information, see:

Frosmo JavaScript library

The Frosmo JavaScript library is the Frosmo presence in the front end. The library runs on top of a customer website site in the visitor's browser, integrating the site with the Frosmo platform. The library provides both the framework for the Frosmo platform to operate on the site and Frosmo's custom solutions for improving the site. The library is platform-independent and can be used together with existing web application frameworks, such as Angular and React.

...

  • The Frosmo Core library implements the core functionality and services of the Frosmo JavaScript solution. The library manages modifications and segmentation, collects usage data, and fetches modification content from the back end. The library is the same for all customers and sites.
  • The Frosmo custom script contains the configurations and custom code specific to a single site. These are used to modify the content and functionality of the site. The custom script runs on top of the Frosmo Core library and is unique to each site (or group of sites managed as a single site). Changes made to a site in the Control Panel are automatically reflected in the custom script for that site.

The browser loads the Frosmo JavaScript library is loaded in the browser through two <script> elements placed directly in a web page's HTML source code, one for the Frosmo code. The first element loads the Core library and the other for second one loads the Frosmo custom script for the site. Apart from adding these two elements to every page on a site, no other changes to the web page are required to use the Frosmo platform. For more information, see Adding the Frosmo scripts to your site.

The Frosmo JavaScript library is optimized for fast loading. The Frosmo Core library is only 50 KB in size, while the Frosmo custom script usually ranges between 16-32 KB.

...

By default, the Frosmo JavaScript library files are delivered through Amazon CloudFront, which serves the files using the CloudFront servers closest to the website visitor. Frosmo can also use other CDNs based on customer requirements.

The Frosmo platform uploads the custom script and associated media files (ones added directly to modifications) to the CDN every time they need to be updated, that is, every time something on your the site is changed using the Control Panel. The assets are always exported to CloudFront and, when needed, copied from CloudFront to other CDNs.

...

The data layer allows you to pass information from a web page to the Frosmo JavaScript library. The library then sends the information to the Frosmo back end. The library can also use the information directly in the browser to, for example, display content or manage segmentation. The exact behavior depends on how the Frosmo platform has been configured for your the site.

You can pass information about the following events and items through the data layer:

...

The Control Panel is responsible for managing the Frosmo JavaScript library. Changes made to a site in the Control Panel are automatically reflected in the custom script for that site.

The Control Panel uses the Graniitti API to access the Frosmo back end, and to deploy the Frosmo custom script to the CDN.

...

The Message API retrieves modification content to be displayed to visitors from the Frosmo back end. The , so that the content can be displayed in the browser. The Message API uses segmentation data and previous usage data to dynamically select suitable content for the visitor.

...

Optimizer API

The Optimizer API takes the data collected by receives and stores usage data from websites. In other words, the Frosmo JavaScript library and stores it in the Frosmo back end. The data is stored using a dedicated process, which ensures that no data is lost even if the website or the messaging component of the Frosmo JavaScript library becomes unavailablecollects usage data in the visitor's browser and sends the data to the back end by calling the Optimizer API. In the back end, the Optimizer API stores the data for further processing.

To secure the data during transit between the website site and the Frosmo back end, the Frosmo JavaScript library communicates with the Optimizer API over an HTTPS connection.

...

A custom API is a customer-specific API created for a specific specialized purpose that cannot be realized using the other APIs or the Frosmo JavaScript library. Frosmo  Frosmo creates custom APIs as needed.

Custom APIs are typically used to:

  • Implement product recommendations based on product tracking data retrieved from the Frosmo back end or from a customer's feed, or both.
  • Return specialized data to the browser, such as data stored in a customer's back-end system or data read from a feed.
  • Send data to another service, such as email addresses to a mailing list for marketing automation purposes.

Modifications

In the Frosmo platformcontext, a modification is a real-time change to a web page designed to improve the usability and user experience of the site and guide visitors to complete a conversion. For example, modifications can be used to improve the sales funnel of an eCommerce site, leading to an increased conversion rate. In technical terms, a modification is a managed piece of code that changes the content, appearance, or behavior of a web page directly in the visitor's browser. The code can consist of HTML, CSS, and JavaScript, in any combination. The purpose of a modification is to improve the user experience or usability of a website in some specific way. For example, modifications can be used to improve the sales funnel of an eCommerce site, leading to an increased conversion rate.

The Frosmo platform can use the data stored in the browser's local storage and cookies, such as segmentation data, to determine which modifications to show to the visitor. Modifications can also use data stored in the Frosmo back end.

...

  • Add new content, such as personalized product recommendations or content generated from data feeds.
  • Modify existing content, such as images or links.
  • Remove unnecessary content, such as distracting elements, site navigation elements in shopping carts, or surplus elements in mobile-optimized layouts.
  • Modify the layout and styling of a web page.
  • Add custom JavaScript code that interacts with custom APIs.

...

  • Automatic modifications generate content automatically from a data feed or an API, or from existing content managed elsewhere on the websitesite. The generated content is first stored in the Frosmo back end and then retrieved from there for display.
  • Basic modifications are used for content that is retrieved from the Frosmo back end and displayed only after the browser has rendered the web page.
  • Cached modifications are used for static content that must be inserted into the web page code before the page is rendered in the browser. (Like with all modifications, the content is maintained in the Frosmo back end, but unlike with the other modification types, the content is inserted in full in the Frosmo custom script for quick fast access.)
  • Recommendations generate content based on the visitor's previous behavior on the websitesite.

Frosmo platform administrators manage modifications in the Control Panel.

In terms of graphics and other media, Frosmo prefers to use the existing content on the site or content procured by the customer through their own CMS system. Customers deliver the content to Frosmo by providing us with access to their content management system (CMS). The Frosmo team then adds the content to the site using the Control Panel.

Conversion and transaction tracking

A conversion is any pre-determined action you want your website visitors to take. This can be, for example, a purchase of a product, signing up for a newsletter, or watching a video. You can define a conversion to be basically any variable in visitor behavior that you want to track and measure.

The Frosmo platform counts purchase-related conversions on a transaction basis. The platform counts each transaction, a completed purchase of one or more products, as a single conversion.

Example: A visitor of an online book seller adds five different books to their shopping cart, with two copies of one book, for a total of six items. The visitor proceeds to checkout and completes a purchase of all six items. The Frosmo platform counts the purchase – a transaction – as a single conversion. The visitor then adds one more book to their now-empty cart and completes another purchase. The Frosmo platform counts the second purchase of a single item as a single conversion, too.

Data gathering

The Frosmo JavaScript library collects usage data in the visitor's browser and sends the data to the Frosmo back end over an HTTPS connection. The library sends the data in the background so as not to interfere with the visitor's user experience. The Frosmo JavaScript library also stores selected data locally in the browser.

The data can be categorized into:

  • Product data
  • Segmentation data
  • Visitor data

The Frosmo JavaScript library also stores selected data locally in the browser.The data is mainly used for content targeting.

...

The Frosmo platform can integrate with customers' external back-end systems and other online services, such as analytics, marketing automation, and content management systems.

Integrations are typically used for synchronizing segmentation data between the Frosmo platform and a customer's an external back-end system, or for using the collected usage data outside the customer websitesite. Integrations also allow the Frosmo platform to input data about displayed or clicked content directly into a web analytics tool, such as Google Analytics.

...

  • Analytics tools: By default, the changes made on to a site using the Frosmo platform are not included in web analytics tracking. It is therefore important to integrate Frosmo to the platform with the analytics tools you use so used on the site, so that you have a clear understanding of what is happening on your site.
  • Marketing automation solutions: The Frosmo platform can help you to make the most of it by effectively gathering data you gather and process segmentation and visitor data for marketing automation systems, which can then use the data to target your marketing efforts to the appropriate audienceaudiences. You  You can set up integrations with, for example, ad platforms and email services.
  • Data management platform (DMPs): As with many other systems, extracting useful data from DMPs can be laborious and requires the use of multiple APIs. The Frosmo platform can be used as a master API, an interface for all data calls between your a DMP and your websitea site.

Here are some examples of common integrations:

  • Add visitor email addresses to specific mailing lists based on segmentation.
  • Use email notifications to provide shopping cart contents for interrupted shopping sessions ("abandoned carts").
  • Retrieve information from and store information to external databases. For example, retrieve user data from a customer's an external database and use the data to personalize website site content, or send segmentation data to a customer's an external database.
  • Retrieve information from data feeds, such as product data feeds, or back-end systems, such as customer relationship management (CRM) systems. For example, retrieve information about new products or products currently on sale from a data feed, and generate corresponding product recommendations to visitors.

...

The Frosmo platform can limit customer access user access to the Control Panel by IP address. This restricts means that users can access to the customer's dedicated Control Panel to Frosmo premises and to the IP addresses specified by the customeronly from the designated IP addresses and from Frosmo premises.

The Frosmo platform can force all content that is provided through the Frosmo JavaScript library to the customer website a site to load resources only from specified domains. When this feature is enabled, the Frosmo platform validates all modification content before it is saved to the Frosmo back end. If the content contains elements that could be used to load or inject resources from non-authorized domains, the content is rejected.

For more information, see Security overview.

Browsers and other software

For information about how the Frosmo platform works with browsers and other software, see:

Supported browsers

The following tables list the officially supported browsers for the Frosmo JavaScript library and the Control Panel. Both may work on other browsers and browser versions as well, but Frosmo does not officially support these.

...

BrowserVersion
FirefoxLatest version
Google ChromeLatest version
Internet Explorer (IE)11 or newer
Microsoft EdgeLatest version

Ad

...

blockers and content filtering software

The Frosmo platform is not on any known basic ad - blocking lists.

Some privacy filter lists and software block the Frosmo platform, for example, EasyList, :

  • EasyPrivacy
  • F-Secure Freedome VPN (only when tracking protection is enabled

...

  • , and only for pages that use HTTP)
  • Ghostery (when the "Beacon" category is selected)

...

  • Opera's built-in ad blocker (which uses EasyPrivacy)

Private browsing

The Frosmo platform interprets an incognito browsing session as a new visitor. This means that no segmentation data or other data previously stored in the browser is available for the session. Each new incognito session is counted as a new visitor.