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 followsAfter 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
IE-0002 | Timeout exceeded. The server did not respond within the allotted time. |
This error’s resolution was to increase the default timeout value of 400 to greater than this. I tried with following in the .env file.
After doing all those steps. I noticed that cookiesc_[your-environment-context-id]_personalizeis now available.
Now when I reload the page then all the personalization rules based on utm query string and device were working fine.
