Sitecore Personalize: The Secret of Writing Code in the Product

Hello Friends, it’s Dylan. Today, I'm here to discuss creating various programmables in Sitecore Personalize and share some "secret" tips to simplify coding for this platform. These tips are particularly helpful for those new to Sitecore Personalize. I used these secrets along with Chat GPT to create recipes that mimic Sitecore XP's pattern and profile cards using the N-Dimension Euclidean Distance calculation.

New to Sitecore Personalize

If you are new to Sitecore Personalize, then you may not be familiar with why you would need to write code within the platform. I’ve possibly covered a brief intro to this topic in other blog posts, but let's talk through this specific topic in more detail in this blog post. There are really two types of personas that would typically interact with Sitecore Personalize (technically there are probably a lot more, but I am generalizing here in this blog post). There is the Marketer or Strategist who has come up with a strategy of how they would like to target customers and personalize the experiences on the site. Unfortunately, even with this strategy, the site cannot begin to be personalized without a decent amount of work from the second persona, which is the developer.

Now, developers working with Personalize will mostly need JavaScript to work within the tool. Those who track information or consume the experiences (assuming they aren’t using Web Experiences) will require someone who understands JavaScript because most of the customizations/extensions in Personalize require JavaScript development. Some of the parts of the tool that require JavaScript include the following:

• Decision Model Programmables (which honestly is going to be a large portion to every decision model that is created).
• Conditions (For XMC or Experiences/Experiments)
• JS Modules
• Decision Templates (These are for Programmables you would like to reuse multiple times)
• Web Templates
• Output format for Audience Export

In CDP or Personalize, you can write one-off JavaScript to control application responses. If you're staffing a Sitecore Personalize project, remember that the required skills differ from those needed for traditional Sitecore projects.

JavaScript Flavor and Its Integration with Sitecore Personalize

So now that we’ve talked about the need for JavaScript experience when working with Sitecore Personalize, now lets talk a little bit about the specifications and why that is, when working with Sitecore Personalize or CDP customizations within the product itself. The front end of the application uses Angular to build the UI (this is nothing secret because you can inspect the UI and see that it is indeed using Angular). But much of the JavaScript that you write for the app, will actually run Server Side, for example, when you trigger a Full Stack Interactive Experience, you are essentially calling and API, and the JavaScript that you’ve written will run Server Side, by interpreter to help come up with the results you are looking for (or help you make a decision). Now it’s because of that, that affects the type of JavaScript you can use to write for the app (as of the writing of this article, because things could change in the future). Without sharing anything I’m not allowed to share, the flavor of JavaScript that you write for within Personalize is ECMAScript 5.0.

For those that know anything about JavaScript, you know that ECMAScript 5.0 is quite outdated, but knowing this is actually extremely useful information, because as you’ll see in my next example, about combining this with Chat GPT, you can then instruct it to either help you convert your code to this version, or you could even use something like Typescript locally and have it process the code into this format for working with the Serializer that I built last year (will talk about this in a future blog).

Examples of Using Chat GPT 4 with Sitecore Personalize

So now that we are aware of the flavor of JavaScript that Sitecore Personalize uses internally, lets look at some ways that ChatGPT can be used to help us write the JavaScript needed for an experience. What I did was always instruct Chat GPT (or any LLM will work for this, that understands JavaScript and code real well) with something like this before I start asking it to generate the code:

Copy
1Only provide code suggestions in JavaScript ECMAScript 5.0.

That provides the instruction to limit the output from the LLM. Next, you may want to add additional context about how Sitecore Personalize structures its data. In our case, we will want to pull Guest Session information, so we can provide additional context that looks like this. If you haven’t had the chance to read this blog post here, where I discuss the basics of prompt engineering, here I’m providing an example of the Guests, Session, and Events object, so it can write code that can traverse this type of Guest object.

Copy
1I will have access to a Guest object, below is an example of what this guest object could look like:
2const guest = {
3  "ref": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
4  "clientKey": "ead1585084d8c4b28b6671f29d8d1d3b",
5  "gender": "unknown",
6  "sessions": [
7    {
8      "ref": "97a22c3f-b564-50fd-aeea-6331ae1356d8",
9      "clientKey": "ead1585084d8c4b28b6671f29d8d1d3b",
10      "guestRef": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
11      "status": "OPEN",
12      "sessionType": "EMAIL",
13      "duration": 0,
14      "channel": "EMAIL",
15      "events": [
16        {
17          "ref": "73c0f6a4-7d64-4136-bf40-3c66cd3bf3e7",
18          "clientKey": "ead1585084d8c4b28b6671f29d8d1d3b",
19          "type": "TRACKING",
20          "status": "PROCESSED",
21          "channel": "WEB",
22          "sessionRef": "97a22c3f-b564-50fd-aeea-6331ae1356d8",
23          "flowExecutionRef": "4248ad2e-39f5-4a4a-9315-c563c7455f84",
24          "arbitraryData": {
25            "flowExecution": {
26              "ref": "4248ad2e-39f5-4a4a-9315-c563c7455f84",
27              "occurredAt": 1720595885143,
28              "flowRef": "ce1ba0e6-b51e-4dde-a127-f259d4beb729",
29              "flowFriendlyId": "experience_472880",
30              "flowVariantRef": "0bd46275-4c58-46a9-8fef-e5479ac28ec3",
31              "guestRef": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
32              "causalEventRef": "8a74c3b2-f733-4ed6-869e-408fc7f48a7c",
33              "flowExecutionTimeMs": 438,
34              "status": "SUCCESS"
35            }
36          }
37        }
38      ]
39    }
40  ],
41  "timeslotId": 1,
42  "timeslotDesc": "Morning"
43}

Once you’ve provided this initial context, you can combine all of this in either the same session chat or as one single prompt. Sometimes it seems to perform better when it’s all provided in a single question because it may forget the rest of the context of the chat history. In our case, I’m going to ask it to generate a script that does the following:

Copy
1Can you create me a script that looks through the guest object, and gets back all sessions that have arbitrary data in the events and have channel of the session that matches "Web"

I used Microsoft Copilot to run this set of instructions, and it seemed not to take into account all my instructions as I got back the following:

Copy
1const guest = {
2  // ... (your guest object here)
3};
4
5// Filter sessions with arbitrary data and channel "WEB"
6const filteredSessions = guest.sessions.filter(session => {
7	return session.events.some(event => event.arbitraryData && session.channel === "WEB");
8});
9
10console.log(filteredSessions);
11

So, I had to remind it that it should only suggest code that’s ECMAScript 5.0 and that the .some method doesn’t exist. This is what I got back:

Copy
1var guest = {
2  // ... (your guest object here)
3};
4
5var filteredSessions = [];
6for (var i = 0; i < guest.sessions.length; i++) {
7  var session = guest.sessions[i];
8  if (session.channel === "WEB") {
9    for (var j = 0; j < session.events.length; j++) {
10      var event = session.events[j];
11      if (event.arbitraryData) {
12        filteredSessions.push(session);
13        break; // No need to check other events for this session
14      }
15    }
16  }
17}
18
19console.log(filteredSessions);
20

Much better. However, it did add a console.log, which doesn’t work with Sitecore Personalize. You could update the context and let it know it should return print(‘’) instead of console logs.

That's it! Now, we can copy this code into Sitecore Personalize and use it in our programmable or wherever we need this logic.

Extra Credit

In an upcoming blog post, I'll demonstrate how to use Chat GPT with function calls to automate the creation of Experiences or other items in Sitecore Personalize. If you're eager to get started, feel free to try it out and leave me a message to share your experience.