Page tree
Skip to end of metadata
Go to start of metadata

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.


Pages app

Two approaches:

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
    • Use component variations to render two different templates based on the extension of the request
    • In authoring mode, render HTML in the FTL template.
    • In delivery mode, render JSON in the FTL template
      • For example with jsonfn.


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.


Content apps

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.

Two options:

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.


Reference

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

Delivery endpoint configuration in order to retrieve all p13n information


class: info.magnolia.rest.delivery.jcr.v2.JcrDeliveryEndpointDefinition
workspace: website

depth: 100
systemProperties:
  - mgnl:template
  - mgnl:assignedSegments
  - mgnl:variantTitle

nodeTypes:
  - mgnl:page
childNodeTypes:
  - mgnl:area
  - mgnl:variants
  - mgnl:page
  - mgnl:contentNode


Template Render Variations

https://docs.magnolia-cms.com/product-docs/Templating/Template-definition.html

renderType: freemarker
dialog: my-module:components/page1
areas:
  main:
    availableComponents:
      comp1:
        id: my-module:components/comp1

variations:
  html:
    templateScript: /my-module/templates/pages/variations-home.html.ftl
  json:
    templateScript: /my-module/templates/pages/variations-home.json.ftl


jsonfn

https://docs.magnolia-cms.com/product-docs/Templating/Template-scripts/Templating-functions/jsonfn.html

${ jsonfn.fromChildNodesOf(tours).add("@id","@name","name").print() }



  • No labels