In the Frosmo Platform, a modification is a real-time change on a web page designed to personalize or otherwise improve the user experience or usability of a website and guide visitors to complete a conversion. In technical terms, a modification is a managed piece of code that changes the content, appearance, or behavior of a page directly in the visitor's browser. Personalized modifications are based on the visitor attributes that can be either rule-based (segmentation) or data-based (machine learning algorithms). You can also use modifications to collect usage data from the site.
Here are a few examples of common modifications:
- Display personalized content based on the visitor's behavior or context.
- Add new content, such as product recommendations or content generated from data feeds.
- Modify existing content, such as banners.
- Remove unnecessary content, such as distracting elements, site navigation elements in shopping carts, or surplus elements in mobile-optimized layouts.
- Test the layout and styling of and element or a page.
Before you start working with modifications, see:
How modifications work
A modification configuration defines all the settings for a modification. The configuration determines the who, where, what, and when of displaying a modification.
The main parts of the configuration are:
- Segments. Rules for determining who should see the modification. For example, you can define that the modification is available only to visitors who have visited the site three times within the past week, and have viewed product pages for coffee makers. You can create a segment combination using as many segments as you want. You can also forgo segments and define that the modification is available to all the visitors on the site.
- Placement. Rules for determining where on the site in which the modification is placed. For example, you can define that the modification is placed after a specific element on all category pages of the site. Every modification is attached to a single placement.
The configuration can also have additional conditions, such as:
- Schedule. Rules for determining when the modification is available. For example, you can define that the modification is available only on Fridays, Saturdays, and Sundays, from 6 PM to 12 PM.
- Advanced settings. Rules for further defining how and when the modification is available. For example, you can define:
- Device types on which to show the modification
- Display delay and interval
- Maximum number of times the modification is shown to a visitor
This is how modifications work in the visitor's browser:
- The visitor navigates to a page.
- The browser starts loading the page.
- The browser loads the Frosmo scripts, allowing the Frosmo Platform to interact with the page.
- The platform checks if there are any valid placements for the page.
- If there are valid placements, the platform checks if the placements have modifications assigned to them and whether those modifications are valid for the current visitor.
- If the placements have valid modifications, the platform retrieves the content of the modifications (either from the back end or directly from the custom script) and then renders the content to the page.
- The browser finishes loading the page.
Figure: Frosmo Platform interaction with a website
In the page code, the content of a modification gets rendered as follows:
HTML is rendered inside a Frosmo-specific
<div> element. The element is placed based on the rules defined in the placement. In the source code,
message stands for a modification, and
position stands for a placement.
- CSS is rendered inside a Frosmo-specific
<style> element, which is placed inside the
Where to go next
- To get familiar with the workflow and the modification settings, see Working with modifications.
- For hands-on examples that include creating a modification, see: