Implement Segment-Based Personalization in Your SPA (External CDP)

👍

For content personalization using segmentations managed in Bloomreach Engagement, see Implement Segment-Based Content Personalization in Your SPA (Engagement).

Introduction

Goal

Render pages in your SPA that use content personalization based on segmentations managed in an external Customer Data Platform.

Background

Bloomreach Content provides page-level content personalization based on segmentations managed in an external Customer Data Platform (CDP).

This page explains how to render such personalized pages in your SPA frontend.

Prerequisites

Segment-based content personalization in Bloomreach Content works together with the Customer Data Platform integration. You need to have this integration added to your Content environment and have segmentations imported in the Content audiences app.

Your SPA should be using the latest release of the SPA SDK.

Implement organic personalization in your SPA:

The SPA SDK supports segment-based personalization out of the box, provided that on each page render, the SPA retrieves the relevant segments from the CDP and stores the corresponding segment IDs (as a comma-separated string) in a cookie called __br__segment_ids. It is the responsibility of the SPA developer to implement the integration with the CDP to retrieve the segments and to store their IDs in the cookie.

If the CDP only provides names for segments but no IDs, use base64 encoded versions of those names as segment IDs. These will be recognized by Content SaaS.

The SPA SDK reads the value of the __br__segment_ids cookie and passes it in a __br__segmentIds query parameter to the Delivery API's Pages endpoint.

In the response from the API you get personalized content.

Example

Let's assume the CDP defines a segmentation "Color" with two segments: "Green" and "Blue". The CDP integration has been added to the Content SaaS environment and the segmentation has been configured in the Content audiences app using the following JSON object:

[
  {
    "name": "Color",
    "segments": [
      {
        "name": "Green",
        "id": "id-green"
      },
      {
        "name": "Blue",
        "id": "id-blue"
      }
    ],
    "id": "id9999"
  }
]

Let's also assume you have access to a function getSegmentIds which integrates with the CDP and returns the visitor's segment IDs as an array of string (for example, ['id-blue', 'id-green']), and a function setCookie. Your personalization code could be as follows:

var segmentIds = getSegmentIds(); // returns ['id-blue', 'id-green'];
setCookie('__br__segment_ids', segmentIds.join(','));

The actual code will depend on your specific CDP and your SPA implementation.