JavaScript tagging examples for webpages

Abstract

JavaScript code samples that you can paste into your webpages to activate the Boxever JavaScript library (Data model 2.0

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

After you activate the Boxever JavaScript library, you can start sending data to the Events API using the client data layer, Document Object Model (DOM), or both. This topic provides tagging examples for the three options.

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.

Attribute to replace

Description

Type

Example

Required/optional

{{client_key}}

Your organization's unique identifier that is used to authenticate the client when it receives API calls. You can identify your organization's client_key in System Settings for Sitecore CDP or Sitecore Personalize.

string

'ZpHxO9WvLOfQRVPlvo0BqB8YjGYuFfNe'

Required

{{target}}

This is the API target endpoint for Sitecore CDP and Sitecore Personalize. This ensures that events are successfully sent to Sitecore CDP by the Sitecore CDP Stream API.

string

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

Required

{{cookie_domain}}

This is the top-level cookie domain of the website that you are integrating. Ensure that you include the period at the domain root. This ensures that Sitecore CDP (Boxever) cookie is stored as a first-party cookie.

string

'.myretailsite.com'

Optional

{{javascriptLibraryVersion}}

This is the version of the Boxever JavaScript library. The Release Notes JS Library provides the versions for {{clientVersion}}.

number

1.4.8

Optional

{{pointOfSale}}

This is the pointOfSale configured for the tenant. This ensures that the:

You must ensure the pointOfSale you set here is the same as:

string

'myretailsite.com'

Required

{{web_flow_target}}

This is the path for the Amazon CloudFront Content Delivery Network (CDN) for Sitecore Personalize. This ensures that you can preview the experiment. Most tenants use the path provided in the example, with the exception of some third-party integrators. You only need to set this if you have a Sitecore Personalize license and use web experiments or web experiences.

string

'https://d35vb5cccm4xzp.cloudfront.net'

Optional

web_flow_config: { async: true, defer: true }

To disable asynchronous loading of Web Experiences library (lib.js), set the async property to false. To defer the loading of scripts until after the DOM is built, set the defer property to false. These settings are facilitated through the Boxever JavaScript library. It loads version.js library to get the latest version and then loads lib.js library. Setting these properties to false can impact page load performance. These properties only apply to organizations that have a Sitecore Personalize license and use web experiments or web experiences.

boolean

web_flow_config: { async: true, defer: true }

Optional

{{clientVersion}}

This is the version of the Boxever JavaScript library. The Release Notes JS Library provides the most recent version for {{clientVersion}}.

number

1.4.8

Required

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');
});