Brightspot CMS User Guide

Split Testing

The Split Testing integration enables the A/B Promo module, which allows users to publish different variants of content and track the performance of the original promo vs. its variants. The Split Testing integration must be enabled for a site for the A/B Promo module to be available for use. Currently, no themes have been styled to include the A/B Promo, so custom Javascript must be added to the site.

To enable the Split Testing integration:

  1. Click menu > Admin > Sites & Settings.
  2. In the Sites widget, click Global. The Edit Global widget appears. (To enable Split Testing for a specific site only, select that site.)
  3. Click search, located to the left of more_horiz, and type Advanced.
  4. Under Custom Scripts and Styles, click add_circle_outline.
  5. Enter a name for Internal Name for the custom element.
  6. Click Add under Elements and select Script Element.
  7. Enter a name for Internal Name for the script element.
  8. Enter the Javascript required by the front end to support the A/B Promo module. See the reference code below.
  9. Click Save.

Reference implementation code for front-end developers:

window.addEventListener('load', event => {
   let nodes = []
   let iterator = document.createNodeIterator(
    () => NodeFilter.FILTER_ACCEPT,
 let current
 while ((current = iterator.nextNode())) {
    if (current.nodeType == Node.COMMENT_NODE) {
     let comment = current.nodeValue
     if (comment.startsWith('SplitStart')) {
       let [_, id, numOfVariants, testAudiencePercentage] = comment.split(' ')
       // This assumes that there will only be one node between the opening and closing comments
       let openingCommentNode = current
       let contentNode = openingCommentNode.nextSibling
       let closingCommentNode = contentNode.nextSibling
       // Clean-up
       nodes.push([contentNode, id, numOfVariants, testAudiencePercentage])
  nodes.forEach(element => {
   let [content, id, numOfVariants, testAudiencePercentage] = element
   // Select the variants randomly but remain consistent across page loads
   let selection = localStorage.getItem('variant.' + id)
   if (selection == null) {
      // Determine if user is to be part of the test audience
    if (Math.floor(Math.random() * 100) < testAudiencePercentage) {
      // Generate random integer between 1 and the number of variants, inclusive of 1
       selection = Math.floor(Math.random() * (numOfVariants - 1)) + 1
    } else {
      // Select Original
      selection = 0
    localStorage.setItem('variant.' + id, selection)
  fetch('?renderedSplitId=' + id + '&variantSelection=' + selection)
    .then(response => response.json())
    // Converts string from json into html fragrment
    .then(json =>
    // Grabs the node from Fragment
    .then(fragment => fragment.firstChild)
    // Adds node to DOM
    .then(node => {
      return node
      // Adds listener to track clicks
    .then(node => {
      node.querySelectorAll('a').forEach(a => {
        a.addEventListener('click', () => {
          fetch('/_split', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
              'trackMode=click&splitId=' + id + '&splitVariant=' + selection
      // Reports impression
    .then(() =>
      fetch('/_split', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
          'trackMode=impression&splitId=' + id + '&splitVariant=' + selection

Previous Topic
Deprecating and deleting production guides
Next Topic
Was this topic helpful?
Thanks for your feedback.
The elements that get you up and running in a matter of days, from pre-built content types, to modules, to landing pages.

Content types
Landing pages
Everything you need to manage and administer content within Brightspot CMS, including plug-and-play integrations.

Admin configurations
A guide for installing, supporting and administering code on the Brightspot platform, including integrations requiring developer support to use.

Field types
Content modeling
Rich-text elements