A/B Testing with JavaScript's Mutation Observer: A Game-Changer

This article is aimed at technically oriented A/B testing users.

A/B testing has long been the marketer's best friend. It allows websites to showcase two different versions of content to gauge which performs better. In the tech-savvy world, where most A/B tests involve dynamically altering website elements, JavaScript's Mutation Observer shines brightly. Let's take a closer look.

Content

What is the Mutation Observer?

The Mutation Observer is a powerful JavaScript API that allows developers to watch over changes in the DOM (Document Object Model) of the website. Whether elements are added, removed, or altered, Mutation Observer is there to record these modifications. It becomes an invaluable tool, especially when you want to react to dynamic changes of the page in your A/B tests. 

Example: Swapping Images with the Mutation Observer

Imagine you want to test which product image resonates more effectively with your e-commerce site's visitors. In your online shop you have PDPs and PLPs. On the PDPs images can dynamically change for example if you click on another product color. On the PLP additionally you can apply filters which will re-render the product cards. Hence just changing the images only once will result in showing the original images after a change and not the new images you want to test.

Here's how you can leverage the Mutation Observer to swap images dynamically:

  1. First, we are using the Mutation Observer constructor with an inner function where we can iterate over all page manipulations.
  2. Next in the code for every page manipulation we are looping over all SKUs where we want to change the image. In the loop we are searching for the image that was manipulated. 
  3. For every SKU we are querying the image element on the page. If the element is present, we get the new image from our JSON object and check if the images current path is the same as the new path that we want to assign. If this is the case, we are not doing anything. We are only changing the image if it is not correct, to prevent an infinite loop of trying to change the image. Now we are continuing to check this for all other product images we wanted to change.
  4. (Depending on your page setup you might want to exit the loop earlier to increase performance.)
  5. The last step for the setup is to get the container element that you want to observe and calling the “observe” function with the to be observed element and the manipulation types you want to observe.

Conclusion

The Mutation Observer is more than just a passive watcher, it's an active participant in optimising your website's dynamic content, particularly for A/B testing. You can not only use it for images, but for all types of dynamic content on your page, manipulating,adding or removing content, layouts or just using the information that something was manipulated. Harness its capabilities, and you're well on your way to a refined and more effective user experience.

Simon Giglhuber

Simon Giglhuber is an Experimentation Developer at Up Reply. Proficient with tools like Optimizely and Dynamic Yield, he's helped in optimising the online interface for our clients. In his blog entries, Simon will focus on JavaScript technicalities and frontend aspects essential for effective A/B testing and personalisation.

Let’s Take Your E-commerce to the Next Level

Unlock new opportunities and redefine the customer experience through personalised, data-driven strategies with Up Reply.