A placement determines where a modification is placed on a website. Specifically, a placement determines on which web pages a modification is used and where on those pages the modification content is added. If you do not define a placement for a modification, the content of that modification cannot be added to any page on the site, since the Frosmo Platform does not know where to place the content.

Multiple modifications can use the same placement, but only one modification gets rendered in the placement on a given page load. Which modification that is depends on the settings, such as target audience, of the individual modifications. A modification can only be assigned to a single placement at a time.

Placements in the modification flow

Figure: Placements in the modification flow (click to enlarge)

In the page code, the modification content is always placed in relation to a specific target element or elements. How and where the content is actually displayed on the page, assuming the content has displayable elements, depends on the page layout and styling.

To learn more about placements, see:

Placements as controllers of modification content

Placements use two primary settings to determine where modifications are placed on a page:

The following figures show the same modification displayed in the same placement using three different display methods: replace element, before element, and after content. The first figure shows the target element, a site title with a link, in its original form. The modification is a logo image.

Original target element, no modification

Figure: Original target element, no modification (click to enlarge)

Placement replaces the target element with the modification content

Figure: Placement replaces the target element with the modification content (click to enlarge)

Placement adds the modification content before the target element

Figure: Placement adds the modification content before the target element (click to enlarge)

Placement adds the modification content after the original content within the target element

Figure: Placement adds the modification content after the original content within the target element (click to enlarge)

Placements also provide the following optional settings for controlling where and how modification content gets added:

For more information about defining the target element, display method, and other settings for a placement, see Creating and editing a placement.

Placements as containers for modification content

On the page, a placement becomes its own element that gets populated with the content of the modification. What that element is depends on the target element and the display method defined for the placement:

  1. As a rule, the platform tries to match the target element, so as not to break the page layout. In matching the target element, the platform either adopts the target element as the placement element or adds a new element of the same type as the target element. The matching applies to the following types of elements:

    For example, if you replace the content of a <p> element, the <p> element becomes the placement element with the modification content inside, or if you add content after a <li> element, the placement gets added as a new <li> element with the content wrapped inside.

  2. If the platform cannot match the target element, either because the target element type is not supported or because matching the target element is not required, the platform adds a new <div> element as the placement element. By default, the <div> element has no visual style, so the element serves as an invisible container for the modification content. Unless you explicitly style the <div> element, it has a visible impact on the page only insofar as the modification content within it has such an impact.

The placement element and its modification content are identified by Frosmo-specific class and id attribute values, and by the data-frosmo-message-id and data-frosmo-position-id attributes.

Frosmo-specific attributes in a placement element

Figure: Frosmo-specific attributes in a placement element

The following figure shows a placement and a modification displayed on the page (left) and rendered in the page code (right). Here, the placement is a <div> element.

Placement and modification content in the page code vs. on the page

Figure: Placement and modification content in the page code vs. on the page (click to enlarge)

If the target element selector defined for a placement matches multiple elements on a page, the placement is used in multiple locations on the page, and each instance is rendered as its own element with its own copy of the modification content.

Same placement in multiple locations on the same page

Figure: Same placement in multiple locations on the same page (click to enlarge)

The placement element also plays a key role in tracking modification performance: When a visitor views or clicks a modification, and when they complete a conversion as a result of the view or click, the Frosmo Platform is able to automatically attribute the corresponding events to the modification because its content is wrapped inside the placement element.

Placements in the modification content flow

Placements work as follows in the flow of modification content:

  1. The visitor navigates to a page on a Frosmo-managed site.
  2. The Frosmo Platform checks if there are any valid placements for the page.
  3. If there are valid placements, the platform checks if the placements have modifications assigned to them that are valid for the visitor.

    For example, if a modification has segments or other audience settings defined for it, the platform checks whether they apply to the visitor. A modification is only valid to the visitor if they meet all the audience, schedule, and display requirements defined for the modification.

  4. If there are valid modifications for the visitor, the platform fetches them.

    If the same placement has multiple valid modifications, the platform fetches only one of the modifications. Which modification that is depends on modification settings such as priority and weight.

  5. The platform adds the placement elements and corresponding modification content to the page. If a placement uses a trigger, the platform waits until the trigger is fired before adding the placement element and modification content.

Where to go next