Personalization Hub Manual / Version 2301
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 3rd 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 document tab.
completed(providerId)Called when the 3rd 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-includeto your frontend bricks and add a dependency for your theme into thepackage.jsonfile:"@coremedia/brick-p13n-dynamic-include": "^1.0.0",
Modify the
dynamic-includebrick to ignore the fragments from the p13n integration in theinit.jsfile:addNodeDecoratorByData(undefined, FRAGMENT_IDENTIFIER, function ( $fragment, url ) { if($fragment.data("cm-experience-links")) { return; } utils.pushTaskQueue();
