Implement Segment-Based Content Personalization in Your SPA

📘

Note:

Content personalization features must be enabled on a per-environment basis. To get started with personalization, reach out to your Bloomreach account manager or sales representative.

Introduction

Goal

Render pages in your SPA that use content personalization based on segmentations managed in Bloomreach Engagement.

Background

Bloomreach Content provides page-level content personalization based on segmentations managed in Bloomreach Engagement.

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 Bloomreach Engagement SDK. You need to have a Bloomreach Engagement account to make it work.

Before implementing organic personalization in your website you should already have the SPA SDK (v15.4.3 or greater) installed in your SPA.

Steps to implement organic personalization in your SPA:

  1. First, get the Bloomreach Engagement SDK snippet. Log in to Bloomreach Engagement. In the top right corner click settings and choose Web Integration.
196196

In the Event tracking window, click the Copy to clipboard button.

700700
  1. In your SPA, paste the snippet you just copied into index.html file. Paste the snippet into the header of your site (inside the <head> tag). More details can be found in the Bloomreach Engagement Javascript SDK guide.
700700
  1. Add the @bloomreach/segmentation library to your SPA to make the segmentation feature work. In the root folder of your SPA project, run the following command:
npm install @bloomreach/segmentation
  1. In src/App.tsx, initialize segmentation as follows:

    Import the segmentation library:

import { initializeSegmentation } from '@bloomreach/segmentation';
Call `initializeSegmentation` from the library. Provide your Bloomreach Engagement project token. It can be found in your Bloomreach Engagement account (*Settings -> Project Settings*) or in the event tracking snippet you copied above. For example:
initializeSegmentation({
      projectToken: 'your-token-here',
      targetURL: 'https://cloud-api.exponea.com'
    });
The `initializeSegmentation` function should be called on each render of the page.
initializeSegmentation({
  projectToken: 'your-token-here',
  targetURL: 'https://cloud-api.exponea.com'
});

That’s all!

The Bloomreach Engagement SDK sets a cookie called __exponea__etc__ with the ID of the user.

The segmentation library retrieves the segment IDs for the user, based on the project token and the user ID, and stores them as comma separated values in a cookie called __br__segment_ids.

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.


Did this page help you?