Implement organic personalization in your SPA - Bloomreach Commerce Experience Cloud - The Headless Digital Experience Platform Built for Commerce

Implement organic personalization in your SPA

Introduction

Goal

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

Background

Bloomreach Headless Experience Manager provides organic personalization of pages based on segmentations managed in Bloomreach Engagement.

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

Prerequisites

Organic personalization in Bloomreach Headless Experience Manager 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 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.

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

  2. 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.

  3. 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
    
  4. In 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.

That’s all! The Bloomreach Engagement SDK should set a cookie called __exponea__etc__ with the ID of the user. The segmentation library should trigger the Bloomreach Engagement API to get segment IDs by ID of the user and send them to the Delivery API's Pages endpoint. In the response from the API you should get personalized content.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?