Set up interactive personalization

Version:

You can use the Cloud SDK personalize package to run interactive experiences interactive experiences that are live in Sitecore Personalize. You typically run interactive experiences in components in a webpage, not necessarily on the webpage itself. Running the experience will return an API response, which contains the personalized content. You can use the API response to display content to your site visitor or take other actions, depending on your application requirements.

This walkthrough describes how to:

Before you begin

Have a live interactive experience in Sitecore Personalize to work with.
In your code editor, open the root folder of your web app.
Install and initialize the Cloud SDK and the personalize package.

Find the friendly ID in Sitecore Personalize

The first step to running an interactive experience is to find its friendly ID friendly ID.

To find the friendly ID:

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.

Run the experience on your site

After finding the friendly ID of the experience, you update your Cloud SDK code in the source code of your web app and run the experience on your site.

JSS Next.js

To run the experience:

In your code editor, in the source code of your web app, open one of your components, for example, src/components/Promo.tsx.

At the top of the file, import useEffect from react and the personalize function from the browser module of the personalize package.

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

In the Default component, on the first line of the function body, paste the following code, then save your changes:

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

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

useEffect(() => {
  getPersonalizeData();
});

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

When the webpage loads, this code runs the experience and logs its API response to the console.

Tip

In production, we recommend you pass more event and experiment data to the personalize function to make sure that your web app captures rich event data.

Next.js

To run the experience:

In your code editor, in the source code of your web app, create a component, for example, src/app/components/Promo.tsx.

Paste the following code into Promo.tsx, then save your changes:

"use client";
import { useEffect } from "react";
import { personalize } from "@sitecore-cloudsdk/personalize/browser";

export default function Promo(){
  return (<></>);
}

This code imports useEffect from react and the personalize function from the browser module of the personalize package.

Inside the default function, before the return statement, paste the following code, then save your changes:

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

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

useEffect(() => {
  getPersonalizeData();
});

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

When the webpage loads, this code runs the experience and logs its API response to the console.

Tip

In production, we recommend you pass more event and experiment data to the personalize function to make sure that your web app captures rich event data.

Verify that the experience is running

After updating your code, it's a good idea to check that the experience is running on your site.

JSS Next.js

To verify that the experience is running:

In your terminal, enter npm run start:production to start your JSS Next.js app.

Tip

If your app fails to compile due to linting errors, consider disabling ESLint rules.
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 log in the console:
This experience is now running: {<...>}
This 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.

Next.js

To verify that the experience is running:

In your terminal, enter npm run dev to start your Next.js app, then open the products page of your app in your web browser.
In your web browser's developer tools, on the Console tab, verify that you see the following log in the console:
This experience is now running: {<...>}
This 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.

Next steps

You've now successfully run the experience on your site and received the API response for the experience in your web app. You can now proceed to work with the response, for example, by displaying its content on your site.

Next, you can:

Learn more about running personalizations.
Run Sitecore Personalize web experiences.
Explore the reference documentation for the personalize package.
Set up other Sitecore DXP capabilities, such as using tracking to capture VIEW, IDENTITY, and custom events.

If you have suggestions for improving this article, let us know!