Tuesday, March 30, 2021

Recipe: Easy A/B testing

This is how we set up a really quick and easy A/B test for our new splash pages.

Firstly, we made our fours different splash pages and named them the same but with a number after them.  Start at zero and add one for each page you want to test:

  • splash-0.asp
  • splash-1.asp
  • splash-2.asp
  • splash-3.asp

Then, we set up a new page that nobody will ever see, this only contained one line of code (three if you count the "script" tags before and after).

<script>
      window.location.href = "splash-"+ Math.floor(Math.random() * 4) +".asp";
</script>

Let's break down what this is doing

Math.floor(Math.random() * 4)

This generates a random number between 0 and 3.  If you want to test more or less pages, just change the 4 to the number of pages you want to test.

So when the page loads, it will generate a random number (0-3) and add that to the text strings "splash-" and ".asp" to make up one of the webpages above.  You can change these text strings to match your own pages before and after where the number needs to go.

window.location.href = 

All this bit does is tell the webpage to instantly redirect to the pagename we've just created.  As soon as the page loads, it will do all of this and send your user to one of your splash pages, chosen at random.

If you want to use this yourself, all you have to change are the parts in red:

<script>
      window.location.href = "splash-"+ Math.floor(Math.random() * 4) +".asp";
</script>

  • splash- (the first part of your splash page names, before the number)
  • 4 (how many different splash pages you are testing)
  • .asp (the last part of your splash page names, after the number)

Making it work

You then need to make sure that this page is set as your default homepage on your webserver.  For us, using IIS7 it's just a matter of adding the new page in as the "default document", but this may be different on other servers.


So now, instead of automatically going to our old index,asp homepage users will be sent to this new randomising script first if they enter our website at the root (ie not on a specific page, just using the address nedcab.cabmoney.org.uk).

This script then seamlessly redirects them to one of the four test pages.

Analytics

The last part is to ensure that all of the splash pages have your Google Analytics code in them, so you can see how they are being used.  Because they all have different names (because of the different numbers in the page names) they will show up separately on your Analytics pages where you can check their performance.