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