How does optimizely do their A/B testing from a technical standpoint?
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
The below article (from which screenshot is taken) explains how Optimizely interacts with the DOM: https://help.optimizely.com/hc/en-us/articles/200040335
- Error when fetching and downloading images from CDN (S3) on Chrome and Safari
- How does the React hook useCallback recognize the function?
- JavaScript How to Dynamically Move Div by Clicking and Dragging
- mocking window.location.href in Javascript
- Fill With White, Out Of Bounds Part Of Image - Crop Image With CSS Transformations on it
- How to Detect Browser Back Button event - Cross Browser
- Check type of a function parameter
- how to show this.variable value in observer callback function in chrome debug mode
- I am getting these error everytime I try to run the react and node based code in my system , tried "reinstalling npm install" and everything
- Why `[1, 2, 3]` is not showing as an `Array(3)` in Console?
- Is this possible? Scroll slides to key points, like vertical paging
- Angular Previous page button getting disabled when the next page button gets clicked
- ReactJS vs NodeJS - Why do I need to create both?
- Console.log doesn't work, devtools console shows no errors
- How to calculate the execution time of an async function in JavaScript?
- Not able to change the title with metadata when using 'use client' in Next.js
- How do I pass a variable into regex with Node js?
- Why doesn't TypeScript enforce async/await on promise?
- Catch block not working in node fetch
- Creating a writable svelte store from loaded page data in sveltekit
- Best Way To Crossfade Text With a Fixed Height in an Absolute Div?
- Prevent text selection after double click
- Check for browser optional chaining support in Angular project
- Is there a way to create dynamic ranges given an array of values, and counting how many belong to each range
- Can't use type-fest GreaterThan as parameter type
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Check if optional chaining is supported
- What is the best way to remove a table row with jQuery?
- How can I generate a list of random shades of a particular color? (e.g. random shade of orange)
- Proper way to catch exception from JSON.parse