A/B Tests with Google Content Experiments and WordPress

Are you avoiding doing testing on your site because of a limited budget? I’ve got good news! You can easily set up simple tests in your WordPress site using Google Content Experiements at no cost.

This tutorial will focus on doing an a/b test (split test). If you’re not familiar with this type of test, this article will give you a solid foundation. The most effective tests focus on one element like a button or heading, and test two versions of that element (hence the name a/b test).

If you’re not using Google Analytics on your site, you’ll need to get that set up before you can start using Content Experiements. Follow the directions here to get Analytics installed.

Step 1

Decide what you’re going to test and create a hypothesis for your test. For example, you might decide to test a sign-up button on your site, and your hypothesis might be “If we use a green button instead of a red button, we’ll increase conversion on our sign-up button.”

Step 2

Create 2 versions of your page.

Most likely, the first one already exists in your site, but if you’re creating a new landing page for a special promotion, you might be creating both versions of the page at this point. Let’s assume we’re testing an existing page on a site that’s a subscription-based site, and that page has a “Sign Up Now” button that we want to try our green vs. red test with. From the WordPress admin area, navigate to the original page and select all of the content in the main content area (see image below). Copy it to your clipboard. Take note of the featured image for the page and any custom fields – you want to duplicate everything in your alternate page.

Give the page the same title as the original, but edit the permalink to add “-b” to the end.


Change the color of the button on this page to your alternate color. Everything else should be exactly the same.

Step 3

Set up the experiment in Google Content Experiments.

Important: Make sure you have your Google Analytics tracking code on both of the pages you’re testing. Typically, it will be in your site’s header.php file, so it should be on both pages already. If you used a plugin to add your analytics code, it should be placing it in the header on each page.

In your analytics dashboard, go to the “Behavior” section and click on “Experiments.” Click the “Create Experiment” button.

On the next page, name your experiment and select “Create a New Objective” from the objective section. On the next screen, set up the goal using the Acquisition => Create an account template. The destination page will be the url of the page they land on after clicking the “Sign Up Now” button. Save your goal and be sure to follow the instructions to add the code for the goal to the destination page. Here’s more detailed information on setting up goals.

(Back on the Create a New Experiment page) For the “percentage of traffic to experiment” setting, select 50% from the dropdown. Turn on “Email notifications for important changes.”

On the next page, enter the two URLs for the page variations and click “Next Step” to continue.

Save your experiment.

Step 4

Add the experiment code to your original page. You can cut and paste the code provided into your header.php file using a conditional to restrict it to only that page you’re testing. The other pages involved will be tracked using your analytics code.

Here’s how to write a PHP conditional in your header.php file to restrict the code to the original test page:

<?php if (  is_page ( ‘about’ )  ) {
paste your experiments code here
} ?>

Note:  ‘about’ is the slug for the page ( for example: westcoastux.com/about )

Click “Next Step” and Experiments will check to make sure you’ve added the code correctly.

Step 5

Watch and learn. You can check your data from your Analytics dashboard under Behavior => Experiments. Allow enough users to get reliable data before ending your experiment. I like to see around a hundred over a few days before I rely on the data, but on a small site 30-50 visitors should show you a clear preference.

Once you see a winner, end the experiment and implement that color on the original page. Delete your alternate version of the page, or set the status to “Draft” or visibility to “Private” to use it for future experiments.

That’s all there is to it! The first time you create an experiment this will seem like a lot, but after you’ve set a couple up it goes very quickly.

Happy testing!

Prev post: Virtual Meetings & UXNext post: Switching from Photoshop to Sketch


  • Ed

    January 3, 2016 at 7:08 pm

    Great article! Well written with easy to follow steps and the images really help! I also love that you provided external links to valuable resources. […] Read MoreGreat article! Well written with easy to follow steps and the images really help! I also love that you provided external links to valuable resources. Thanks! Read Less

    • Debbie Gray
      to Ed

      January 3, 2016 at 9:39 pm

      Thanks! Glad you found it helpful!

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me

Hi, I'm Debbie. I love UX. I'm a full-time developer, designer, and email specialist. read more »


Receive a monthly digest of posts and curated UX articles.

powered by TinyLetter

Latest Posts