Setting Up A/B Tests With Google Experiments

If you're looking to make a change on your website but are worried that your users might not like it, then you're probably overthinking things. Nevertheless, if you have a fair amount of traffic, then you can never be too careful. At least for ones own peace of mind.

There are many different approaches that you can take when testing changes on your webpages. And none of them are particularly wrong or right. So today I'll be showing how to implement one that I'm particularly happy with, and that is Google Analytics Experiments.

Here's a few of the pros for using it:

• It's FREE to use
• Integrates with Google Analytics
• Takes 10 minutes to set

I would take a stab at it just for the FREE part alone, as many other A/B testing services right now come with monthly fees and such. And as I mentioned, it's also very easy to set up. So today I'll be running through the entire process from setting up slight variations, to turning on experiments and watching the data flow.

While not a huge fan of A/B tests in the past, I can now see the benefit as we attempt to grow our new brand into a full fledged company in the next few months.

Create your variations

So first off, I need a goal in mind. What am I trying to improve on this website that has shown to get little to no traction. Or what maybe needs to go. For a blog it's tricky, because they mainly offer text. But for let's say shopping websites, you probably have many options to choose from. A conversion can be anything from a purchase, to a user 'adding to wishlist' to a user signing up for updates and such.

How you load your variations is really up to you. But what you do require is some type of separate URL structure so that Google can differentiate from the two. Personally, I like using a v parameter with a short keyword identifier.

http://www.thatsoftwaredude.com/content/6345/how-to-fix-autocorrect
http://www.thatsoftwaredude.com/content/6345/how-to-fix-autocorrect?v=t1_b
http://www.thatsoftwaredude.com/content/6345/how-to-fix-autocorrect?v=t1_c

Here, I have 3 variation pages, the original above which takes no extra parameters and my 2, which I marked with t1 for test 1, in case I have multiple tests running, and the alpha identifier after in sequential order. It's not required of course to have a standard with your parameters, as you can just as easily have the following as well:

http://www.thatsoftwaredude.com/content/6345/how-to-fix-autocorrect
http://www.thatsoftwaredude.com/content/6345/how-to-fix-autocorrect?v=1
http://www.thatsoftwaredude.com/content/6345/how-to-fix-autocorrect?v=2

But I feel it's better to set up a standard from the beginning, for better tracking and for making it easier down the line to set up more tests while currently running others.

Now that we have some identifiers, it's really up to your particular website and framework on how you're going to render different elements. You can grab the new parameter in JavaScript and modify everything that way, or you can grab it server-side and have at it. One thing is the same though, you have to add an tracking event to your conversion goal.

In my small example above, the conversion goal was the highlighted button.

    if (typeof ga !== "undefined") {
        ga('send', 'event', '[event category]', [event action]);
    }

We'll want this event to fire on all of the different variations pages that we have, including the original page. Again, that is up to everyone to determine how they will set their up their JavaScript. But once you do, we're ready for our next next.

Setting up our goals

Once our code is set up, we'll want to create a new "Goal" in Google Analytics for this particular event. And we can do that by going to the Admin panel in Analytics.

Once in Admin, you should see "Goals" in the far right panel.

And if you're ad admin on this particular Analytics account, you will see the New Goal button as well.

Setting up the goal is pretty straightforward. You'll want to set the Goal to "Custom", give it a descriptive name and select Event as the Type, as we'll be setting our above 'click' event as the goal to track on.

Set the goal details

Now we can specify the name of the event that we wish to use as the goal.

Everything else can be left as-is for now. So feel free to hit save and continue on this journey which is coming to a close.

But first a quick recap to make sure we're up to date. At this point, we should have the following:

• Our original page (w/ new tracking event)
• One or more variations (w/ new tracking event)
• A Goal created in Google Analytics configured with the event above

Once we're at this point, we can now create the new Experiment in Analytics. So head on over to the main Reporting tab and navigate down to the following:

So let's create a new Experiment here. Note that you do need to have admin permissions on this Analytics Property in order to create experiments. So let's give our experiment a description name, and set the objective.

For the objective, we can set the goal that we created up above as it should appear on this list.

The next step is the most important, and that is setting our URL's for the experiment.

This is very important, as I learned the hard way. The initial configuration I set up had every variation page redirect to 1 specific page only. A problem which I didn't notice for some time.

Dynamic Urls'

2 things to note. If you have dynamic URL, as pretty much every single website does, then you can pick any of those URL's as the original value. By that I mean, Google only needs to know the parameters that are being passed in for the test to work. Because later on we'll be adding our Experiment code to those pages that we'll be targeting.

And secondly, if you are using Dynamic URL's, you'll want to only add the portion of your parameters that effects the version, as Google will grab any other parameters from the Original version. For example, on this blog, I can set my Original to any blog post that I have.

http://www.thatsoftwaredude.com/content/6352/how-to-become-a-full-stack-developer

And because I'm using my v parameter to differentiate the different versions, I only need to add this parameter for my variation URL's with the type of the URL set to relative. That last part is very important.

And last but not least, get your Google Experiment code. All of your pages need to have Google Analytics, both original and variations. The Google Experiment code however, only needs to go into the head section at the very top of your Original page.

Once you've done that, save your experiment, verify that it's working with the final validation process in Experiments, and you are then good to go. Enjoy your running experiment, and depending on your traffic, in 2 days to 2 weeks you will have some nice healthy data to wade through.

Hopefully this helped someone out there on their way to the first experiment. There are plenty more customization options that you can look at in the admin, such as how much traffic you want this test to effect to the amount of traffic that you want to split your variations by. But for anyone starting off, I'd just recommend using the default Google values.