Please note that native full-featured p13n Pages app UI support for headless use cases and the Visual SPA Editor is planned to ship by end of June 2021.
This page provides an overview of approaches to implementing p13n in headless Pages app that are available now.
Author with freemarker, deliver via REST
Don't use the SPA Editor, but get full usage of Page editor personalization UI
Before the SPA editor many companies used the page editor to give authors WYSIWYG editing for headless. (Even though they did not have a perfect preview based on frontend components.)
There are three options for content delivery
- Deliver with Delivery Endpoint.
- Configure the endpoint such that all variants are returned. Do the actual personalization in the client, by only rendering the appropriate variant for the current user. Get user traits and segment from the current session.
- See delivery endpoint configuration here: Personalized content from content apps
- Deliver with customized Delivery Endpoint
- SPA can pass whatever contextual information is needed to the endpoint.
- Render JSON from component template FTLs
Add trait or segment properties to component dialog
Use the SPA Editor, but do not use the Pages app personalization UI.
Add a segment or trait property to each component dialog.
In authoring mode, always render the component. In production and preview mode, use logic in the component to only render if the the current user matches the given segment or traits.
Deliver content with the Delivery Endpoint.
Example: list adventure tours to a user that is between 18-25 years old.
All of the content items in a content app have some properties that will be used for selection. These could be tags or Magnolia traits and segments.
Then code, whether in a template or in a headless frontend uses the information it has about the user (user session, or request parametew) to request content items that match, such as all tours that are tagged "adventure", this results in a list of tours.
This list could populate a carousel at the top of the home page, it could be a "section of three" on the home page, it could be a "side bar" on many pages, it could be a "For me" tab in a mobile app, it could be included in a campaign email.
Note: This is what headless CMS typically do.
Page component that lists content items - automatically
The page component dialog does not present the personalization UI to the author. Variants are not used. The author might have some control - for example specifying how many items are returned.
A headless frontend can take the same approach.
Page component that lists content items - manually
Variants are used. The component allows the author to either
- hand pick which content items are displayed in each variant.
- creates a list by specifying which tags should be returned (for each variant)
Headless. Only supported by the delivery endpoint if all variants are returned. (variant nodes) and the frontend itself does the actual personalization.
Ticket to bring feature into core product
Scheduled for end of June 2021
MGNLPN-474 - Getting issue details... STATUS
Includes code for p13n response in comments. (October 19, 2019)
And support in SPA:
PAGES-239 - Getting issue details... STATUS