JavaScript tagging examples for web pages

Abstract

JavaScript code samples that you can paste into your web pages to activate the Boxever JavaScript library (Data model 2.1).

You activate the Boxever Library using a small snippet of JavaScript code that you paste into your web pages. It enables the Sitecore Customer Data Platform (CDP) to capture Guest behavior by inserting boxever-min.js into the web page.

Sitecore CDP target endpoints:

Europe: https://api.boxever.com/v1.2

Asia Pacific: https://api-ap-southeast-2-production.boxever.com/v1.2

United States: https://api-us.boxever.com/v1.2

Tip

If you do not know your settings, contact your Sitecore representative.

To activate the JavaScript library on your web pages, copy and paste the following snippet before the closing tag in the website template page. Replace the {{clientKey}}, {{apiTargetEndpoint}}, {{cookieDomain}}, and {{clientVersion}} attributes with your client key, API target endpoint, cookie domain, and version. The Release Notes JS Library provides the available versions for {{clientVersion}}.

<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"
};
    // 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>
How the asynchronous syntax works

The _boxeverq object is what makes the asynchronous syntax 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 _boxeverq. 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 the Sitecore CDP by 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 that you can use if you want to invoke Sitecore CDP events to send data from the client data layer to the 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 that you can use if you want to invoke Sitecore CDP events to send data from the Document Object Model (DOM) to the 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 that you can use if you want to invoke Sitecore CDP events to send data from the client data layer and DOM to the 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');
});