JavaScript tagging examples for webpages

To activate the JavaScript library on your webpages, copy and paste the following snippet before the closing tag in the website template page. Details of the attributes to replace, along with example values, are included in the accompanying table. 

<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>

The following table describes the attributes to replace in the provided code example.

Using asynchronous syntax to create a queue

The _boxeverq object makes using asynchronous syntax to create a queue possible. It acts as a queue, which is a first-in, first-out data structure that collects function calls until boxever-min.js is ready to run them.

Pushing functions into the queue

Functions run in the order that they are pushed into the _boxeverq object. To add something to the queue, use the _boxeverq.push method. Functions can contain any arbitrary JavaScript. This technique is useful for chaining calls to the API. For example, ensuring that a PAYMENT event runs before a CHECKOUT event.

The following is an example of how to send a raw event to the Event API. It effectively sends search data to the Sitecore CDP by creating the searchEvent tracker object and sends it to Sitecore CDP using the Boxever library object.

// Place an anonymous function in the Boxever queue 
_boxeverq.push(function() { 
    var searchEvent = {
        "browser_id": Boxever.getID(),
        "channel": "WEB",
        "type": "SEARCH",
        "language": "EN",
        "currency": "EUR",
        "page": "/home",
        "pos": "spinair.com",
        "product_name": "DUB-LHR",
        "product_type": "DUB-LHR|Economy|Flex"
    };
    // Invoke event create 
    // (<event msg>, <callback function>, <format>)
    Boxever.eventCreate(searchEvent, function(data){}, 'json');
});

The following is an example of a tag you can use to invoke Sitecore CDP events to send data from the client data layer to Sitecore CDP.

// Client data layer as defined by the client e-commerce platform
var ClientDataLayer = {
    "currencyCode": "EUR",
    "lang": "en",
    "page": "/homepage"
};

// Place an anonymous function in the Boxever queue 
_boxeverq.push(function() { 
    var searchEvent = {
        "browser_id": Boxever.getID(),
        "channel": "WEB",
        "type": "SEARCH",
        "language": ClientDataLayer.lang.toUpperCase(),
        "currency": ClientDataLayer.currencyCode,
        "page": ClientDataLayer.page,
        "pos": "spinair.com",
        "product_name": "DUB-LHR",
        "product_type": "DUB-LHR|Economy|Flex"
    };
    // Invoke event create 
    // (<event msg>, <callback function>, <format>)
    Boxever.eventCreate(searchEvent, function(data){}, 'json');
});

The following is an example of a tag you can use to invoke Sitecore CDP events to send data from the Document Object Model (DOM) to Sitecore CDP.

// Place an anonymous function in the Boxever queue 
_boxeverq.push(function() { 
    var searchEvent = {
        "browser_id": Boxever.getID(),
        "channel": "WEB",
        "type": "SEARCH",
        "language": document.getElementById('language').value.substring(0, 2),
        "currency": document.getElementById('currency').value,
        "page": window.location.pathname,
        "pos": window.location.hostname.substring(4, window.location.hostname.length),
        "product_name": "DUB-LHR",
        "product_type": "DUB-LHR|Economy|Flex"
    };
    // Invoke event create 
    // (<event msg>, <callback function>, <format>)
    Boxever.eventCreate(searchEvent, function(data){}, 'json');
});

The following is an example of a tag you can use to invoke Sitecore CDP events to send data from the client data layer and DOM to Sitecore CDP.

// Client data layer as defined by the client e-commerce platform
var ClientDataLayer = {
    "currencyCode": "EUR",
    "lang": "en"
};

// Place an anonymous function in the Boxever queue 
_boxeverq.push(function() { 
    var searchEvent = {
        "browser_id": Boxever.getID(),
        "channel": "WEB",
        "type": "SEARCH",
        "language": ClientDataLayer.lang.toUpperCase(),
        "currency": ClientDataLayer.currencyCode,
        "page": window.location.pathname,
        "pos": window.location.hostname.substring(4, window.location.hostname.length),
        "product_name": "DUB-LHR",
        "product_type": "DUB-LHR|Economy|Flex"
    };
    // Invoke event create 
    // (<event msg>, <callback function>, <format>)
    Boxever.eventCreate(searchEvent, function(data){}, 'json');
});