Skip to main content

Creating and editing a placement

Learn how to create and edit a placement, and define the settings for the placement.

Creating a placement​

tip

You can also create a placement as part of the modification workflow. For more information, see the Defining the placement for a modification.

To create a placement:

  1. In the Frosmo Control Panel, in the sidebar, select Modifications.

  2. Select the Placements tab.

  3. Click Create placement.

  4. Define the placement settings.

    Creating a placement

  5. When you're done, click Save.

Editing a placement​

To edit a placement:

  1. In the Frosmo Control Panel, in the sidebar, select Modifications.

  2. Select the Placements tab.

  3. In the placements list, find the placement you want to edit, and click the placement name.

  4. Edit the placement settings.

  5. When you're done, click Save.

You can also check in which modifications the placement is currently used.

Placement settings​

The following table describes the settings you can define for a placement in the Frosmo Control Panel.

Placement settings
SettingDescriptionRole

Name

Enter a name for the placement.

tip

To easily identify your placements, use a consistent naming syntax that produces descriptive names. For example, Frosmo uses the following syntax:

<Page type> - <Content type> - <Extra identifier if any>

The first part identifies the page or pages for which the placement is valid. If the placement is valid for multiple pages, the Frosmo convention is to name the first part "All pages".

For example:

  • All pages - Hero banner

  • Home page - Recommendation 1

  • Product page - Recommendation 1 - Halloween campaign

Required

Description

Enter a description for the placement. You can use the description to, for example, explain how and where the placement is placed and why.

Optional

Page type

Select the type of page on which the placement is used. The page types available for your site depend on the site's vertical.

If the placement is used on multiple types of pages, select Other.

note

The page type does not affect on which pages the platform adds the placement (and thereby modifications assigned to the placement). However, the page type should nonetheless match the placement's targeting settings: Target element and URL matcher. For example, if the placement is intended to be used on the site home page, and you define a URL rule that adds the placement only to the site home page, make sure you select Home as the page type.

The page type information is used to calculate the business performance statistics for the site. The statistics for each page type are based on placement settings, so in order to get relevant statistical data, selecting the correct page type for each placement is essential.

Required

Target element

Define the web page element or elements in relation to which the placement and thereby the modification content are to be placed in the page code.

To define the element:

  1. Select the type of selector you want to use for identifying the element(s). You can use either CSS selectors or, if your site has the jQuery support module enabled, jQuery selectors.

  2. Enter the selector(s) for the element(s). The maximum length of the selector string is 512 characters.

Here are a few example CSS selectors:

  • body (HTML document body)

  • div.input (all <div> elements with the class input)

  • #content (element with the ID content)

  • .section (all elements with the class section)

  • .section > p (any <p> element that is the direct child of an element with the class section)

  • em, strong (all <em> and <strong> elements)

Required

Display method

Select how the placement and thereby the modification content are placed in relation to the target element in the page code:

  • Replace content

    The modification content replaces the original content of the target element.

  • Replace element

    The modification content completely replaces the target element, not just its content.

    note

    When using this display method, the target element is deleted. Use this method with caution.

  • Hide & replace original

    The target element is first hidden, its original content is then replaced by the modification content, and finally the target element is displayed again.

    note

    The target element is initially hidden even if there are no modifications using the placement. This can cause a slight lag in displaying the content when the page is loaded.

    note

    Be careful when using this display method with a trigger, since the trigger is only evaluated after the target element is hidden. This may cause visitors to miss important content.

    info

    This display method only works when the Frosmo scripts are placed before the target element in the page code.

    You cannot use this display method with a jQuery selector.

  • Before element

    The modification content is placed immediately before the target element.

  • After element

    The modification content is placed immediately after the target element.

  • Before content

    The modification content is placed inside the target element, before the content of the target element.

  • After content

    The modification content is placed inside the target element, after the content of the target element.

Required

URL matcher

If you do not want to add the placement and thereby the modification to every page of your site, create one or more URL rules that together resolve into the set of pages where you want to use the placement. A URL rule defines a comparison between a part of the URL and a string value that you expect that part to match. For example, you might check whether the protocol part of the URL matches "http" or "https".

If you define no URL rules, the placement is valid for all pages of your site (unless you select a trigger for the placement that only fires on specific URLs). Any modification that uses the placement is therefore potentially used on every page of the site.

To create a new rule:

  1. Click Add new rule.

  2. Select the part of the URL to use for the match. For more information about the options, see the descriptions below.

  3. Select the type of the match.

  4. Enter the string to match.

You have the following options for selecting the part of the URL:

  • URL

    Match the full, absolute URL of the page.

  • protocol

    Match the protocol used in the URL. The possible values are http and https.

  • domain

    Match the domain name part of the URL. For example, in http://www.example.com/index.html, the domain is www.example.com.

  • path

    Match the URL path after the domain. For example, in http://www.example.com/index.html, the path is /index.html.

  • anchor

    Match the anchor part of the URL. The anchor is always appended to the URL with a hash (#). For example, in http://www.example.com/index.html#about, the anchor is about.

  • query selector

    Match a query parameter value in the query string part of the URL. Enter the name of the parameter whose value you want to match, select the type of the match, and enter the parameter value to match.

    Matching a query parameter value

    In the URL, the query string is preceded by a question mark (?) and consists of one or more query parameters. A parameter consists of a name and a value, which are separated by an equals sign (=). Multiple parameters are separated by an ampersand (&) or a semicolon (;). For example, http://www.example.com/index.html?preview=enable contains a single parameter with the name preview and the value enable, while http://www.example.com/index.html?preview=enable&user=12345 contains two parameters, preview=enable and user=12345.

tip

For more information about the URL syntax and its components, see Wikipedia.

If you create multiple rules, select how you want to combine the rules:

  • AND

    Only match URLs that fulfill all the defined rules.

  • OR

    Match URLs that fulfill any of the defined rules.

You can create as many rules as you need.

Optional

Trigger

If you want to control when the placement and thereby the modification content get added to a page, select a trigger for the placement. With a trigger, the placement is added to the page only when the trigger fires.

You can only select a single trigger, but you can freely change the selected trigger, and you can remove the trigger if you no longer need it.

note

Be careful when using a trigger with the Hide & replace original display method, since the trigger is only evaluated after the target element is hidden. This may cause visitors to miss important content.

If you define both a URL matcher and a trigger, the placement is added only to pages that match the URL rules and only when the trigger gets fired. For example, if you define a URL rule that matches the path contact and a trigger that fires once the DOM is ready, the placement is added to the page only if the page URL contains the path contact and only after the browser has finished building the DOM tree for the page.

note

If you define both a URL matcher and a trigger, make sure their URL rules do not conflict. Having conflicting URL rules can easily lead to a situation where the modification content is never added to a page.

Selecting a trigger​

To select a trigger:

  1. Click Select trigger.

  2. Select an existing trigger, or create and select a new trigger by clicking Create trigger. For instructions on how to create a trigger, see Creating and editing a trigger.

    Selecting a trigger

  3. At the bottom of the view, click Confirm.

Changing the trigger​

To change the selected trigger:

  1. Click the trigger name.

    Changing the selected trigger

  2. Select a different existing trigger, or create and select a new trigger by clicking Create trigger. For instructions on how to create a trigger, see Creating and editing a trigger.

    Changing the selected trigger

  3. At the bottom of the view, click Confirm.

Removing the trigger​

To remove the selected trigger:

  1. Click the trigger name.

    Removing the selected trigger

  2. In the Selected trigger section, click ✕ for the trigger.

    Removing the selected trigger

  3. At the bottom of the view, click Confirm.

Optional

Custom renderer

Enter the name (without the namespace) of the custom renderer function that you want to use for this placement. You can use a custom renderer to change default placement functionality or add new functionality.

The maximum length of the function name is 64 characters.

note

Only Frosmo customer teams can create custom renderers. For more information, contact Frosmo support.

Optional

CSS classes

Enter the names of the CSS classes that you want to use to style the placement and thereby the modification content. If you use multiple classes, separate the names by spaces.

note

The classes must be defined in the site source code or in the modification content.

The maximum length of the string of class names is 256 characters.

Example: Single class
section
Example: Multiple classes
section alert frosmo

The class names are added to the class attribute of the placement <div> element.

Optional

CSS code

Enter the inline CSS code that you want to use to style the placement and thereby the modification content.

The maximum length of the code is 255 characters.

Example
color: orange; font-size: 2em; margin-left: 20px;

The code is added to the style attribute of the placement <div> element.

Optional

Preview URL

Enter the absolute URL of a page where you can preview modifications assigned to the placement.

If you've defined URL rules for the placement, the preview URL must match those rules, meaning the placement must be valid for the page designated by the preview URL.

The Control Panel uses the preview URL for launching variation previews from the modification UI.

note

If you want to use the variation preview function, you must define a preview URL for the placement used by the modification.

tip

If the placement is valid only for a single page, use the URL of that page as the preview URL.

Optional

Defining the placement settings
Figure: Defining the placement settings