JavaScript tagging examples for webpages
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 |
---|---|---|---|---|
| Your organization's unique identifier that is used to authenticate the client when it receives API calls. You can identify your organization's | string |
| Required |
| 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 |
| Required |
| 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 |
| Optional |
| This is the version of the Boxever JavaScript library. The Release Notes JS Library provides the versions for | number |
| Optional |
| This is the
You must ensure the
| string |
| Required |
| 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 |
| Optional |
| To disable asynchronous loading of Web Experiences library ( | boolean |
| Optional |
| This is the version of the Boxever JavaScript library. The Release Notes JS Library provides the most recent version for | number |
| 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'); });