Set up interactive personalization

To run the experience:

1. In your code editor, in the source code of your web app, open one of your components, for example, src/components/Promo.tsx.

2. At the top of the file, import useEffect from react and the personalize function from the browser module of the personalize package.

   import { useEffect } from "react";
   import { personalize } from "@sitecore-cloudsdk/personalize/browser";

3. In the Default component, on the first line of the function body, paste the following code, then save your changes:

   const getPersonalizeData = async () => {
     const personalizeResponse = await personalize({
       channel: "WEB",
       friendlyId: "<YOUR_EXPERIENCE_FRIENDLY_ID>"
     });
   
     console.log("This experience is now running:", personalizeResponse);
   }
   
   useEffect(() => {
     getPersonalizeData();
   });

   Replace the placeholder value with the friendly ID of your experience.

   When the webpage loads, this code runs the experience and logs its API response to the console.

   Tip

   In production, we recommend you pass more event and experiment data to the personalize function to make sure that your web app captures rich event data.

To run the experience:

1. In your code editor, in the source code of your web app, create a component, for example, src/app/components/Promo.tsx.

2. Paste the following code into Promo.tsx, then save your changes:

   "use client";
   import { useEffect } from "react";
   import { personalize } from "@sitecore-cloudsdk/personalize/browser";
   
   export default function Promo(){
     return (<></>);
   }

   This code imports useEffect from react and the personalize function from the browser module of the personalize package.

3. Inside the default function, before the return statement, paste the following code, then save your changes:

   const getPersonalizeData = async () => {
     const personalizeResponse = await personalize({
       channel: "WEB",
       friendlyId: "<YOUR_EXPERIENCE_FRIENDLY_ID>"
     });
   
     console.log("This experience is now running:", personalizeResponse);
   }
   
   useEffect(() => {
     getPersonalizeData();
   });

   Replace the placeholder value with the friendly ID of your experience.

   When the webpage loads, this code runs the experience and logs its API response to the console.

   Tip

   In production, we recommend you pass more event and experiment data to the personalize function to make sure that your web app captures rich event data.

To verify that the experience is running:

1. In your terminal, enter npm run start:production to start your JSS Next.js app.

   Tip

   If your app fails to compile due to linting errors, consider disabling ESLint rules.

2. In your web browser, navigate to your JSS Next.js app, typically at http://localhost:3000.

3. In your web browser's developer tools, on the Console tab, verify that you see the following log in the console:

   This experience is now running: {<...>}

   This log contains the response that was created for this experience in Sitecore Personalize.

4. In the developer tools, on the Network tab, in the Filter field, paste the following URL: edge-platform.sitecorecloud.io.

   Doing this lists the network requests made to Sitecore.

5. In the list of requests, click a POST request with a status of 200 OK and a name that starts with personalize.

6. In the request details pane, click the Response tab for the request.

   The API response appears. This is the response that was created for this experience in Sitecore Personalize.

To verify that the experience is running:

1. In your terminal, enter npm run dev to start your Next.js app, then open the products page of your app in your web browser.

2. In your web browser's developer tools, on the Console tab, verify that you see the following log in the console:

   This experience is now running: {<...>}

   This log contains the response that was created for this experience in Sitecore Personalize.

3. In the developer tools, on the Network tab, in the Filter field, paste the following URL: edge-platform.sitecorecloud.io.

   Doing this lists the network requests made to Sitecore.

4. In the list of requests, click a POST request with a status of 200 OK and a name that starts with personalize.

5. In the request details pane, click the Response tab for the request.

   The API response appears. This is the response that was created for this experience in Sitecore Personalize.