Personalization Hub Manual / 4.3.7 Integration with the P13N Service Provider

Personalization Hub Manual / Version 2301

Table Of Contents

4.3.7 Integration with the P13N Service Provider

As explained in Section 4.2.1.1, “Frontend Integration” the third-party service needs to call the callback functions if a variant should be displayed and replaces the default content fragment with the variant.

Therefore, you have to implement a listener like the previewListener, which will then change the experience state of the React app.

Implement a p13nListener in Page.tsx

// catch the function to set the p13n context and state
  const { setExperience } = usePreviewContextState();

  // the p13 hook which is then called by p13n provider
  const p13nListener = (event: MessageEvent) => {
    const data = event.data;
    if (data.type === "cm_p13n") {
      const variantId = data?.body?.variantId;
      const exp: PreviewP13NExperiences = { variants: [variantId] };
      setExperience && setExperience(exp);
    }
  };
  window.addEventListener("message", p13nListener);

Expand the header of index.html to implement the callback functions which uses the listener:

<script type="text/javascript">
    cm_p13n = {
      pushVariant: function (variantId) {
      window.postMessage({ type: "cm_p13n", body: { variantId: variantId } });
    }
  </script>

Search Results

Table Of Contents