1. Functions

personalize

Version:
TypeFunction
Import path@sitecore-cloudsdk/personalize/browser

From the browser side, runs interactive experiences and experiments that are live in Sitecore Personalize. Automatically captures UTM parameters from the URL of the webpage where the function runs.

Signature

export async function personalize(
  personalizeData: PersonalizeData,
  opts?: { timeout?: number }
): Promise<unknown | null | FailedCalledFlowsResponse>

Parameters

NameTypeDescription
personalizeDataPersonalizeDataRequired.

Event and experiment data.
optsobjectOptional.

Additional personalization options.

Opts properties

NameTypeDescriptionValue
timeoutintegerOptional.

The number of milliseconds before the function times out and returns an error.

For example, for the function to time out in 10 seconds, set the value to 10000.

Minimum: 0.		10000

Return value

Returns the API response of the interactive experience or experiment.

Examples

Example 56. Running the personalize function

Note

To run this function, you have to first initialize the Cloud SDK.

See more examples and other data you can include in the event.

Here's an example of how to use the personalize function:

"use client"; // Used only in Next.js App Router
import { personalize } from "@sitecore-cloudsdk/personalize/browser";

export default function Component(){
  const runPersonalization = async () => {
    const personalizeData = {
      channel: "WEB",
      friendlyId: "running_shoes_popup_02"
    };

    const personalizeResponse = await personalize(personalizeData);
    console.log("Ran personalization.", personalizeResponse);
  };

  return (
    <div>
      <button onClick={runPersonalization}>run personalization</button>
    </div>
  );
};

personalizeRes contains the API response that the experience or experiment was configured to return.

:::

Example 57. Running the personalize function

Here's an example of how to use the personalize function:

import { useEffect } from "react";
import { personalize } from "@sitecore-cloudsdk/personalize/browser";
import {
  CdpHelper,
  useSitecoreContext,
} from '@sitecore-jss/sitecore-jss-nextjs';
import config from 'temp/config';

// ...

const SitecorePage = ({
  notFound,
  componentProps,
  layoutData,
  headLinks,
}: SitecorePageProps): JSX.Element => {
  // ...
  const {
    sitecoreContext: { route, variantId, site },
  } = useSitecoreContext();

  const language = route.itemLanguage || config.defaultLanguage;
  const pageId = route.itemId;
  const componentId = 'your_component_id';
  const scope = customScope || process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE;
  const friendlyId = CdpHelper.getComponentFriendlyId(
    pageId,
    componentId,
    language,
    scope,
  );

  // Ensure the module is initialized with CloudSDK().initialize() beforehand...

  // Run personalization:
  const personalizeRes = await personalize({
    channel: "WEB",
    friendlyId,
  });

  console.log("Personalized content:", personalizeRes);
  };
  // ...
};

personalizeRes contains the API response that the experience or experiment was configured to return.

:::

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