Personalization Hub Manual / Version 2401
Table Of ContentsThe frontend theme can be extended with a brick that acts on the callbacks received from the personalization provider. The brick is responsible for loading variant fragments and displaying the baseline content if no variant is triggered. The provider's script tag is independently included in the adapter CAE extensions.
Together with a small piece of JavaScript proxy code injected into the HTML head by the CAE extension, the brick provides the callback functions called from the third-party service if a variant or segment is to be displayed and replaces the default content fragment with the variant loaded via AJAX.
The frontend code adds the object cm_p13n to the window object providing the following methods:
pushVariant(variantId:String)Activates the variant with the given ID.
pushSegment(segmentName:String)Activates the segment with the given name.
exchangeVariant(variantId:String, contentId:String)Replaces a variant when using the preview icon of a variant in the content item tab.
completed(providerId)Called when the third-party service is finished and displays the baseline for all fragments where no variant or segment is active.
In addition, an event listener is installed for integration with the Studio preview.
Adding the brick to the theme
Add the brick p13n-dynamic-include as dependency to your theme (package.json).
pnpm add @coremedia/brick-p13n-dynamic-include
