Strengthen Your Website With Simple Multivariate Testing for WordPressBy Tara Hornor
Design decisions are sometimes considered qualitative, nebulous matters that should be approved by advisory boards, outsourced to consultants, or in some cases left to total guesswork. Decisions regarding headlines, colors, imagery, and writing are often put through an arbitrary approval process where they are determined by the votes, “hunches,” or opinions of a few team members.
In all reality, the real design experts are not board members, consultants or colleagues; they are your site visitors. Your visitors are casting their vote and providing their opinion every day when they visit — or leave — your carefully-designed website. Instead of guessing what your customers want or basing design decisions on personal preferences, you should be studying your customers carefully, tracking their travels through your website, and making decisions based on their preferences instead.
Multivariate testing, a more sophisticated form of “A/B testing,” is a way of testing different combinations of page elements to see which versions are most compelling to your customers. Website visitors will inevitably have their favorite version of any given page, and multivariate testing allows you to determine the best (and worst) parts of your website using real customer feedback.
Website visitors are rarely aware that they’re taking part in multivariate testing. In fact, individual customers rarely get to see all versions of a page, and the differences between these versions are often fairly small. Pages or elements are never chosen or discarded based on any single customer; they compete across many customers and a substantial time frame. The page that proves itself to be the most effective at a common goal — capturing interested visitor’s email addresses, getting signups for a free trial, selling a specific product, or some other “conversion” — will likely become the final version, or will at least make it to the next round of testing.
In this article, we will show you how to implement a multivariate test on a WordPress site using plugins and minimal coding. Normally, a multivariate test can be extremely difficult to set up, but modern tools make the job much easier.
Before We Get Started
When talking about multivariate testing, we need to understand a few concepts. Remember that we are trying to discover which version of a web page will perform the best. Now, “perform the best” requires a predetermined goal that we want to accomplish. So, we need to define the outcome that you want to see take place, and we should make sure each page version is designed (with slight but significant differences) to achieve the same common goal.
As a concrete example, let’s say you launch an email campaign that directs recipients to a landing page. The ultimate goal of the landing page is to get visitors to click the “sign up now” button and create a free account. This would be the desired outcome of the page, or your “conversion goal” in marketing terms. In order to convince people to sign up for a free account, we need the layout, button, imagery, and writing to be as persuasive as possible.
For broad tests of general features of your website, multivariate testing may be overkill. If you just want to test the layout of your main page, for example, you might be better off with a simple A/B test. This will allow you to serve up two different versions of your page on a random basis to see which one leads to more conversions.
Multivariate testing, on the other hand, is a more sophisticated way to test. Perhaps you know your layout is good, but you aren’t sure about the wording. Or, maybe you don’t know if you’ll have better luck with a green “Sign-Up” button instead of a blue one. When you do multivariate testing, you test very specific elements on your page to determine which changes result in better conversion rates.
At a high level, here are the pages that you might use to run a multivariate test:
We’ll assume for the sake of this article that you are the administrator on your WordPress installation. You’ll need the ability to add plugins and edit posts and pages. To run this setup, we will need two things: the “Google Website Optimizer” plugin for WordPress and a Google Website Optimizer account. But before you get either of these, you’ll need to sort out several things:
- You must pick a page where you want to start the test. For this example, it will be our landing page.
- Google suggests that the page you choose should have at least 1,000 views per week for best results, but this isn’t an absolute requirement.
- You must identify elements on your page that you think might benefit from some variation testing (in our example we’ll use the “description” text and the “sign-up” button).
- A “goal” page that you can use to track conversions. In our example, we’ll use the “Thank You” page that follows our sign-up form.
Google Website Optimizer Plugin for WordPress
From the plugin page of the WordPress administration dashboard, search for “Google Website Optimizer for WordPress” and install it (or click here to download the plugin and install manually). This plugin will put three fields at the bottom of each post or page. You’ll paste code into one or more of these fields depending on how you set up your tests in Google’s Website Optimizer.
Google Website Optimizer Account
Set up an account with Google Website Optimizer. It’s free, and you can run up to 10 A/B or multivariate tests. If you already have a Google Analytics account, you should be able to login using the same credentials.
Set Up the Multivariate Test
On your Google Website Optimizer page, click “Create a new experiment.” You will be prompted to set up an A/B experiment or a multivariate experiment. Select multivariate.
Next, you need to choose what element on your page you want to test. We will test different headings, images, and descriptions to see which work best. Make sure to check the box at the bottom of the form.
Now you need to define the experiment. Just fill out the form with the information you need for your site.
Pasting Code into Plugin Fields
Open up your landing page from within WordPress. With your plugin installed, you will have a form at the bottom of the page editor that you can use to insert the code provided by Google Website Optimizer. Check the “Enable the Google Website…” box to activate the form for your landing page.
Back on the Google Website Optimizer form, you’ll see the “Control and Tracking Script” code.
You will need to copy and paste this into the WordPress Control Script area.
Within the “Control Script” is the separate tracking script. Scroll through the “Control Script” until you see the <!– Google Website Optimizer Tracking Script –> tag.
“Cut” this section (using ctrl / command + “X”) and paste it into the “Tracking Script” section immediately below:
Now, switch over to your “Thank You” page within WordPress. We’ll need to paste some code into this page as well. On the Google Website Optimizer page, copy the “Conversion Script.”
On your site, go to the WordPress editor for your “Thank You” page. In the form on the bottom for the optimizer plugin, paste your code into the “Conversion Script” area. Make sure the “Enable the Google Website Optimizer…” box is checked.
Once all the code has been pasted, click the “Validate pages” button on the bottom of the Google Website Optimizer page.
Setting Up Your Test Page
Before moving on to the next step, we need to set up the code on your landing page. In the WordPress editor for your landing page, use the following format to create variations:
Let’s look at what’s happening. The above code is your original content. Once we set up alternate headlines, descriptions, and “Sign Up” buttons, Google will rotate them in randomly and track their performance. In the utmx_section, make sure you define the part of the page you want to be tested. You can put this anywhere on your page. We have three sections that we’re testing in the above example: headline, signup, and description.
Now, back on the Google Website Optimizer page, click “Validate pages” again and make sure Google finds your scripts:
Click “Continue,” and we can start creating the variations that you want to test. Here we have the “New Multivariate Experiment” setup page. On the left side of the screen are your three detected tags (you can add more if you want later by clicking the “back” button on the bottom of the form and re-validating the scripts).
Let’s start with the headline. Click the “Add new variation” button, give it a name, and edit the code. Create as many as you’d like to test.
Do the same for the signup section. In this case, we’re using a JPG graphic. If you want to test various colors, sizes, or texts on the button; just make different JPGs for each test and create a new variation for each.
Lastly, let’s look at the description section we created. You can test the copy or even reference different CSS to see if different typography creates a better response. Change as much of the code as you want.
Launching the Test
Once you have all your variations created, click the “Save and Continue” button. This is step 4 of the setup process on Google. Here you get a summary of your experiment and can make changes and review the overall campaign.
Run the Test
Assuming all is setup properly, you can launch the test. Check out the “Preview” option to see how the various code works. If everything looks as expected, click the “Launch now” button. At the following screen you can manage your test and view reports.
With this setup, you can create a massive number of tests that are managed automatically by Google Website Optimizer right out of a WordPress page. You don’t have to limit the tests to campaigns, however. You can run tests on your homepage to increase ad clicks, you can increase the amount of inquiries from your contact form through testing, and most importantly, you can make design decisions based on rigorous testing and real customer responses instead of guesswork or the opinions of a few colleagues.
User Interface Design with Sketch 4
Diving into ES2015
Wrapping Your Head Around Python
Designing UX: Forms
Bootstrap: A SitePoint Anthology #1
Jump Start Sketch
Bootstrap: A SitePoint Anthology #1
Jump Start Sketch
- 1 Where Things Are at in the CSS Grid Layout Working Draft
- 2 Learning to Code after 40: If You Think It's Too Late, Read This
- 3 How to Take Advantage of the Psychology of Speed Perception
- 4 Oh, the Lengths We'll Go: Extreme Stories on Getting the Job Done
- 5 7 Workflows Entrepreneurs Should Automate with Zapier