Headless and SPA (Single Page Application) implementation methods

The following gives a quick overview of page tagging/event tracking (coupled with handling Nosto product recommendations and banners) for headless and SPA (Single Page Application) builds. You can find more details in the personalization implementation guide, but this page will already give you a general understanding of the concept.

Search and Category Merchandising is separate from the personalization guide and covered at the end of this page.

If you are using Shopify Hydrogen or Magento Hyvä, you can use Nosto's dedicated React Component Library for Shopify Hydrogen and the built-in support for Hyvä in the Nosto Magento plugin.

Page Tagging and Event Tracking + Requesting Nosto Content for rendering with your Templates

On every page visit, you need to send a request to Nosto using our Session API about the page type the user is browsing and what exactly they're looking at (e.g. type = product, ID = 123).

You can find the different page types here, the concept is the same every time.

Nosto then returns a response with two types of content:

• Product Recommendations -> JSONResult with an array of JSONProduct

• Onsite Content Personalization (OCP, e.g. banners or text) -> HTML

Nosto Content via Session API

You take the response and pass it to your rendering function, building the HTML template and injecting it into your theme.

This is done via "placements" (empty divs on every page that can be populated from the backend, e.g. pdp-top, pdp-mid, home-1, home-2, ...) and you pass all the placement-IDs that are on the current page to Nosto. Nosto then returns the data of the campaigns that are inside of those placements.

Using placements gives the eCom-team a high degree of flexibility since they can control what to show where and they can run A/B tests within Nosto.

Nosto offers you several helper functions to simplify injecting your campaigns and setting up click attribution. If you want to read more on DOM injection and click attribution read this.

Nosto Content via GraphQL

The event tracking can also be done via GraphQL.

The concept is the same: specify data about the session (cart and customer) and request product recommendations for a given page type.

Please beware of the following drawbacks:

1. You request the campaigns for a specific product ID or category (without placements) and will receive the Recommendation campaign IDs directly and therefore can't use Nosto built-in A/B testing. You need an alternative, full page A/B testing like Omniconvert in this case.

2. Dynamic filtering is not possible via GraphQL. We highly recommend to go with the Session API and use viewCustomField.

3. Nosto OCP (like personalized banners or other HTML content) can not be retrieved via GraphQL.

Choosing the right Implementation Method

The Nosto team is happy to support you finding the method that matches your tech stack, requirements and preferences. We highly recommend reading our personalization implementation guide, but if you're in a hurry, take a look at our comparison table.

Implementation Methods for Nosto Search/Category Merchandising (CM)

Here you can find an overview of all implementation methods.

The differences between the GraphQL API and JS Library (wrapping the GraphQL API) are:

• Queries done with the JS Library are automatically tracked, only clicks need to be tracked (when a user clicks on a product that was returned by a Nosto-powered search overlay, SERP or PLP)

• Nosto A/B testing is automatically included with the JS Library and needs to be handled explicitly when using GraphQL

• Personalized and segmented results with GraphQL need an addition of the JS Library to get the current session params from the browser and pass it to the GraphQL request

The endpoints and requests are very similar, you either pass a search query or a category and Nosto returns all products and associated facets. Here are several examples for pagination, sorting, faceting etc..