Configuring the zones of React SPA

Configure the zones of your React-based Single-Page Application (SPA) for personalization using Acoustic Personalization.

In the case of React SPA, the Acoustic Exchange Capture loads the Personalization Library.

Prerequisites

  • When registering a React Single-Page Application (React SPA) in Acoustic Personalization, you must select the channel type as MPA.
  • Specify the appropriate Personalization Library version URL in the Personalization Library text box in Acoustic Exchange Capture.
    • To use the stable version of Personalization Library, specify the URL as: //my2.digitalexperience.ibm.com/2fec40e4-091c-40ca-b1df-d45cf19144da/wrtp/prod/acoustic-personalization-stable.js

      By default, Acoustic Personalization uses the stable version of Personalization Library.

    • If you want to use a specific version of Personalization Library, for example version 1.2.0, then you must specify the URL as: //my2.digitalexperience.ibm.com/2fec40e4-091c-40ca-b1df-d45cf19144da/wrtp/prod/acoustic-personalization-1.2.0.js
  • Ensure that the zones of your SPA have the same ZoneId as registered on the Zone registration page of Acoustic Personalization.
  • Ensure that your SPA is configured with Acoustic Exchange Capture and a tagging and analytics library (such as Google Analytics, Digital Analytics, or Adobe Analytics).