If you're new to CDP and Personalize and are going to be doing any form of development or marketing with it; I highly recommend taking the training and reviewing all the resources Dan mentioned in Sitecore CDP & Personalize Learning Resources.
Once you've had a nice review of that wealth of information, let's run through some quick and easy steps to get you up and running.
Setup
What you're looking to do is to update the main layout of your site with a <script> tag containing some JavaScript (which we will get into detail shortly). Depending on how your site is built there is any number of ways to do this. What I might recommend is having some form of configuration item or settings item that has a Rich Text field containing the Boxever JavaScript. This can then be loaded on the page. Makes for easy updates as needed.
The JavaScript
<script type="text/javascript">
// Define the Boxever queue
var _boxeverq = _boxeverq || [];
// Define the Boxever settings
var _boxever_settings = {
client_key: '{{clientKey}}', // Replace with your client key
target: '{{apiTargetEndpoint}}', // Replace with your API target endpoint specific to your data center region
cookie_domain: '{{cookieDomain}}', // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
javascriptLibraryVersion: '{{javascriptLibraryVersion}}', // Replace with the latest Boxever JavaScript library version"
pointOfSale: '{{pointOfSale}}', // Replace with the same point of sale configured in system settings"
web_flow_target: '{{web_flow_target}}', // Replace with path for the Amazon CloudFront CDN for Sitecore Personalize"
web_flow_config: { async: false, defer: false } // Customize the async and defer script loading attributes
};
// Import the Boxever library asynchronously
(function() {
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
s.src = 'https://d1mj578wat5n4o.cloudfront.net/boxever-{{clientVersion}}.min.js';
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>Let's break down what each parameter is and what you'll need to replace it with. Some are optional, but most are required.
Client Key - Required
You will get this within the CDP platform itself for the appropriate Organization located under Settings.
Target - Required
This is the API target endpoint. It's only one of three values, depending on your region.
https://api-us.boxever.com/v1.2- North Americahttps://api.boxever.com/v1.2- Europehttps://api-ap-southeast-2-production.boxever.com/v1.2- Asia
Cookie Domain - Optional
This will be the root domain for your site. If you're operating on a sub-domain, e.g. us.abccompany.com, the cookie domain will be .abccompany.com.
It is key that you include the period at the start of the domain.
JavaScript Library Version - Optional
You can find a list of versions that you can determine the appropriate version. Likely the latest version.
Point Of Sale - Required
The Point of Sale, while just a string value, is a required value to enable experiments to display data, and events of guests are displayed in the timeline.
You can set it, if you don't have one already, under System Settings > Points of Sale as shown here.
This will be the same value you use in any Stream API integrations.
Web Flow Target - Optional
While this is an optional parameter, if you're using Sitecore Personalize then you'll want to add it.
For the majority of clients, the value will be https://d35vb5cccm4xzp.cloudfront.net
Web Flow Config
For most, this value can be left alone unless you've been directed to by Sitecore. They're also only required if you're using Sitecore Personalize.
Client Version
This will be the same JavaScript version you chose above.
Let's Validate Our Setup
It's fairly straight-forward to setup as you can see, but we need to validate it. What's the simplest way to do that? Well, for this example I've setup a simple site on Glitch. It was fast and easy and allows me to quickly validate my JS.
Next, we log into our CDP environment and go over to Experiences > Web as shown below.
Once there, in the top right corner click Create Experience give it a name. I chose, "Validation Test".
I'm then going to select a pre-made Alert Bar template.
And with that, we've made something very, very simple.
After saving and closing, we're back at the main page of our Web Experience. While it's an optional step, it's important for this example to implement some Page Targeting.
Set it up with a URL to a page you can test with.
We can then select Preview and enter the name of the page we selected as part of Page Targeting.
But wait, it's not showing. What's wrong? Well, as part of the QA Tool we can see what's happening. When we entered our URL into Page Targeting we chose EQUALS and due to the preview containing query parameters, the URL isn't matching.
Updating the Page Targeting to be CONTAINS we now see the banner properly showing up.
Exiting the Preview, we can go back to our Experience and select Start and Publish. At that point, we can then track our experience in the Performance and Operational tabs of the Web Experience.
As our Experience has just started we won't have enough data. We also don't have a Goal set. So right now, it will be empty.
In our Operational tab, however, we can see that indeed our Experience is working and we now know our setup is correct and working as it should.
Our Setup Is Complete & Validated
Might seem like a lot of steps, but the more you do this the faster the process is. You also won't have to go through the process of setting up the code over and over for a single client; unless they have a lot of separate sites you need to track individually.
