Introduction

Placements are areas of a web page used by Nosto to display Onsite Product Recommendations, Onsite Content Personalization and to set up Nosto's A/B Tests

You can find the list of all Placements under Tools and Placements

When Nosto is installed through one of our extensions, 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 de-facto 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.

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

Placement Type

Nosto offers two placement types: Static Placements and Dynamic Placements.
Static Placements are Nosto divs that are hardcoded into a page template, whereas Dynamic Placements are Nosto elements that can be 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.

This 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 for retailers to create powerful personalized shopping experiences.

Static placements

As mentioned, a static placement refers to a div tag hardcoded to a page template. All static placements have nosto_element as a class name and their 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. 

Examples include:

  • Change the title of a placement. This is recommended to give explicit titles to reflect the campaigns that will be displayed using the placement.
  • Enable or disable the placement. If a placement is disabled, it cannot be used to display an Onsite Product Recommendation slot or an Onsite Content Personalization campaign. 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.
  • Modify the placement type. 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

You can use Nosto to add entirely new elements to a page without hardcoding tags to a page template. Instead, you can entirely rely on Nosto's manipulation methods to populate elements inside the DOM of any page. 

  • 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 further down the line, it pays to be specific. For example, if you wished to add some delivery messaging below your add-to-bag 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.  

If you want to learn more about each specific manipulation methods, we can recommend you to read the following specific guides: 

Preview

If you're unfamiliar with reading HTML / inspecting 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 along with the Nosto Debug Toolbar. It helps you validate whether or not the settings of the placements has been successful.

Input a URL and you will be redirected onsite with a Placement-specific tab active vin the nosto debug toolbar. This aims to help you validate if Nosto is able to find a static element on the page or - in case of dynamic placements - if a targeted element is found in the DOM of the page.

You can also highlight any other placements directly from the Debug Toolbar as you browse from one page to another.

Example

In this example, 3 placements have been set on this page:

  • 2 dynamic placements (#herobannernosto and #nostologo), replacing existing elements as we can see with the highlight of the logo and 1 static placement (#frontpage-nosto-1).

Note there is also an additional dynamic placement (#landingpage) listed in the toolbar that can be found in the DOM of the page. However, it will not ultimately be displayed on the page due to some restrictions set through the Display & Restriction Filters.

Display & Restriction Filters

As an additional layer, you can control on which page(s) the dynamic placements should or should not be displayed using the Display & Restriction Filters.

URL Filters

URL Filters allows you to set on which page URL a placement should or should not be displayed.

  • Strict matching: Exactly matches and Does not match allows you to strictly define if a placement should be shown or not on a given URL. Note that some browsers sometimes hides the last ”/” in the url field. You can double check an exact URL by typing location.href in the console. 
  • Partial matching: Contains and Does not contain allows you to define substrings of URLs to define if a placement should or should not be shown. For example, you could chose to show an additional content block IF the url contains a specific UTM parameter.
  • Matches pattern: This allows you to take advantage of regular expressions to target complicated URL structures. 

It is possible to set multiple URL filters for a single placement. 

Example

You can learn more about Display & Restriction Filters here.

Page Type Filters 

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

Page Types are tagged by Nosto as part of the regular Nosto Tagging. You can learn more on how to tag your page types here.

It is possible to set multiple Page Type Filters for a single placement. 

Example

Note that both URL Filters and Page Type Filters can be combined. 

Example

If you want to learn more about Display & Restriction Filters, you can find a dedicated guide here.

Did this answer your question?