---
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/006/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/006/cloud-sdk/cloud-sdk-reference/cloud-sdk-personalize.html "@sitecore-cloudsdk/personalize") package to run Sitecore Personalize web experiences[^UUID-43f58588-f5c0-18bb-a479-46fb52d56e18_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/006/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/006/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/006/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/006/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/006/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: "<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;
    };
    ```

    :::

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.

    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/006/cloud-sdk/developer-guides/personalization/web-personalization.html#UUID-0792a38c-c0b9-325e-46b3-e58ba4add219_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/006/cloud-sdk/developer-guides/personalization/events.html#UUID-bd306d06-cfa6-8d04-7d28-f089643fa63e_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/006/cloud-sdk/developer-guides/personalization/web-personalization.html#UUID-0792a38c-c0b9-325e-46b3-e58ba4add219_section-idm1903452116068506 "Capturing events in personalized content").
- Learn more about [running personalizations](https://doc.sitecore.com/sdk/en/developers/006/cloud-sdk/cloud-sdk-concepts/concepts-personalization.html "Personalization").
- Run Sitecore Personalize [interactive experiences](https://doc.sitecore.com/sdk/en/developers/006/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/006/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/006/cloud-sdk/cloud-sdk-concepts/concepts-tracking.html "Tracking") to capture [`VIEW`](https://doc.sitecore.com/sdk/en/developers/006/cloud-sdk/developer-guides/tracking/set-up-view-events.html "Set up VIEW events"), [`IDENTITY`](https://doc.sitecore.com/sdk/en/developers/006/cloud-sdk/developer-guides/tracking/set-up-identity-events.html "Set up IDENTITY events"), and [custom](https://doc.sitecore.com/sdk/en/developers/006/cloud-sdk/developer-guides/tracking/set-up-custom-events.html "Set up custom events") events.

[^UUID-43f58588-f5c0-18bb-a479-46fb52d56e18_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).