Placements - General Article

Overview of Nosto placements

Stanislav Kraus avatar
Written by Stanislav Kraus
Updated this week

Introduction

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:

  • Where: Placements define where on the website an actual personalization campaign is shown, which is 'the what'

  • How: Advanced placement settings enable conditional technical options, such as load a placement only when the area of the website is in browser's viewport but not before

  • When: Restriction rules and filters are similar to how, but based on business rules and page context such as hide or display a placement and associated campaign only if a business rule is satisfied e.g. show only if product is between a certain price range and from category "jeans"

Outside of placements, two linked concepts are:

  • Whom: Segmentation options allow targeting a campaign only to a specific shopper group: A segment.

  • What: A campaign, which can be either Onsite Content or Recommendations. Both with separate logic and rulesets, which control what personalization campaigns are shown e.g. product based cross-selling with associated rulesets and filters specific for the recommendation type.

Discover Placements

Placement settings are located under Tools > 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).

Placement Types

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

  • Static Placements are Html-based Nosto divs that are hardcoded into a page template

  • Dynamic Placements are Nosto elements that are dynamically inserted to a page. These placements anchor to existing code on the DOM when it loads and can then populate, add to and/or modify the contents of the page. In order to set up dynamic placements, you need to define the relevant CSS selectors of the elements you want to target. Once defined, you need to choose which method you want to use to manipulate the elements.

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.

Static placements

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

  • Change the title of a placement. This is recommended to give explicit titles to reflect the campaigns that will be displayed using the placement. This only affects the naming on the list

  • Enable or disable the placement. If a placement is disabled, it is inactive and will not display an Onsite Product Recommendation slot or an Onsite Content Personalization campaign, even though these would be bound to the placement. However, the slot or campaign can be visible using the Nosto Debug Toolbar.

  • Change the page type where the placement is used. If you change the page type of a particular placement, we recommend that you also reposition the div tag to the relevant page type template so that it reflects the change applied in your Nosto interface.

  • Fetch the Html placeholder

  • Modify the placement type with two scenarios:

  1. You can keep the placement  “static” but modify its unique identifier. If you do so, make sure that you also modify the identifier within your page template to match the newly defined identifier.

  2. Alternatively, you can change the placement type to be “dynamic”. Dynamic in this context means that you have flexibility to reposition the placement wherever you want on the page, using CSS selectors, manipulation methods and filters. This works even if the placement is hardcoded as part of the page template.

Dynamic placements

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

Injected Nosto Element

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". 

Target element via CSS Selector

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.

Manipulation Methods

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.

  • Replace

  • Insert As First

  • Insert As Last

  • Before

  • After

Wrapper Element

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

  • Simple wraps the campaign into a div element

  • Preserve class wraps campaign into div preserving the class attributes

  • Cloned option is available for the same cases as preserve class attributes, but this option will keep not only class attributes but also the tag name and all the other attributes, that presumably will fit site layout better

  • No wrapper option to inject the campaign content without creating a wrapper element so the campaign author have total control over the campaign html and can inject any tags

Advanced Placement Settings

Advanced options control where and how a campaign is loaded.

  • Loading placement only when visible is based on intersection observer. Most common use case is arguably “lazy loading” Nosto on longer pages where the content by Nosto is loaded and shown when the area of the page is actually visible for the shopper, technically in a browser’s viewport. The option loads campaigns when these are in browser's viewport so it'll also affect campaign statistics

  • Dynamic element detection is based on mutation observers in order to support relatively common use cases such as mini-cart size estimation tool, or a mega-menu overlay, each which are initiated either by a user clicking on a button or on mouse on-hover. The main intended use-case is to target elements loaded dynamically on the page with javascript

Code preview

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

Preview

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.

Display & Restriction Filters

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

  • Brand

  • Category

  • Tags (custom data)

  • ProductID

  • Price

  • Availability (in stock or out of stock/unavailable)

  • Discount status (full price or discounted)

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.

Placements and Segments

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:

  • One placement can be used by multiple different campaigns to target different segments.

  • One placement can't be used by multiple different campaigns to target one segment.

  • Multiple different placements can be used by one campaign to target one segment.

  • Multiple different placements can be used by multiple campaigns to target multiple segments.

  • Multiple placements can be used by multiple campaigns to target one segment.

Placement Conflict Resolution

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:

  • On Your Website: (For developers)

    • If you don't need a static placement for the affected div element, remove the following attribute from its HTML code.

      class="nosto_element"

  • In Nosto Admin:

    • If you don't need Display & Restriction Filters:

      • Change the placement type from dynamic to static.

    • If you need Display & Restriction Filters:

      • Target the dynamic placement to a different element that doesn't have the class

        "nosto_element" 

Did this answer your question?