close

Filter

loading table of contents...

Personalization Hub Manual / Version 2307

Table Of Contents

4.2.1.1 Frontend Integration

The 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 content item 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
  1. Add the brick p13n-dynamic-include to your frontend bricks and add a dependency for your theme into the package.json file:

     "@coremedia/brick-p13n-dynamic-include": "^1.0.0", 
  2. Modify the dynamic-include brick to ignore the fragments from the p13n integration in the init.js file:

    addNodeDecoratorByData(undefined, FRAGMENT_IDENTIFIER, function (
      $fragment,
      url
    ) {
      if($fragment.data("cm-experience-links")) {
        return;
      }
      utils.pushTaskQueue();

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.