--- title: "Set up web personalization" slug: "set-up-web-personalization" abstract: "Use the Cloud SDK to show your site visitors personalized content from web experiences created in Sitecore Personalize." --- # Set up web personalization > [!important] > If you [installed and initialized the Cloud SDK using all the browser-side code examples](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/install-and-initialize-the-cloud-sdk.html "Install and initialize the Cloud SDK"), web personalizations already run automatically in your app. > > Web personalizations are only available on the browser side. You can use the Cloud SDK [`personalize`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize.html "@sitecore-cloudsdk/personalize") package to run Sitecore Personalize web experiences[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N669e3b83b169e] and web experiments. When these personalizations run, they automatically display to the site visitor. This walkthrough describes how to: :::walkthrough 1. [Enable web personalizations](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-web-personalization.html#enable-web-personalizations) 2. [Rerun web personalizations (optional)](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-web-personalization.html#rerun-web-personalizations-optional) 3. [Capture events in personalized content (optional)](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-web-personalization.html#capture-events-in-personalized-content-optional) ::: > [!note] > **Before you begin** > - Have a [web experience](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/introduction-to-web-experiences-in-sitecore-personalize.html) in Sitecore Personalize to work with. > > - In your code editor, open the root folder of your web app. > > - [Install and initialize](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/install-and-initialize-the-cloud-sdk.html "Install and initialize the Cloud SDK") the Cloud SDK and the `events` and `personalize` packages, on the browser side. ## Enable web personalizations The first step to running web personalizations is to enable them in your Cloud SDK initialization code. You wrote this code when you [installed and initialized](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/getting-started/install-and-initialize-the-cloud-sdk.html "Install and initialize the Cloud SDK") the `events` and `personalize` packages on the browser side. To enable web personalizations: 1. 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. :::tab{title="JSS Next.js"} If you're using a JSS Next.js app, the initialization code is in [`Bootstrap.tsx`](https://github.com/Sitecore/jss/blob/dev/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx). ::: :::tab{title="Next.js"} If you're using a Next.js app, the initialization code looks similar to: ```typescript "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: "", siteName: "", 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; }; ``` ::: 2. In the initialization code, check that you import the `browser` modules of the `events` and the `personalize` packages: ```typescript // ... import "@sitecore-cloudsdk/events/browser"; import "@sitecore-cloudsdk/personalize/browser"; // ... ``` 3. Check that the object in the `addPersonalize` method sets `webPersonalization` property's `language` attribute to `'en'`: ```typescript CloudSDK({ /* Your initialization settings */ }) .addEvents() .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: { language: 'en' } }) .initialize(); ``` > [!important] > Make sure that your initialization code also runs the `addEvents` method, which initializes the `events` package. Web personalizations require that both the `events` and the `personalize` packages are initialized. > > The `language` attribute was added to the `addPersonalize` method's `webPersonalization` property in Cloud SDK 0.5.6 to support languages for web personalization. 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. ## Rerun web personalizations (optional) After you enabled web personalizations, they automatically run once when your app first loads. Depending on your application requirements, [you might want to rerun web personalizations](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/web-personalization.html#UUID-38cbd9c3-5245-1fd1-93ab-839e48b4b838_section-idm1903452115794058 "Rerunning web personalizations"). To rerun web personalizations: 1. In your source code, depending on when you want to rerun web personalizations, check if `scCloudSDK` is available on the `window` object. 2. If `scCloudSDK` is available, run the `window.scCloudSDK.personalize.triggerExperiences` function. When this function runs, web experiences will run again. ## Capture events in personalized content (optional) Optionally, you can capture events that occur inside a web experience or web experiment. For example, when a site visitor clicks a button in a personalized pop-up. > [!note] > After enabling web personalizations in your app, web experiences and web experiments based on the [out-of-the-box **Sitecore Library** templates](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/create-a-variant-for-a-web-experiment-using-a-web-template.html) automatically capture events, no coding required. > > Only complete this procedure if you want to capture events in web experiences and web experiments based on your own, custom templates. To capture events in personalized content: 1. In Sitecore Personalize, click **Experiences**. 2. Click the web experience you want to work with. 3. Access the JavaScript of the web experience depending on the experience status: - In a *draft* web experience, in the **Experience** section, click **Create variant**, then select a template, then click **Advanced edit** > **JavaScript**. - In a *live* web experience, click **Pause**, then click **Build** > **Experience** > **Edit** > **Advanced edit** > **JavaScript**. 4. In the JavaScript, depending on when you want to capture an event, run [the applicable event-capturing function](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/events.html#UUID-b78ff86e-4442-71e7-edc6-81adf8fabe27_section-idm234666143928668 "Events are exposed to the window object"). 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: ```typescript 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. ## Next steps You've now successfully enabled web personalizations in your web app. Next, you can: - Learn more about [capturing events in personalized content](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/web-personalization.html#UUID-38cbd9c3-5245-1fd1-93ab-839e48b4b838_section-idm1903452116068506 "Capturing events in personalized content"). - Learn more about [running personalizations](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-personalization.html "Personalization"). - Run Sitecore Personalize [interactive experiences](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-interactive-personalization.html "Set up interactive personalization"). - Explore the reference documentation for the [`personalize`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize.html "@sitecore-cloudsdk/personalize") package. - Set up other Sitecore DXP capabilities, such as using [tracking](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking.html "Tracking") to capture [`VIEW`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/set-up-view-events.html "Set up VIEW events"), [`IDENTITY`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/set-up-identity-events.html "Set up IDENTITY events"), and [custom](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/set-up-custom-events.html "Set up custom events") events. [^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N669e3b83b169e]: A type of personalization (experience or experiment) created in Sitecore Personalize typically by marketers. A [web experience](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/introduction-to-web-experiences-in-sitecore-personalize.html) or [web experiment](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/introduction-to-web-experiments-in-sitecore-personalize.html) enables marketers to create personalized content, offers, and operational messages using [web templates](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/en/web-templates.html).