How does optimizely do their A/B testing from a technical standpoint?

StackOverflow https://stackoverflow.com/questions/19314630

Question

I'm trying to use Google Analytics and Contents Experiments to set up A/B testing on my website but I'm having trouble getting it to appear seamless.

There are a few things that need to happen in order to use the google API. First I add a script tag to load the cxApi from Google, specifying an experiment id. After it has loaded the google docs suggest putting a listener on window for the 'load' event after which point you should ask google for a variation of the content you wish to display and give it a callback. Once it has selected a variation you can then use javascript to show/hide the relevant content.

The issue though is that I get content flash on page load; if I am A/B testing a H2 for example, I don't want to see the original one first and then see it quickly replaced. Does anyone have any tips?

The best solution I've come up with so far would be adding a style tag to hide the relevant content (by setting the text color to transparent for example, so the content still takes up the same amount of space on the screen and doesn't cause reflow) but I'm after a better solution and would be interested if anyone might have any insight into how optimizely do this?

Cheers

Was it helpful?

Solution 2

The below article (from which screenshot is taken) explains how Optimizely interacts with the DOM: https://help.optimizely.com/hc/en-us/articles/200040335

enter image description here

OTHER TIPS

Optimizely serves a static script from a CDN that uses jQuery to change elements on your page.

What's different about the Optimizely solution vs. Google Content Experiments is that Optimizely directs users to set up the snippet in a synchronous manner, whereas the typically Google Analytics JS is loaded asynchronously. This means that the Optimizely script will be downloaded and executed before the page renders, especially if, as they suggest, you place the snippet high in the <head>. If you follow the typical Google Analytics setup, the GA script is loaded asynchronously and after the rest of the page has loaded.

Optmizely's documentation further explains:

The reason we encourage this specific placement is because Optimizely works by making changes to the webpage as it loads. If the code snippet is added to the top of the block then the script is available for the duration of the time it takes to load the page and changes can be made in real time.

If the snippet is added anywhere else on the page it will still work. The problem is that if the page has already loaded a lot of content that the user sees before the Optimizely script executes then you could have a case where the original version of the page loads and is then transformed by the script to look like the intended variation. In most cases the code executes too quickly for this to be visible, but to avoid any potential problems we encourage you to add the snippet as early on in the execution path as possible.

from: https://help.optimizely.com/hc/en-us/articles/200040285

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top