1. @sitecore-cloudsdk/personalize/browser

personalize

Version:

Type

Function

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

Name

Type

Description

personalizeData

PersonalizeData

Required.

Event and experiment data.

opts

object

Optional.

Additional personalization options.

Opts properties

Name

Type

Description

Value

timeout

integer

Optional.

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

Next.js

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

JSS Next.js

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!