Set up web personalization

In your code editor, in the source code of your web app, locate the file where you initialized the Cloud SDK and the events and personalize packages.

"use client";
import { useEffect } from "react";
// Import SDK modules ->
import { CloudSDK } from "@sitecore-cloudsdk/core/browser";
import "@sitecore-cloudsdk/events/browser";
import "@sitecore-cloudsdk/personalize/browser";
import "@sitecore-cloudsdk/search/browser";
// <- Import SDK modules

export default function CloudSDKComponent() {
  useEffect(() => {
    CloudSDK({
      sitecoreEdgeContextId: "<YOUR_SITECORE_EDGE_CONTEXT_ID>",
      siteName: "<YOUR_SITE_NAME>",
      enableBrowserCookie: true
    })
     .addEvents() // Initialize the events package
     .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: { language: 'en' } }) // Initialize the personalize package
     .addSearch() // Initialize the search package
     .initialize();  // Run the initialization logic and set cookies
  }, []);

  return null;
};

In the initialization code, check that you import the browser modules of the events and the personalize packages:

// ...
import "@sitecore-cloudsdk/events/browser";
import "@sitecore-cloudsdk/personalize/browser";
// ...

Check that the object in the addPersonalize method sets webPersonalization property's language attribute to 'en':

CloudSDK({
  /* Your initialization settings */
})
  .addEvents()
  .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: { language: 'en' } })
  .initialize();

This code initializes all the required packages and enables web personalizations to run. Web personalizations will now automatically run once, when your web app first loads.

In your source code, depending on when you want to rerun web personalizations, check if scCloudSDK is available on the window object.

If scCloudSDK is available, run the window.scCloudSDK.personalize.triggerExperiences function.

When this function runs, web experiences will run again.

In Sitecore Personalize, click Experiences.

Click the web experience you want to work with.

Access the JavaScript of the web experience depending on the experience status:

In the JavaScript, depending on when you want to capture an event, run the applicable event-capturing function. These functions are exposed on the window object and are available on window.scCloudSDK.events.

For example, to capture a click on a button, you can run the event function:

window.scCloudSDK.events.event({ type: "myretailsite:CLICKED_BUTTON" });

This script runs the event function, which sends a custom event named myretailsite:CLICKED_BUTTON to Sitecore when, for example, a site visitor clicks a button in the web experience.