A/B Testing

Most of my A/B testing experience is converting designs in Figma, Invision, Zeplin, and the good ol' static jpg to code using DOM manipulation on the front end.

At first I just used jQuery - I mean, that's what jQuery is for - but it was always the suspicion that the dreaded 'flash' was responsible for the even more dreaded losing test.

So I learned vanilla and uninstalled the jQuery library.

I think it helped, but what also helped was rigorous tidiness when it comes to Optimizely's inactive pages, events, paused/not-started test, etc.

Once I got rid of all that, including jQuery, flashes were less of an issue.

But I also think finding and using the observeSelector utility in Optimizely was critical. The pages I was working on used Nuxt, which renders the DOM, and then re-renders it, so you have to watch as opposed to wait.

Below is a code sample for a fairly complex test. This one was tough because it had to wait for a carousel library to load before it looked presentable.

Code Sample


var utils = window.optimizely.get('utils');
function test(){
  utils.observeSelector('.hero-image', function(x){
    x.classList.add('desktop');
  });
  utils.observeSelector('.hero-image > div', function(x){
    x.innerHTML = "<div class=\"w-70\"><div class=\"main-carousel desktop\" data-flickity='{ \"cellAlign\": \"center\", \"contain\": false }'></div>";
  });
  utils.observeSelector('.main-carousel', function(x){
    var caro1 = '//cdn.optimizely.com/img/2605830644/7718deaeb90d43b49c673ab412215115.svg';
    var caro2 = '//cdn.optimizely.com/img/2605830644/4e89d3d1ae7d4fc29b6346971742211c.svg';
    var caro3 = '//cdn.optimizely.com/img/2605830644/9146febf2d6f49abae68c4e24cbb74d1.svg';
    var caro4 = '//cdn.optimizely.com/img/2605830644/66971444e36f4aec86f5502a76ae7ffd.svg';
      x.insertAdjacentHTML('beforeend', '\
        <div class="carousel-cell">\
          <img src="'+caro1+'" />\
        </div>\
        <div class="carousel-cell">\
          <img src="'+caro2+'" />\
        </div>\
        <div class="carousel-cell">\
          <img src="'+caro3+'" />\
        </div>\
        <div class="carousel-cell">\
          <img src="'+caro4+'" />\
        </div>\
      ');
  });
  utils.observeSelector('.exp390 #structure-body > section > div.row > div:nth-child(4) > div > div.col > div.row', function(x){
    x.classList.remove('row');
  });
  utils.observeSelector('.exp390 #structure-body > section > div.row > div:nth-child(4) > div > div.col > div > div.col-12.col-lg-auto.d-flex.justify-content-center.my-3.my-lg-0', function(x){
    x.classList.remove('justify-content-center');
  });
  utils.observeSelector('.exp390 #structure-body > section > div.row > div:nth-child(4) > div > div.col > div > div.col-12.col-lg-auto.d-flex.justify-content-center.mt-3.mt-lg-0', function(x){
    x.classList.remove('justify-content-center');
  });
  utils.observeSelector('#structure-body > div:nth-child(3) > div:nth-child(2)', function(x){
    x.insertAdjacentHTML("afterend", "<div class=\"mobile mobile-carousel\" data-flickity='{ \"cellAlign\": \"center\", \"contain\": false }'>");
  });
  utils.observeSelector('.exp390 #structure-body > section > div.row > div:nth-child(4) > div > div.col > div > div.col-12.col-lg-auto.ed-hero__price > div > div > div.col-12.d-flex.align-items-center.justify-content-center.justify-content-lg-start', function(x){
    x.classList.remove('justify-content-center');
  });
  utils.observeSelector('.exp390 #structure-body > section > div.row > div:nth-child(4) > div > div.col > div > div.col-12.col-lg-auto.ed-hero__price > div > div > div.col-12.d-flex.w-100.justify-content-center.my-3.justify-content-lg-start.my-lg-0', function(x){
    x.classList.remove('justify-content-center');
  });
  utils.observeSelector('.mobile-carousel', function(x){
    var caro1 = '//cdn.optimizely.com/img/2605830644/7718deaeb90d43b49c673ab412215115.svg';
    var caro2 = '//cdn.optimizely.com/img/2605830644/4e89d3d1ae7d4fc29b6346971742211c.svg';
    var caro3 = '//cdn.optimizely.com/img/2605830644/9146febf2d6f49abae68c4e24cbb74d1.svg';
    var caro4 = '//cdn.optimizely.com/img/2605830644/66971444e36f4aec86f5502a76ae7ffd.svg';
      x.insertAdjacentHTML('beforeend', '\
        <div class="carousel-cell">\
          <img src="'+caro1+'" />\
        </div>\
        <div class="carousel-cell">\
          <img src="'+caro2+'" />\
        </div>\
        <div class="carousel-cell">\
          <img src="'+caro3+'" />\
        </div>\
        <div class="carousel-cell">\
          <img src="'+caro4+'" />\
        </div>\
      ');
  });
  utils.observeSelector('.mobile-carousel', function(x){
    x.insertAdjacentHTML('afterend', '<div class="mobile col-12 mb-5 ed-hero__quote-container"><div class="row justify-content-center mt-lg-5"><div class="col-md-8"><p id="MbIFjoZAMgQU" class="Heading --default h4 text-center font-weight-regular ed-hero__quote"> <!----> "I love Aceable I was able to do it whenever and wherever after school or after practice." </p> <p id="CUqhQBbGqiiL" class="Heading --default text-center"> <!----> Iliana  B.  |  San Antonio, TX </p></div></div></div>');
  });
  utils.observeSelector('button.flickity-button', function(x){
    x.addEventListener('click', function(){
      window['optimizely'] = window['optimizely'] || [];
      window['optimizely'].push({
        type: "event",
        eventName: "carousel_clicks",
      });
    });
  });
  utils.observeSelector('#course-card-0-main a.btn-pill, #course-card-1-main a.btn-pill', function(x){
    x.addEventListener('click', function(){
      localStorage.setItem('experiment', '406');
      window['optimizely'] = window['optimizely'] || [];
      window['optimizely'].push({
        type: "event",
        eventName: "406_cta_clicks",
      });
    });
  });
    //move button
    utils.observeSelector('#structure-body > div:nth-child(3) > div.container.pt-4 > div.new-hero.container.pt-0.pb-5 > div:nth-child(1) > div:nth-child(4)', function(x){
      x.setAttribute('id', 'id1');
    });
    utils.observeSelector('#id1', function(x){
      x.insertAdjacentHTML('afterend', '<div id="id2"></div>');
    });
    utils.observeSelector('#id2', function(x){
      document.getElementById('id2').appendChild(document.getElementsByClassName('btn-container')[0]);
    });
}
utils.observeSelector('body', function(x){
  x.classList.add('exp390');
  var s = document.createElement( 'script' );
  s.setAttribute( 'src', 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js' );
  document.head.appendChild( s );
  setTimeout(function(){
    test();
    },500);
    setTimeout(function(){
      var elem = document.querySelector('.main-carousel');
      var flkty = new Flickity( elem, {
        cellAlign: 'left',
        contain: true
      });
      var flkty = new Flickity( '.main-carousel', {
      });
  }, 1500);
  setTimeout(function(){
      var elem = document.querySelector('.mobile-carousel');
      var flkty = new Flickity( elem, {
        cellAlign: 'left',
        contain: true
      });
      var flkty = new Flickity( '.mobile-carousel', {
      });
  }, 1500);
});