Sitecore CDP & Personalize module aims to support your marketing strategy and accelerate integration with the Sitecore Customer Data Platform (CDP). The module ships a bunch of handy CMS-agnostic scripts that can be easily incorporated into your Sitecore website regardless of its version or even a non-Sitecore project.
At first you need to provision your Sitecore CDP & Personalize instance and create at least one Point of Sale (see here). Once all preps are done you can start integrating your website with Sitecore CDP.
The below technique will work with any version of Sitecore XM or XP implementation that follows the MVC development approach.
Assume that your Sitecore CDP & Personalize instance has been successfully provisioned and at least one Point of Sale has been created. If so then the next step is to load the Boxever JavaScript Library on your Sitecore website. The sitecore-cdp-library View Rendering (the file path is ..\src\Sitecore\SitecoreCDP\Foundation\SitecoreCDP\Views\CDP\sitecore-cdp-library.cshtml) defines the core Boxever settings and imports the Boxever JavaScript Library. Ideally, you want to activate the Boxever JavaScript Library on all your webpages, therefore, you can incorporate this View into the concerned Layouts by adding the following code line as the first <script> element before the closing </body> tag to not slow down the overall website user experience:
@Html.Partial("~/Views/CDP/sitecore-cdp-library.cshtml")
For ease, the Boxever initialisation parameters along with some Sitecore CDP event attributes are defined as configuration settings in ..\src\Sitecore\SitecoreCDP\Foundation\SitecoreCDP\App_Config\Include\SitecoreCDP.config. Please replace the placeholder values with the required details from your Sitecore CDP & Personalize instance, this guidance explains where to collect the necessary information about your Sitecore CDP & Personalize setup.
After you have successfully activated the Boxever JavaScript Library, you can start sending data to Sitecore CDP. The create-view-event View Rendering (the file path is ..\src\Sitecore\SitecoreCDP\Foundation\SitecoreCDP\Views\CDP\create-view-event.cshtml) creates a VIEW event object and sends the event data to Sitecore CDP dynamically pulling the language and page URL from the Sitecore.Context.Item. Following the common event-triggering nature, the VIEW event triggers every time your webpage loads, so it makes sence to place this view at a Layout level too, for example, add the below code line to your Layouts before the closing </body> tag right after the Boxever JavaScript Library initialisation and import:
@Html.Partial("~/Views/CDP/create-view-event.cshtml")
By default the browser ID is the main Event ID and Boxever.getID() function is being used to set the current browser ID to the VIEW event object, so you should use the browser ID to find your VIEW events in the Sitecore CDP & Personalize application.
For authenticated users you can trigger an IDENTITY event to pass some profile properties and identify anonymous guests in the Sitecore CDP, for example,
@if(user.IsAuthenticated){
@Html.Partial("~/Views/CDP/create-identity-event.cshtml");
}
How to load the Engage JavaScript Library on a non-Sitecore website and track events in Sitecore CDP?
Follow the simple steps below to integrate your non-Sitecore website with Sitecore CDP & Personalise to support your marketing strategy.
-
Create a new JavaScript file based on the code example provided in
..\src\scripts\sitecore-engage-library.jsand replace the placeholder values with the required details from your Sitecore CDP & Personalize instance, this guidance explains where to collect the necessary information about your Sitecore CDP setup; -
Import the created
sitecore-engage-library.jsJavaScript file as the first<script>element before the closing </body> tag as follows in your page template:
<script src="scripts/sitecore-engage-library.js"></script>
-
Create a new JavaScript file based on the code example provided in
..\src\scripts\sitecore-engage-create-a-view-event.jsand replace the placeholder values with specific data you would like to track on the View event in Sitecore CDP; -
Import the created
sitecore-engage-create-a-view-event.jsJavaScript file in your website page template right after the Engage JavaScript Library initialisation script:
<script src="scripts/sitecore-engage-create-a-view-event.js"></script>
- All is ready now and you can start browsing the captured events in Sitecore CDP. Note, that you should use the Browser ID or Guest ID to find your VIEW events in the Sitecore CDP & Personalize application.
- Create the personalised content variants in the Sitecore CMS as standard Sitecore Items;
- Create a Decision Model to recommend the most relevant content variant;
- Configure the API response using FreeMarker language;
- Build the API integration in C# language.
Watch this video to see how the above steps work in practice:
Sitecore packages folder contain:
- Base Layout Project -> Base Layout
- Renderings
- Templates
- Test items
Personalize packages folder contain the configuration scripts in FreeMarker and server-side JavaScript languages:
API-Response-ContentItemId.ftl- an example of Personalize API response with a Sitecore Item IdAPI-Response-Offer.ftl- an example of Personalize API response with OffersCustom-Condition-Number-of-Events.js- an example of a custom condition for a number of View eventsgetNumberOfEvents.js- an example of how to calculate number of all VIEW events across all sessions
To find users of your application by the browser ID in the Sitecore CDP application always use the bid: prefix plus the browser ID value, for example: bid: 335c8d8a-bcba-4d14-afad-fae252e5dd80
Hope you found this module useful, your contributions and suggestions will be very much appreciated. Please submit a pull request.
The Sitecore CDP & Personalize module is released under the MIT license implying that you can modify and use it how you want even for commercial projects. Please give it a star if you like it and your experience was positive.