Placements are Nosto's product concept to populate Onsite Product Recommendations, Onsite Content Personalization or Visual UGC campaigns, and to set up Nosto's A/B Tests on the target website. As the name suggests, placements define where on the website Nosto campaigns are shown, which can be further manipulated depending on the page's or user's context.

Each Nosto Placement has a unique identifier and nosto_element as a class attribute and upon page load and/or when Nosto's embed script is initiated, relevant campaigns are injected within specific Nosto Placements if users belong to a targeted segment and if other conditional options are satisfied.

As a summary, the placement concept defines:

Outside of placements, two linked concepts are:

Placement settings are located under Experience.AI > Placements: 

When Nosto is installed through one of our extensions such as Shopify, a predefined set of static placements are automatically injected on to key page type templates such as the homepage, product page, cart page and more. These auto-injected placements are the default list in the Placements listing view. In addition, you can create new placements yourself and there is no limitation to the number of placements you can create. Alternatively you can delete default placements, but this does not remove the placeholder from your templating engine.

In the listing view, you can see if/when the placements have been displayed onsite, their type, the page type where they are displayed, including identifier and their status (disabled, enabled or currently used in a test).

Nosto offers two placement types: Static Placements and Dynamic Placements.

The two-pronged approach of either using Nosto specific elements present in your page templates (static) or manipulate any element upon page load (dynamic) makes it easy & flexible to define the logic where and how Nosto personalization campaigns are displayed.

A static placement refers to an html div tag deployed to a page template, typically using a Content Managent System or templating tools in your e-commerce platform. All static placements have nosto_element as a class name and the identifier must be unique. At any time, you can select a placement from the list and edit it. Using the placement edit view, you can amend the settings of any placement.

Placement type and settings include following options and features

Dynamic placements add more flexibility how chosen campaigns are displayed, and it can make the process of adding content faster and easier as you don't need to deploy tags into page templates using your CMS.

Instead, you can entirely rely on Nosto's manipulation methods to populate elements inside the DOM of any page.

The first three options are the injected element, css selector and manipulation method

The injected Nosto element is a unique nosto-created div element that will be injected inside the DOM of page with a uniquely defined identifier set in the input field. Think of this as a way of easily identifying your placements so it commonly a good practice to name it specifically. For example, if your target is to add delivery messaging below your add-to-cart button on your product page, you could call the injected Nosto element "nosto-pdp-delivery-message". 

The targeted element defines the specific tag/class/id on the page that Nosto will use to inject this new element. It can use any tag on a page as a target, respecting the logic set using CSS Selectors in the input field. You can learn more how to target an element using CSS Selectors here.
​

Once you have defined which existing element must be targeted on a page, Nosto can inject the element using various manipulation methods. You can fully replace the targeted element, insert it as first child, last child or inject it before or after the targeted element.
​
For example, if you wanted to add an additional bullet point to a pre-existing list of USPs you would likely use the insert as last manipulation method. Whereas if you wanted to place an image below the afore mentioned list of USPs you would use the after manipulation method.  Available manipulation methods are listed below, whilst the code preview area gives you a better idea how the html adjusts depending on your chosen method.

Wrapper element options are advanced options for developers including options to control how the campaign content is injected

Advanced options control where and how a campaign is loaded.

Code preview shows the minimal approximate html structure that would match the css selector for the placement target and how the campaign is injected into the structure. The code preview makes css selector more understandable by showing the html structure it matches, reflects the manipulation mode, wrapping mode, shows the divId and all the bookkeeping css classes

If you're unfamiliar with HTML and reviewing code, dynamic placements can seem like a daunting task, and often will involve some trial and error. Fortunately, you can preview any placements using the Preview placement tool and the Nosto Debug Toolbar and review that placements are set up accordingly.

Input a URL to the input field and click preview, which will redirect to the website with a Placement-specific tab active vin the Nosto Debug Toolbar. You can also highlight any other placements directly from the Debug Toolbar as you browse from one page to another.

As an additional conditional option, dynamic placements support contextual rules when the placement should be shown or hidden by deploying one or more rules.

To distinguish manipulation methods from display & restriction filters: Manipulation methods adjust the location of content and how content is loaded in a browser. Filters are contextual or business logic, where a campaign should be displayed or alternatively hidden. For instance, a certain campaign could be hidden or shown only if the brand of the viewed product matches your campaign.

Url filters allow you to set on which page URL a placement should or should not be displayed.

Page Type Filters allow you to define on which page type a placement should or should not be displayed.

Product filters allow you to set on which pages depending on the product attribute a placement should or should not be displayed by using one or more of the options

An example as above enables a placement and associated campaign when availability of a product is "out of stock" and when the viewed product is "Nike", for example to show a campaign suitable for the scenario.

When you target multiple segments at the same time using one or multiple placements, some guidelines must be followed in order to implement powerful personalization strategies onsite. For example, you can't use one same placement to target one segment with multiple campaigns.

Here's a summary of what can achieved and what not looking at the segments, placements and campaigns combinations:

A warning might appear in the Nosto debug toolbar indicating a conflict:

The placement [divId here] is defined as both a static and dynamic placement. In these situations, the dynamic placement takes precedence.

This occurs when a dynamic placement targets a div element marked with the class "nosto_element," which is typically used for static placements in Nosto. As a result, the dynamic placement will always render, overriding any Display & Restriction Filters you might have set.

How to Resolve: