Personalization Example
Personalization example built with Next.js, using Contentful to store content and Ninetailed for audience control.
Make personalized content editable in Netlify Create.
Netlify Create can integrate with the current generation of headless CMS-native personalization engines. A significant challenge for editors using these engines is navigating through the CMS content tree to actually edit multiple variants and targeting rules, without actually getting immediate feedback on their work (more about that challenge here).
In other words, the common hardships with a headless CMS are made worse by the extra layers added for personalization. Integrating a personalization tool into Netlify Create is meant to ease this pain.
Here’s what such integrations typically provide:
For an example, see our Ninetailed integration (video, code).
For personalization to be editable with Netlify Create, the content should be stored in a supported content source. Variants should be stored either in fields within a document, or (more commonly) as separate referenced documents.
Making personalized content editable with Netlify Create is a three-step process:
The mechanism for this depends on the web framework (Next.js example). For any component that is personalizable, create a wrapper component (only in non-production environments!).
The responsibilities of this wrapper are:
This behavior should only exist in your application when it is running in development mode. This is commonly achieved using the NODE_ENV
environment variable. There is also a STACKBIT_PREVIEW
environment that is set in Netlify Create cloud projects.
The last step is to ensure that any variant rendered is properly annotated, whether it’s the default variant returned by the personalization engine or a user-selected variant.
As a reminder:
data-sb-object-id
on an element that wraps the personalized content.data-sb-field-path
instead.Netlify Create can also handle content that is behind a gate or paywall, or content that requires user authentication.
The process follows a similar pattern to personalization. As long as there is a way to access content in a supported content source, it can be edited.
There are two approaches commonly taken to let editors access to gated content:
In many cases, developers choose to provide the ability to impersonate a specific user or a request. In this mode, the content editor sees exactly what that end-user should see, and edit it. How this is implemented varies significantly based on the needs of the project.
An alternative approach is to make all gated content available when the site is running in development mode. This tends to speed up the editing process, but comes with risk:
We have an example project that uses Contentful to store content and Ninetailed for handling user profiles & personalization.
Personalization Example
Personalization example built with Next.js, using Contentful to store content and Ninetailed for audience control.
Run the project locally by running the create-stackbit-app
command, then following the README setup instructions.
npx create-stackbit-app@latest --example ninetailed-personalization
Your feedback helps us improve our docs.