Sitecore Peanuts: Troubleshoot personalization on xm cloud

Here are the troubleshooting steps below that helped personalization to work.

We checked the events analytics in the page builder but it was showing nothing for the interaction related to the personalization rules that we created. This mean something is not correct with personalization.
I Checked whether the sc_[your-environment-context-id]_personalize cookie is being generated or not. In our case this cookie was not creating in the browser. So it was clear that something is not right with personalization.
When personalization works internally, it executes the following graphql query. So I tried this in the edge playground.


query ($siteName: String!, $language: String!, $itemPath: String!) {
  layout(site: $siteName, routePath: $itemPath, language: $language) {
    item {
      id
      version
      personalization {
        variantIds
      }
    }
  }
}

Query Variables wrt to home page:

{ "siteName": "yoursitename", "language": "en", "itemPath": "/" }

It will give the response something as


{
  "data": {
    "layout": {
      "item": {
        "id": "9640F7E7BBF44502AC38D6FCDFE2C40C",
        "version": 1,
        "personalization": {
          "variantIds": [
            variantIds: [
              'fdfc2ba8bsdfsdfsdfsd938b6a11ec641',
              '0311f9sdfsdfsfwefwef8876a12b72873',
              'd2e63ccwgghsdsdfgfwer5c22b84052f3',
              '5540a6sdcewetgwgsdcsdcwgs116ee8c1',
          ]
        }
      }
    }
  }
}

In the response, you will see the variantIds. Please note, the default variant ID is not returned here, so if you created 4 additional personalization variants on top of the default, you should see two 4 different variant IDs.

If this is coming this means personalization middleware is able to get the personlization rules setup on the page.

Now try to run the layout query to check if it gives you the experiences json object to confirm that your personalization rules are correctly setup and are available on the page so that when personalization will work fine it will be able to get the correct rule specific data from the response.

We tested the following graphql query:

This confirmed that layout rules' datasources are configured correctly as we are able to get the datasources path in the experiences object.

Now need to check from code side if something is failing and for that we need to enable the sitecore personalization debugging by setting the DEBUG=sitecore-jss:personalize in the .env or .env.local file. It gives the complete logging info in the PS console or CMD where ever you have run the command (npm run start:connected) to run the site.
When you reload the page find for the text sitecore-jss:personalize. One instance should give like following


sitecore-jss:personalize personalize middleware start: {
  pathname: '/',
  language: 'en',
  hostname: 'yoursitename.localhost',
  headers: {
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
  accept-encoding: 'gzip, deflate, br, zstd',
  accept-language: 'en-GB,en-US;q=0.9,en;q=0.8',
  cache-control: 'max-age=0',
  connection: 'keep-alive',
  cookie: 'sc_site=yoursitename; sc_4TQLWsdfsdf4bQAITV=d60dbc09-sdfsdf-b4c4-5a0cf44fbe20; sc_4TQLWxfsdfsdU4bQAITV_personalize=ebasdfsdfsd-b8d0-2c3d9b10508e; _ga=GA1.1.1525788197.1767721218; _ga_JNR39H2DHS=GS2.1.s1767721217$o1$g1$t1767721219$j58$l0$h0',
  host: 'yoursitename.localhost:3000',
  referer: 'http://yoursitename.localhost:3000/',
  sec-ch-ua: '"Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"',
  sec-ch-ua-mobile: '?0',
  sec-ch-ua-platform: '"Windows"',
  sec-fetch-dest: 'document',
  sec-fetch-mode: 'navigate',
  sec-fetch-site: 'same-origin',
  sec-fetch-user: '?1',
  testing: 'yobwoc5991',
  upgrade-insecure-requests: '1',
  user-agent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36',
  x-forwarded-for: '::1',
  x-forwarded-host: 'yoursitename.localhost:3000',
  x-forwarded-port: '3000',
  x-forwarded-proto: 'http'
}
} +7s

Note the pathname. It should be your page URL. If there will any issue to load the personalization for this pathname it will be just after this block.

In our case the error was like

Personalization is not enabled.

I did something like following to enable it locally in the file \headapps\nextjs-starter\src\lib\middleware\plugins\personalize.ts

and, in the file \headapps\nextjs-starter\src\components\CdpPageView.tsx

After this I got new error as:

[IE-0018]: Personalize middleware failed:
[TypeError: (0 , server_2.CloudSDK)(...).addPersonalize is not a function]

When checked further on sitecore documenation here https://doc.sitecore.com/sdk/en/developers/latest/cloud-sdk/troubleshooting-the-cloud-sdk.html#ie-errors we noticed the resolution as in screenshot below:

On checking further we noticed that we had to upgrade the npm packages as follows:

and modify the code in the \headapps\nextjs-starter\src\Bootstrap.tsx as follows
After upgrading the packages and fixing the boostrap.jsx, the error for addPersonalize() method was resolved but still it wasn’t working. We searched for the text sitecore-jss:personalize in the PS console and now we noticed the error as