JavaScript Split Test events & Functions

AB Split test fires an event after we’ve done our thing, so that you can do whatever you like.

Event – abst_event

fired when a user initially views a test. Then when that user convertsn

jQuery('body').on('abst_event', function(event, data) {

    console.log(data); // This will log the data passed to the event
  /*
  data structure...
  {
    "action": "bt_experiment_w",
    "eid": "640",
    "variation": "504",
    "type": "visit", /* or 'conversion' */
    "location": "504", 
    "orderValue": 1
  }
  */

  // do whatever you want with the data object

  //for example..
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
  'event': 'ab_test',
  'ab_test_id': data[‘eid’],
  'ab_test_variation': data[‘variation’],
  'ab_test_location': data[‘location‘]
});



  });

Event – ab-test-setup-complete

fired when the test has completed, and is showing the correct variation.

Examples

Add a script depending on the current test variation.

<script>
    jQuery(document).ready(function(){
        jQuery('body').bind('ab-test-setup-complete', function() { 
           //do what you want!
           
            // get experiment information for current user
            var testId = 6833; // your test  ID you want to 
            var testDetails = JSON.parse(getCookie('btab_' + testId));     // the data for the current user
            // testDetails = {eid: '68833', variation: 'easy', conversion: 1}

            // add script to page if variation is 'easy'
            if(testDetails .variation == 'easy') 
            {
               var my_awesome_script = document.createElement('script');
               my_awesome_script.setAttribute('src','http://example.com/site.js');
               document.head.appendChild(my_awesome_script);
            }                
        });
    });
</script>

Play a video inside a split test variation.

NOTE: Autoplay videos usually only only work on mute. See here.

<script>
jQuery('body').on('ab-test-setup-complete', function() { // when we've done split test things
  var videoParent = jQuery('.bt-show-variation'); // looking for a shown split test element
  if (videoParent.length) { // if there is one
    var video = videoParent.find('video'); // finding the video inside a shown test element. you might need to adjust this depending on your video player
    if (video.length) { // if theres a video 
      video.trigger('play'); // play the video, you may need to change depending on your player
    }
  }
});
</script>

Autoplay YouTube video inside a split test variation.

NOTE: Autoplay videos usually only only work on mute. See here.

The code below includes mute=1 which will autoplay on mute.

<script>
jQuery('document').ready(function(){
if (jQuery('.bt-show-variation').length) {
        abSplitYoutubeAutoplay();
} else {
    jQuery('body').on('ab-test-setup-complete', abSplitYoutubeAutoplay);
}


});

function abSplitYoutubeAutoplay() {
    var videoParent = jQuery('.bt-show-variation');
    setTimeout(function(){ // delay for elementor 
    if (videoParent.length) {
        var youtubeIframe = videoParent.find('iframe[src*="youtube.com/embed"]');

        if (youtubeIframe.length) {
            var currentSrc = youtubeIframe.attr('src');
            if (currentSrc.indexOf('autoplay=0') !== -1) {
                currentSrc = currentSrc.replace('autoplay=0', '');
            if (currentSrc.indexOf('autoplay=1') === -1) {
                // If the URL doesn't have any autoplay parameter, append autoplay=1
                var separator = currentSrc.indexOf('?') !== -1 ? '&' : '?';
                youtubeIframe.attr('src', currentSrc + separator + 'autoplay=1&mute=1');
            }
        }
    }
    },1000);
}
</script>