Integrating website with Sitecore CDP

Today I am going to explain different ways of integrating Sitecore CDP within your website.

Sitecore CDP provides different options for integration and it is recommended that you choose an integration type depending on the type of your application.

If your website is using Tag Management System (TMS) then Sitecore recommends using Client-Side Integration by injecting the Boxever Script within Tag Management System.

If your application is not using Tag Management System and it is a Web Application then Sitecore recommends using Direct Client-Side Integration.

If your application is not using Tag Management System and it is a Native Application then Sitecore recommends using Server Side Integration using direct HTTP requests.

The integration will push interaction data of the website's user into Sitecore CDP only when integration is successful. As you have customer interaction information you can use Sitecore CDP to build personalized & optimized experiences to be delivered to the users on the desired channels.

To start integrating Sitecore CDP in your website make sure that you complete the basics steps as described below:

Firstly, create a Points of Sale (POS) in Sitecore CDP.

Secondly, get the Client Key from Sitecore CDP.

Creating Points of Sale

In the Navigation pane, click on the Tenant name. Now My Profile screen displays.

In the System Settings section, click 'Points of Sale'. Now Points of Sale screen displays.

Now Click on 'Create' to create a new Points of Sale.

In the Points of Sale dialog, you need to specify the POS Name, Market, Brand, Language, and Timeout.

You can read more regarding Points of Sale here.

Get Client Key

In the Navigation pane, click on the Tenant name. Now My Profile screen displays.

In the System Settings section, click 'API Access'. Now the API Access screen displays. Here you can find your organization's Client Key.

Client Key is a unique identifier for an organization that is used for authentication of the client it receives from the API calls.

Integration of Sitecore CDP

Direct Client Side Integration

The main step to integrate Sitecore CDP with your website is to load the Boxever library script on every webpage of your website using the HTML <script> tag.

<script type="text/javascript">
    // Define Boxever queue 
    var _boxeverq = _boxeverq || [];
    
    // Define Boxever settings 
    var _boxever_settings = {
        client_key: '{{ClientKey}}', // Replace with your Client Key
        target: '{{APITargetEndPoint}}', // Replace with your API Target Endpoint
        cookie_domain: '{{CookieDomain}}', // Replace with Cookie Domain of the website e.g. ".example.com"
        javascriptLibraryVersion: '{{JavascriptLibraryVersion}}', // Replace with the Boxever JavaScript Library Version
        pointOfSale: '{{PointOfSale}}', // Replace with Point Of Sale
        web_flow_target: '{{WebFlowTarget}}', // Replace with path for Amazon CloudFront CDN
        web_flow_config: { async: false, defer: false }
};
    // Import Boxever JavaScript Library 
    (function() {
         var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;  
         s.src = 'https://d1mj578wat5n4o.cloudfront.net/boxever-{{JavascriptLibraryVersion}}.min.js';
         var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>

The diagram below shows how data flow between different systems to facilitate user interaction data storage in Sitecore CDP.

Client-Side Integration in Tag Management System

It is very similar to Direct Client-Side Integration. The main difference is that here the script is added to your website through Tag Management System instead of adding the script directly to the web pages. The benefit of using the Tag Management System is that for loading the Boxever library script you don't need to add an extra tag to the page markup.

The diagram below shows how data flow between different systems to facilitate user interaction data storage in Sitecore CDP.

Server Side Integration

In Sitecore CDP Stream API can be used for Server Side Integration. The advantage of Server Side Integration is it cannot be blocked by Ad Blockers. This approach is also used when you are integrating a Mobile Application with Sitecore CDP.

// Creating Guest
GET to https://{api}/v1.2/browser/create.json?client_key=${client-key}&message={}

// Send Events to Sitecore CDP
GET to https://{api}/v1.2/event/create.json?client_key=${client-key}&message=${eventMessage}

The diagram below shows how data flow between different systems to facilitate the request of the Browser ID and subsequent event messages.

Verify and Validate the Boxever library on the website

In the browser JavaScript console, enter Boxever. If the __boxever object returns it means you have successfully loaded the Boxever library on your website.

References

Integrating with Sitecore CDP - https://doc.sitecore.com/cdp/en/developers/sitecore-customer-data-platform--data-model-2-1/integrating-with-sitecore-cdp.html

Integrate XM with Smart Hub - https://developers.sitecore.com/learn/integrations/xm-smarthub-cdp

That's all for Today,
Happy Coding, Coders for Life

Integrating website with Sitecore CDP

Contact Form