Personalizing content

Current version: 0.3

Using the personalize package of the Cloud SDK, you can run interactive full stack experiences and interactive full stack experiments that are live in Sitecore Personalize. These are personalizations that marketers create and configure in Sitecore Personalize.

Note

Personalizations in XM Cloud Pages Personalize automatically run in your JSS Next.js app, no coding required.

In the personalize package, the browser module lets you run personalization from the browser, and the server module lets you do it from the server. When you run the personalize function, you have to provide the friendly ID of the experience or experiment you want to run.

Note

In your JSS Next.js application, you can only use the browser-side functions of the Cloud SDK, available in the package's browser module.

When you run an interactive full stack personalization, two things happen:

  • As part of the network request, a payload is sent to Sitecore. The payload contains the friendly ID of the experience or experiment you want to run, and other optional data you can include. If the URL of the webpage where the personalize function runs contains UTM parameters, the payload will also contain the UTM parameters.

  • The personalized content is returned as part of the API response. You can use the received API response to display the content to your site visitor or take some other action based on the received data.

Example of interactive full stack experience

Consider an interactive full stack experience that is live in Sitecore Personalize. This experience has the friendly ID interactive_1, and its API response is configured to return the date the site visitor was first seen on your site:

RequestResponse

{ "guestWasFirstSeen": "${guest.firstSeen}" }

You can run this experience on your site by running the asynchronous personalize function, passing in the friendly ID of the experience. The function returns the API response of the experience. You can save the return value into a variable, for example, personalizeResponse, then log the value to the console:

RequestResponse

// ...
import { init, personalize } from "@sitecore-cloudsdk/personalize/browser";
// ...
const personalizeResponse = await personalize({
  channel: "WEB",
  currency: "USD",
  friendlyId: "interactive_1",
});

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

The following is logged to the console:

RequestResponse

This experience is now running: {guestWasFirstSeen: "2024-01-06T11:45:45.798Z"}

In this example, you can display a personalized message to your site visitor depending on when they were first seen on your site.

Note

If the API response is {"message":"No flow executed"}, make sure to start the experience or experiment so it's live in Sitecore Personalize.

Do you have some feedback for us?

If you have suggestions for improving this article,