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 on the browser side.

In Sitecore Personalize, click Experiences > Full stack, then the live interactive experience you want to run.

On the page of the experience, click Summary. The friendly ID is on the Details pane.

Copy the friendly ID. You'll use it in the next procedure to run the experience.

In your code editor, in src/pages/[[...path]].tsx, update the import statement for the personalize/browser module by importing the personalize function:

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

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

const personalizeResponse = await personalize({
  channel: "WEB",
  currency: "USD",
  friendlyId: "<YOUR_EXPERIENCE_FRIENDLY_ID>",
});

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

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

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: https://edge-platform.sitecorecloud.io/personalize.

This lists the network requests related to running your experience.

In the list of requests, click a POST request that has the status of 200 OK.

A pane of request details displays.

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

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