Zone configuration for React SPA

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

Zone configuration using Stable version of Library (v1.5.0)

Prerequisites

When registering a React Single-Page Application (React SPA) in Acoustic Personalization, you must select the channel type as MPA.
In the case of React SPA, the Acoustic Exchange Capture loads the Personalization Library. To specify the Personalization Library version, see Install Personalization Library for MPA
Ensure that the zones of your SPA have the same ZoneId as registered on the Zone registration page of Acoustic Personalization.
Ensure that your React SPA is configured with Acoustic Exchange Capture and a tagging and analytics library (such as Google Analytics or Adobe Analytics).

To configure the zones of your React-based Single-Page Application (SPA), complete these steps:

Add the following code in the component file to which the identified zone belongs, before the render() function.

constructor () {
     super();
     this.WRTP = acoustic.personalization.JsWRTP.create();
     this.state = {
        contentOne: ''
        };
   }
  componentDidMount () {
      this._isMounted = true;
      this.zoneId = "ID of zone to be personalized";
      this._isMounted &&
      this.WRTP.onReady(()=>{
         let contentId = this.WRTP.getContentId(this.zoneId);
         this._isMounted &&
         this.setState({
             contentOne: contentId,
             });
      });
  }
  componentWillUnmount () {
    this._isMounted = false;
    }

Integrate with your rendering logic.
The rendering logic should return a valid HTML div similar to the code snippet below.

return (
    <div id="<<zoneID>>"
     key={
           this.state.contentOne !== 'DCIDNF404'
           ? this.state.contentOne
           : defaultContent
         }>
     {/*Add the code for rendering logic by setting HTML5 element attribute
  with contentId*/}
     <img
       /*HTML5 element attribute, eg:*/ src = {
       this.state.contentOne !== 'DCIDNF404'
             ? this.state.contentOne
             : defaultContent
          }
      />
   </div>
  );

In the code snippet, replace the ZONEID with the ID of the zone to be personalized.

Zone configuration using Latest version of Library

You can use this procedure for personalization library versions 2.0.0., 2.1.0, and 2.2.0.

To configure the zones of your React-based Single-Page Application (SPA), complete these steps:

Updates to RootComponent.jsx

Add the following code to import the Personalization Library object into the client application.

import { PersonalizationLibrary } from "@acoustic/personalization";

Export the PersonalizationContext to use it across the website.

export const PersonalizationContext = React.createContext();

Initialize the personalizationObject inside the RootClass of the application.

const personalizationObject = PersonalizationLibrary.create();

Wrap the application router with the provider of the PersonalizationContext so that the personalization object data can be shared across the website.

<PersonalizationContext.Provider value={ personalizationObject }></PersonalizationContext.Provider>

The completed Root component should look similar to the one shown here.

class RootClass extends React.Component { 
 
const personalizationObject = PersonalizationLibrary.create();
 
render() {
return (
<PersonalizationContext.Provider value={ personalizationObject }>
<Router >
<Switch>
<Route></Route>
.
.
<Route></Route>
</Switch>
</Router>
</PersonalizationContext.Provider>
);
}

Updates to TargetComponent.jsx

Import the PersonalizationContext from the app/root module of the application.

import { PersonalizationContext } from "<path to the app/root module>";

At the end of the class file, set the context type of the target component as Personalization context so that we can use the personalization functionalities in the target component.

TargetComponentClass.contextType = PersonalizationContext;

Configure the content personalization.
The switch case shown below illustrates the processing for various content types. The following content types are currently supported:

recommendation
custom-url
custom-html
wch-html
wch-url
"" : To be used when the content returned is a default content.

If needed, you can add the processing for other content types as per your requirement.

componentDidMount() { 
this.personalizationObject = this.context;
 
function personalizationHandler(result) {
    	switch(result.type) {
        	case "recommendation": 
            		return displayRecommendations(result);
        	case "custom-url":
            		return displayCustomUrl(result);
        	case "custom-html":
            		return displayCustomHtml(result);
        	case "wch-url":
            		return displayWchUrl(result);
        	case "wch-html":
            		return displayWchHtml(result);
        	case "":
            		return displayDefaultContent(result);
    	}
}

Definitions of the helper functions

The following code snippet provides the definitions of helper functions inside the personalizationHandler() function.

function displayDefaultContent(content) {
    // return the default content
}

function displayDefaultHTMLContent(content) {
    // return the default HTML content
}

function displayCustomHtml(content) {
    let contentId = content.value
    if (contentId && contentId !== 'CONNF404') {
        // return the personalized html content
    } else {
        displayDefaultHTMLContent(content);
    }
}

function displayWchHtml(content) {
    let contentId = content.value
    if (contentId && contentId !== 'CONNF404') {
        // return the personalized html content
    } else {
        displayDefaultHTMLContent(content);
    }
}

function displayCustomUrl(content) {
    let contentId = content.value;
    if (contentId && contentId !== "CONNF404") {
        // return the personalized content
    } else {
        // return the default content
        displayDefaultContent(content);
    }
    
}

function displayWchUrl(content) {
    let contentId = content.value;
    if (contentId && contentId !== "CONNF404") {
        // return the personalized content
    } else {
        // return the default content
        displayDefaultContent(content);
    }
    
}

function displayRecommendations(products) {
    let recommendations = products.value;
    if (recommendations && recommendations !== "CONNF404") {
        // return the personalized recommendations
    } else {
        // return the default recommendations
        return displayDefaultContent(products);
    }
}

Configure the personalized zones.

this.personalizationObject.onReady(() => {
 this.personalizationObject.getContent({zoneId : '<ZoneRegId>', num: <numberofproducts>[OPTIONAL]})
        .then(result =>{ this.setState({
                       <VARIABLE_NAME>: personalizationHandler(result) 
                     // Replace <VARIABLE_NAME> with personalized content.
                       });
              });
      });

Use the <VARIABLE_NAME> appropriately to render the personalized content.

If <VARIABLE_NAME> is 'CONNF404' then show the default content, otherwise display the personalized content or recommendations.