You know it is important to drive traffic to your WooCommerce store, since a portion of this traffic will become customers. However, how do you know whether your site is efficient at turning visitors into customers?
The number of visitors who become customers is called the conversion rate. Conversion rates are important for any growing WooCommerce store to track and work to optimize. One highly effective way to optimize store conversion rates is by setting up experiments using Google Optimize to see what makes your conversion rate improve.
This article will help you set up Google Optimize split testing with your WooCommerce shop. After completing this tutorial, you’ll understand how you can test design parts and wording to increase your conversion rate. So follow along, you don’t need to be a developer or coder! I promise that I’ll keep things simple.
I’ve broken down this article into three sections:
- How To Set up your Google Optimize Account
- Integrate Google Optimize with your WooCommerce shop
- Configure your first split test in Google Optimize
I highly encourage any WooCommerce shop owner with a reasonable amount of traffic (at least 5,000 unique visitors per month) to set up split tests. They’re a fantastic tool to discover which parts of your site structure or wording limit your conversion rates. You can use Google Optimize to set up these tests for free, which is perfect to begin with. Examples of common split tests are testing which color the “Add to Cart” button should be to encourage clicks hiding or showing trust labels on the Checkout page, the wording of the “Checkout” button, and other important elements on your shop website.
For this example, we’ll run an experiment on the “Checkout” button and will compare two different colors against each other. Let’s get started!
Set up your Google Optimize Account
Creating your Google Optimize account is straight-forward, especially if you’re already using a Google. Head over to https://marketingplatform.google.com/about/optimize/ and click on the “Sign in to Optimize” button in the top right corner. If you do not have a Google account yet, you’ll have to create one.
After you’ve created your account, you’re greeted with a wizard that’ll walk you through the setup process. Let’s go through it together.
The first step in the wizard is that Google asks you to subscribe to their various email newsletters. It’s up to you if you want more emails in your inbox – I certainly do not. So, I’ll tick “No” for all of these boxes.
Step 2 is to configure your first Google Optimize account. You’ll be asked all sorts of questions related to data privacy and GDPR, which heavily depends on the physical location of your business. In the US, you have less strict rules that apply than in the European Union. Here’s a great article on what eCommerce retailers need to know about GDPR.
Since I live in Germany, I have to accept boxes about GDPR. I also do not want my data to be shared with other Google services that I have not linked into my account manually. You’ll want your Google Analytics account linked to Google Optimize – to get the most out of your data. But other than use-cases like that, I want to keep my data private.
That’s it! Your account is now set up and you’re ready to create your first split test experiment.
Integrate Google Optimize with your WordPress installation
After completing your account setup as described above, Google will ask you to create your “first experience”. Experiences are the way Google groups experiments that run on a single website. So if you have multiple sites or shops and you want to integrate them into Google Optimize, you’ll have to create one experience for each of them.
As you can see in the section on the right, we’re 25% done with creating that experience. In this part of the tutorial, we’ll customize the name of our container, setting up the foundation for your split test, and link it to Google Analytics.
To organize containers, I like to use the target website’s URL as their name. You can easily change the container name by clicking on the three vertical dots right beside “Container information” in the right sidebar.
Click on the “Edit container name” and enter whatever name helps you recognize the website this container is integrated with. For the purpose of this tutorial, I’ll go with “Woo Google Optimize Demo.”
Configure your first split test experience in Google Optimize
Now that you have your container appropriately named, let’s walk through setting up your first split test for your WooCommerce shop. First, click on the blue “Let’s Go” button, which will open a new area on the right of your screen.
In that area, you can specify a name for your experience. I called mine “Checkout button color test” for this example. You have to specify the URL of the page you want to run the experiment on, which would be the Checkout page URL.
You can further specify what type of experience you want to run. Google Optimize offers four different types:
- A/B test. This lets you create one variant of the original page and compares them to each other, by sending one part of your traffic to the original and the other part to the variation.
- Multivariate test. This lets you create multiple variations of the original page. I would only use that when you have a serious amount of traffic, otherwise, it’ll take a long time to deliver trustworthy results.
- Redirect test. You can redirect a part of your traffic to a different page than the original one. This is great if you want to compare two entirely different page layouts, or if you want to drive a part of your traffic to a subdomain of yours.
- Personalization. You can use this type of experience to personalize your website’s content, depending on certain rules. E.g. you can target countries and provide information specific to those countries (like GDPR checkboxes only for EU-based customers on Checkout).
For this tutorial, we’ll set up a simple A/B test to compare two different checkout button colors against each other.
Click on “Add Variant” in the next screen and give the variant a name that will help you recognize what you are testing. In my case, I’ll switch the “Place Order” button on the Checkout page to a red background color – so “Red Place Order Button” makes sense for this tutorial.
Click on “Done” which will take you back to the overview screen. Before we can proceed to configure the test, we need to make sure that we actually have a product in the cart so that the Checkout page is accessible and we can do the change.
Google Optimize will try to open the Checkout page as soon as you click on “Edit” to configure the variant. So you need to ensure that you have a tab open with your WooCommerce shop, and are on the Checkout page.
Additionally, please make sure that you have the Google Optimize extension for Chrome installed. Here’s the link to the Chrome Web Store (the extension is free).
Ok, let’s continue and configure the A/B test by clicking on “Edit”. You’ll see that Google Optimize will reload and now open your Checkout page. That’s why we need to have a product in the cart so that we can actually see that page and do not get redirected to an empty cart page.
As soon as you start moving your mouse over the screen, you’ll see that each HTML component of your Checkout page gets highlighted. Navigate to the “Place Order” button and click on it. That’ll open the attributes window you can see in the screenshot above.
Changing the background color and text color is super simple. In that attributes window, scroll down until you see the fields for text color and background color, and update the values to whatever colors you want to test. In this example, the “Place order” button has a black background with grey-ish text. I’ve changed that to white text on a red background in the A/B test.
With that done, I have fully configured the A/B test variant and can hit “Save” in the top right corner of the variation editor.
Sidenote: do not test more than one element per variant. When you do test more than one change per variant, you will not know which visual change actually caused a change in visitor behavior on your website.
Going back to your overview screen, you’ll now see that the Google Optimize variant will say we’re testing two changes – but don’t let that confuse you. It’s never recommended to test more than one element at a time, and that’s what we’re doing here. One change has been the font color, and the other change has been the background color of the button. It is still just one element that we’re testing.
The next step is to connect your Google Optimize account with your Analytics. Therefore, you need to click on the “Link to Analytics” button in the progress bar or scroll down to the section titled “Measurement and Objectives.”
There, you can click on the “Link to Analytics” button and pick the right property and view. Sidenote: please ensure that Google Analytics is set up properly on your WooCommerce shop before proceeding.
You’ll then be presented with a code snippet that you need to put onto your website. How to implement this exactly depends on your Google Analytics configuration (universal tracking vs. global site tag). For this example, I’m using the global site tag integration, so all I have to do is to add one line of code to my site. Google Optimize does a great job of explaining here, so read through the instructions carefully.
One last step we have to do is to set up a tracking event for the “Place Order” button. We need to tell Google Analytics to track the clicks on the button so that Google Optimize can use the tracked data as a custom objective for the split test. Without that click tracking, Google Optimize will not be able to determine the winning variation from our test – because it will not have the right data to do so.
There are multiple ways to add click tracking to your WooCommerce site; my favorite way is using Google Tag Manager. I will not go deep into setting up the entire tracking process here, as that would be a post in itself. However, I highly recommend reading through this article on Medium if you haven’t set up click tracking before.
Once you’ve set up Google Tag Manager with the right tags and deployed it on your WooCommerce site (e.g. using this free plugin), you’re ready to set up a custom objective in Google Optimize.
Click on “Add experiment objective” and choose “Create custom.” That will give you a screen where you define your own tracking rules.
Please note that the “Event Label” value has to match the label you configured in Google Tag Manager. For Google Optimize to be able to track this custom event – the click on the “Place order” button – the event labels have to match in Google Optimize and Google Tag Manager. You can also use “Event Action”, “Event Category”, or “Event Value” as rule parameters, but for this tutorial, the label will do.
After saving your custom objective, you can run the Diagnostics tool to validate that your Google Optimize experiment is set up correctly. Remember that Optimize needs Google Analytics to load on your page. So if you excluded your user from being tracked (e.g. blocking tracking for all admins in WP), it’s likely that this validation will fail. If that happens, I recommend that you include your user in the Google Analytics tracking temporarily. Alternatively, you can open your WooCommerce shop in an incognito window and verify that all the codes for Google Tag Manager, Google Analytics and Google Optimize are being loaded in the code of your shop.
At this point, your experience should be up and running properly. You can use the Live Debug Mode from Google Optimize and browse your site to validate the experience. You’ll see that Chrome shows you an area below the website that gives you insights on how Google Optimize is working on your WooCommerce site.
In this screenshot, you can see that the experience has been applied and some additional information, like the variant I’m seeing and the URL that caused the variant to be triggered.
Finally, you’re ready to collect the test data and optimize your WooCommerce site for more conversions and revenue. This process can be confusing, so if you get stuck at any point, reach out on Twitter and I can help: @iamjankoch. Happy testing!