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:

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:

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