Setting Up Simple A/B Testing With Google Analytics Experiments and WordPress

If you’re anything like me, you obsess over driving more traffic to our websites, which makes complete sense. I mean, what’s the point of spending time and money on your site if nobody sees it?

But what about once people have actually reached your site? Are you giving enough thought to what visitors actually do on-site other than having a contact button or other call-to-action (CTA).

What you should be doing is CRO. And testing with Google Experiments, which is what we’ll be walking through in this article.

CRO, or conversion rate optimization, is exactly that, optimizing for increased conversions. What is a conversion? A conversion can be any action that you desire a visitor take on-site. For example, a conversion could be a visitor registering for an account, purchasing a product or signing up for an email newsletter. It could also simply be sharing an article on Facebook or watching an embedded YouTube video.

Carrying out CRO generally involves a number of stages:

  • Discovery: Gathering relevant data and creating hypotheses
  • Testing: Design and implementation of tests, such as A/B or multivariate testing
  • Review: Analysis of the data gathered during testing

CRO is often a cyclical process. Once the review stage has been completed the process begins again, now taking advantage of the data gathered during the previous round of testing and analysis.

An example of a Google Experiments report.
An example of a Google Experiments report.

Choosing What to Test

Once you have decided you want to optimize your website’s conversion rate, the challenge is then deciding what it is you actually want to test. This is obviously specific to each site, but it will be determined by the purpose of the WordPress website and any data gathered during the research stage of the CRO process.

For example, imagine you have an eCommerce site selling shoes and you’re running a promotion where visitors get a free hat. You expected this to boost conversions but instead your analytics show no increase in sales at all.

Upon reviewing your product pages, you can see that the banner for the free hat promotion is actually below the fold. Based off of this, you decide you want to test moving the free promotion banner above the fold, which requires a slight redesign of your product pages.

As you can see, what you want to test can be very specific to your website, your target market, and your product/service.

When choosing what to test, it’s often a good idea to test one element of the page. When only changing a single element, it is easier to conclude that it is that one variation that is having an impact. For example, if you decide to change the layout of the page, the main image, the copy, the button colour and button text, then how can you know which element variations specifically had a positive effect on conversions?

It’s also worth noting, that you should ideally test pages that have a reasonable amount of traffic. This is so that you can get results that are statistically significant within a reasonable time frame.

Tools You Can Use for Testing

There are a number of paid solutions on the market. These range from platforms like Unbounce, which seem to be aimed at smaller businesses, to enterprise level solutions such as Optimizely.

These tools offer some great features, particularly in terms of landing page creation. However, what if you don’t have the budget for these tools? Perhaps your setup is simple and your don’t want to use complicated tools. Well, we can easily use Google Analytics Experiments to A/B test your WordPress website.

Google Analytics Experiments

Content Experiments is a framework provided by Google Analytics for testing variations of a webpage or app. You can run experiment in two distinct ways:

The original Content Experiments JavaScript snippet ran experiments by redirecting some visitors to the alternate version of the page being tested. Whilst this was very simple to implement, in some cases, this redirect had a negative impact on user experience. This prompted Google Analytics to create a version that doesn’t require any redirects. This is the type of experiment that we will be setting up on our WordPress site today.

How to Setup Google Analytics Experiments

Once you’ve decided what you want to test, it’s time to set up the experiment. In this example, we’re going to test changing the main heading of a webpage. We’ll assume it is a site selling shoes and our page is about a new shoe being released.

Defining the Experiment

So, we know we want to test the heading, but what variations do we want to use. If our original heading is “Buy Our New Super Shoe,” we need to come up with a few variants to test. Let’s use these for our example:

  • Our New Super Shoe Now Available To Order
  • The New Super Shoe – Only £49.99
  • The Super Comfy Super Shoe

How are we measuring the success of our experiment? Let’s test how many people click on an “add to cart” button.

SEO

Boost your traffic with SmartCrawl

SmartCrawl supercharges your SEO using proven methods for optimization, ensuring high impact results with little effort. Set up automated sitemap generation, alert search engines when you have new and updated content, and control exactly how your web pages are displayed in search results.

TRY SMARTCRAWL FREE

Find out more

Setting Up the Experiment in Google Analytics

Now we have decided what we want to test, let’s configure our experiment in Google Analytics. For this, obviously you will need a Google Analytics account setup for the website you want to run the experiment on. If you don’t have this already, you can read how to setup Google Analytics here.

Choose an Experiment Objective

  1. Go into the account and view for the website you want to run the experiment on
  2. Click on the Reporting tab
  3. Expand the Behaviour menu item on the left and then click on Experiments
  4. On the All Experiments screen, click the button labelled Create experiment
  5. Type in a name for this experiment, e.g. “Heading Test”
  6. Choose the objective for this experiment. For this, we will assume there is a click event set up on the “add to cart” button. If you are unsure of how to do this, you can read about setting up event tracking here and how to set up goals here.
  7. Select what percentage of visitors you would like to be included in this experiment. For this, we will choose 100%.
  8. Click on Next Step
Choose what you would like your experiment to test.
Choose what you would like your experiment to test.

Configure Your Experiment

  1. Add the URL you will be testing as the original page and give it a name, e.g. Original Page
  2. Add each of the variants below this, giving each a URL and a name. As the variants will be shown using JavaScript rather than being redirected to a new page, the URLs for the variants can be anything. You might want to name each variant something meaningful so that when viewing reports of the experiment you can easily see which is which.
  3. Click on Next Step

Choose the variants you would like to test with your experiment.
Choose the variants you would like to test with your experiment.

Setting Up Your Experiment Code

  1. Select the option Manually insert the code
  2. As our experiment is being implemented without redirects, we won’t be using the code snippet presented to us. All you need to do is make a note of the experiment ID located below the code snippet box. Don’t worry about the validation errors as we are using JavaScript to implement the page variants.
  3. Click Next Step
  4. Click on Start Experiment
You can choose to manually insert your experiment code.
You can choose to manually insert your experiment code.

Implementing Variations in Theme Templates

Now we have our experiment set up in Google Analytics, we need make sure our site’s landing page is prepared to run the experiment and display the variations. If you’re running an experiment that is making changes to the layout or visual design of the page, then make sure to update any HTML, CSS or JavaScript that need amendments for the styling.

Note: If you are using a theme created by someone else, then you should create a child theme. This will avoid the changes you are making being over-written if the theme is updated.

You can make use of the Custom Experiments JavaScript API client to do the hard task of checking if visitors had previously been exposed to the experiment, whether they should be included and also whether to show the original or a variant of the page.

Once we have JavaScript API client loaded, you can make use of the chooseVariation() method. This returns the index of the variation we want to show to the visitor. We’ll assign this to a variable that we can then use later.

The following code snippet loads the Content Experiments JavaScript API client as well as assigning an index of the page variant to a variable named chosenVariation. To make sure that our Content Experiment’s values are sent to Google Analytics, we need to make sure that the code snippet is placed before the Google Analytics tracking code snippet (ga.js or analytics.js).

Let’s make sure we don’t include the Content Experiments’ code snippets on every page of the site, and only on the page we are actually testing. We’ll add an action with a conditional that loads the following snippets using wp_head() only if we are on a specific page.

Open up your functions.php file and add the following code:

.gist table { margin-bottom: 0; }https://gist.github.com/4ed341e8e901cd1608eb8a488ec673fb.js?file=content-experiment-wp-head-function

What we have done is create a function that will add something to the head element. We have also included a conditional using the is_page() function taking the page ID of the page we want to test as an argument. Change this page ID to the ID of the page you want to test.

We then want to load our JavaScript API client and call to the chooseVariation() method within the conditional we just created. Update the function we just added to be as follows:

.gist table { margin-bottom: 0; }https://gist.github.com/0407209b0d893f212fb1c5bc375e01c8.js?file=content-experiment-js-api-client

Once this code is installed, then we want to add the code that will create the variants we are testing. For our example, we are testing four headings including our original. We will create an array named pageVariations where the index of each value in the array corresponds with the index of the variant we set up in our Google Analytics experiment, i.e. the original has an index of 0, variant one has an index of 1 etc..

Place the following code below the JavaScript API client and chooseVariation code snippet we just added to our content_experiments_head_script() function in our functions.php:

.gist table { margin-bottom: 0; }https://gist.github.com/beca68693b193cfbc7caaf5496593643.js?file=content-experiments-complete

Save your functions.php file and everything should be ready to go.

Publishing the Changes and Running the Experiment

If you have uploaded your new functions.php file to your hosting, your changes should now be live. If you reload the page you are testing, you should see in the source code that you are loading the JavaScript API client, the call to the chooseVariation() method and also including the code to change your heading to the correct variant.

You may also see one of the variants of the page you are testing. If not and you would like to test it, either clear your cookies or simply keep opening new windows in Google Chrome’s incognito mode until you see a page variant rather than the original.

Analyzing Your Results

One of the great features of Content Experiments is that you can set the level of statistical significance. Google Analytics will keep running your experiment until either the duration of the experiment comes to an end or a statistically significant result is achieved. Google Analytics will inform you of which variant was the winner, if there was one. It is then for you to decide whether you want to implement that variant as the main version of your site.

Our shiny new Google Experiment in action! Just need some visitors to land on our site.
Our shiny new Google Experiment in action! Just need some visitors to land on our site.

Your next steps are to decide if you want to run another experiment to further optimize your site. If so, create some new hypotheses and get to testing!

Wrapping Up

Setting up and running Google Analytics Content Experiments is not that difficult. In fact, the most challenging part is probably deciding what to test!

Experiments are a great way to increase your conversions and get deeper insights into your visitors’ behaviour and what makes them tick.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s