Nosto Placements are HTML elements used as placeholders to display Onsite Product Recommendations and Onsite Personalization Content campaigns. On a SPA/PWA, onsite features such as content and recommendations are injected into "placements".
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.
Static Placements and Dynamic Placements
Static Placements are part of a web page DOM structure. A set of Nosto Placements is injected by default into the different page types of your online store if you install Nosto via one of our extensions for Magento, Shopify, Salesforce Commerce Cloud for example.
However, you can also add manually static placements where you will want Nosto to display Onsite Product Recommendations or Onsite Content Personalization campaigns. Static Placements can be defined by page types for more intuitive use and search of those placements across the Nosto products in the Nosto Admin Panel. However, Static Placements are displayed whenever and wherever present in the DOM of the web pages. You can find our technical document on how to implement Nosto Static Placements here.
Dynamic Placements are placements injected by Nosto upon page load. These placement are dynamically injected through manipulation of the DOM structure and use a targeted element as an anchor for injection.
Injected & Targeted Elements for Dynamic Placements
Injected Nosto elements must have a unique identifier set in the purple section in the Settings panel. When injected, a nosto_element class attribute is set for the element.
Any injected Nosto element targets existing elements of the DOM structure using CSS Selectors. The CSS selectors for each Nosto placement must be set in the grey section of the settings panel ("Targeted element via CSS selector").
Manipulation methods for Dynamic Placements
Once an injected Nosto element and targeted element are defined, Nosto can inject the new element using different manipulation methods such as Replace, Insert as first, Insert as last, Before and After. This gives full flexibility whether an element should be manipulated.