a/b testing hundreds of pages at once, with a different layout [closed]

Question

I want to try a new layout for my products page. It would involve a new layout and new color scheme on every products page. There are hundreds of product pages. My question is, how do you a/b test when the change is for more than one page?

I am calling a class products.php, and I have created a new design at products1.php. I dont know how I can send half my traffic to each class, and a/b track. How is this achieved? The same issue would arise if I wanted to test a different header throughout the site.

Answer 1

It depends on how your "b" variant are implemented. Separate pages are difficult to test, whereas javascript transformations are much easier.

Here is some general advice, hope it helps:

Javascript method:

All of your product pages should share similar CSS selectors.

For example, if you are changing all buttons on all product pages you could use generic code $('.add-to-cart').css({ background: 'green'}) that will change all buttons to green instead of worrying about each product page individually.

Separate pages method:

This is trickier. There are two ways to do this.

1) You could split traffic server-side, but you'd have to code this all manually and won't be able to use an easy a/b testing software for this.

if (has cookie) { make sure they see the same thing as last time}
else { generate a or b randomly, if b, then redirect to b page. set cookie}

2) Use Javascript to redirect 50% of traffic from A to B:

<!-- first hide your default page so the visitor doesn't see both versions -->
<style id='some-id'>html,body {visibility:hidden}</style>
<script>
if (visitor is in version B) {
   // redirect if needed
   location.replace(http://site.com/new-page.php);
} else {
   // un-hide if they should not be redirected
   $('#some-id').remove();
}
</script>

Answer 2

Your question will be closed as it's about implementation rather than UX but I'm feeling generous

You should (if you're using modern web development best practices) be using a separate style sheet for your layouts, fonts, colours, etc. If you're being really clever you should be using sass to compile your stylesheets into single files.

Using cookies and javascript you should then be able to test which test group each user is in and serve them the alternate stylesheets dependant on the result.

You could find out more on a javascript or cookies board.