Run Sitecore Personalize personalizations

In your code editor, in the sxastarter folder, open the terminal and install the personalize package by running the following command:

npm install @sitecore-cloudsdk/personalize

In src/pages/[[...path]].tsx, import the initializer function of the browser module:

import { init } from "@sitecore-cloudsdk/personalize/browser";

src/pages/[[...path]].tsx is a catch-all route. The code you add to it will run on all the webpages of your app.

Inside the SitecorePage constant, directly before the return statement, paste the following code then save your changes:

const initPersonalize = async () => {
    await init({
        sitecoreEdgeContextId: "<YOUR_CONTEXT_ID>",
        siteName: "<YOUR_SITE_NAME>",
        enableBrowserCookie: true,
    });

    console.log("Initialized the personalize/browser module.");
};

initPersonalize();

Replace the placeholder values with environment variable values from your SitecoreAI instance.

This code initializes the module using your Context ID and site name, and it sets cookies from the browser side.

In Sitecore Personalize, click Experiences.

Click the live interactive experience you want to run.

On the page of the experience, click Build summary. The friendly ID is in the Details pane.

Make a note of the friendly ID. You'll use it in the next procedure to run the experience.

In your code editor, in src/pages/[[...path]].tsx, modify the import statement for the personalize/browser module to also import the personalize function:

import { init, personalize } from "@sitecore-cloudsdk/personalize/browser";

Inside the initPersonalize function, directly after the existing console.log() statement, paste the following code:

const personalizeResponse = await personalize({
  channel: "<YOUR_CHANNEL>", // example: "WEB"
  currency: "<YOUR_CURRENCY>", // example: "EUR"
  friendlyId: "<YOUR_EXPERIENCE_FRIENDLY_ID>",
});

console.log("This experience is now running:", personalizeResponse);

Replace the placeholder value with the friendly ID of your experience.

See all the possible values for channel and currency in the reference documentation for the personalize package.

This code runs the experience and logs its API response to the console.

Save your changes.

Start your rendering app by entering the following command in your terminal:

npm run start:connected

In your web browser, navigate to your JSS Next.js app, typically at http://localhost:3000.

In your web browser's developer tools, on the Console tab, verify that you see the following logs in the console:

Initialized the personalize/browser module.
This experience is now running: {...}

The second log contains the response that was created for this experience in Sitecore Personalize.

In the developer tools, on the Network tab, in the Filter field, paste the following URL: edge-platform.sitecorecloud.io.

Doing this lists the network requests made to Sitecore.

In the list of requests, click a POST request with a status of 200 OK and a name that starts with personalize.

In the request details pane, click the Response tab for the request.

The API response appears. This is the response that was created for this experience in Sitecore Personalize.