How to Do A/B Testing in WordPress with Jupiter X and Google Optimize

A/B testing in WordPress featured

So you’ve decided to run A/B testing on your WordPress site with Google Optimize but you still don’t know much about it? 

Google Optimized is probably the best tool out there to help you analyse the results of A/B testing on your site. It’s a widely popular tool that helps you gather important data about your website visitors’ behavior and use those results to improve your conversion rates.

In this article, I will cover the basic steps that are essential to running successful A/B testing in WordPress.

What is A/B Testing?

A/B testing is a user experience research technique also known as Split Testing. This technique is best used when we want to receive user feedback on the new design of a page/post/product, for example.

Site owners tend to use default pages for products, pages and posts. These pages contain all the necessary information users need, such as product information, images, process, etc. Each page has a predefined layout and style; however, things change over the time, and new trends in design, new technologies in user acquisition or shifts in user behavior may trigger us to make changes to our pages. Unfortunately, changing your webpage can be a difficult process, and it’s tough to decide which changes are worth it and which are not. That’s where A/B testing comes in handy.

Before making significant redesigns to the site by adding a new design or removing some information, it’s a good idea to experiment with these new features by running A/B testing to reveal how users will interact with the new changes. A/B testing is good to use when:

  • Testing different names for pages or products
  • Unveiling a new landing page with different content and setup
  • Testing different colors for CTA buttons
  • Completely redesigning a page using different content, layout, media and CTA buttons

The process of A/B testing involves a random experiment where two or more page designs (posts, product pages, etc.) are displayed for different segments of the audience. The purpose of the experiment is to define which version has the greatest impact on sales or makes the biggest impression.

Suppose you need to test a redesigned landing page with new pictures and videos. You can’t simply make changes to your real working page. Instead, you have to create a new page and redesign it with new content, new media and layout. Once you’ve done this, you can run a time-scheduled experiment by randomly sending your users to those pages.

After finishing your A/B testing, all you need to do is collect and review the results of your test. These results are usually highly dependent on the characteristics of your A/B testing, but in general this technique will simplify the process of making changes to your pages.

It’s also very important to choose the right tools to perform your A/B testing. In this blog post, we will use Google Optimize, the most popular tool for running A/B testing for WordPress.

Setting up Google Optimize

There are many A/B testing tools out there and they all have their advantages and disadvantages. Some of them are expensive and some of them are completely free to use, some of them have features that you will never use and some of them are just the essentials. 

In my opinion, Google Optimize is an excellent tool to start experimenting with A/B testing because it’s free to use and easy to set up and, while it does not have a dedicated plugin for WordPress, it’s very easy to integrate in WordPress. Another benefit of Google Optimize is that it ties in with another great tool, Google Analytics, which you are probably already using. The integration of those two plugins makes Google Optimize even more useful than its competitors.

Setting up Google Optimize is easy and can be done in several steps. Let’s dive in and see how it works:

Open up the Google Optimize page and click the Get Started button to start:

Google will ask several questions about sharing your data with other services. You may select whatever options you want here as it will not affect the functionality of the service.

In the final step you will have to agree with the offered services and click Done. Then you will be able to view the Google Optimize dashboard.

You will see this window in Google Optimize where you can start a new campaign starts by clicking on the Let’s Go button:

Pretty easy right? Once those steps are complete, we’ll need to link our site to the Google Optimize dashboard.

Linking your site to Google Optimize

Google Optimize can be linked to your site through two different methods:

The first method is to simply add this code snippet at the top of the <head> tag of your website:

<script src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXXX"></script>

This code is unique, contains your Google Optimize code and can be found in your dashboard by clicking on Settings at the top right corner:

We will not cover in detail how to add such snippets to your WordPress head tag in this article. Instead, I recommend checking out this link covering the entire process in detail.

Luckily, adding this code in Jupiter X is very easy! Simply go ahead and navigate to Jupiter X > Control Panel > Setting. There you will see the option to add a linking code snippet:

The second method is easier and can be done using WordPress plugins. These plugins take care of integration since they already support Google Optimize in addition to their main functions. These plugins include:

  • Google Site Kit: This is an official plugin from Google that’s used to connect several other Google products to your website, including Google Optimize.
  • GA Google Analytics: In this plugin, you’ll need to provide a Google Optimize tracking code to connect Google Optimize. Please see the above image for an Optimize code.

Based on this information, it’s up to you to decide which method to use. If you only want to add Google Optimize, you may need to add the link to your WordPress Head tag. If you are thinking of adding some other Google products, then you may consider using the Google Site Kit.

Create and run your A/B testing

Now that we have everything set up, we’re ready to create our first A/B testing! Go ahead and click on the Let’s Go button (we posted a screenshot above) and give your project a name. You’ll also need to provide a link to the page you want to A/B test:

Once you click on the Create button you will be redirected to a page where you’ll need to add variants of your existing pages:

Use the Add variant button (Please note that the Google optimize Chrome extension is required to edit pages via Google extension. The program will offer to install the extension when you first click on Add Variant). Input the name of your test page, such as “Better Color for CTA,” for example, and click Done.  A variant of the page will be created for testing and you will see this screen:

A/B testing in WordPress

Now, click on the blue Edit button and your page will open in an editor. For example, this is original page view before editing:

A/B testing in WordPress - before edit

And this is the same page after editing:

A/B testing in WordPress - after edit

As you can see, I changed how the CTA button looks. I’m interested in determining which button is more attractive: a transparent button or one with solid color.

Once you are done, click on the Save button at the top corner and then Done. Your testing page has already been published and you will be redirected to the screen containing the variants page.

From there you can add as many variants as you want. After you make your test pages, just scroll down to see the Page targeting and Audience targeting sections. Here you’ll need to set up rules of appearance for your test page and select the audience you want to show your test to:

A/B testing in WordPress

On the next step in Measurement and Objectives, Google will ask you to link Google Optimize to one of your Google Analytics. Choose one from the link and it will be selected:

A/B testing in WordPress

On the final step in the Objectives, choose the objective of your test and save it. There are predefined objectives to choose from but you can also add custom objectives as well:

A/B testing in WordPress

Once you have completed all of these steps, scroll up and you will see that the Start button has been activated. This means that you’re ready to go!

A/B testing in WordPress

Test results review

Now, once you have everything set up and are running your A/B testing, you can take a break and wait for the results. Don’t expect to see them immediately, as it will take more than a week to see normal results on your results page, which will look like this:

A/B testing in WordPress - test results
Image courtesy Google Optimize

As you can see from the results above, you should now have a clear understanding of how the experiment was performed. Conversion rates for the original page are still better than conversion from the special offer test page, which means that the changes are not so effective since the original page performs way better than the new test page.

Conclusion

Now that you know more how to properly perform A/B testing with Google Optimize, you have the chance to steer your website in the right direction. Making changes on your website, especially if you have a large audience, may be risky unless you test them first. With a clear understanding of A/B testing in WordPress, you can stay one step ahead and run experiments and testing campaigns to get more constructive feedback from your audience.

How to Do A/B Testing to Troubleshoot the Theme Issues with Jupiter X

A/B Testing Featured Image
A/B Testing Featured Image

What do you do when you face a problem using any of your tools? Some people stop using them entirely, while some try to fix it to avoid having to replace a perfectly good tool. But how do you fix something when you don’t know its mechanism? The answer is simple: Compare it with a fixed version of your tool and see which part is having the issue.

What is A/B testing?

This is how the so-called A/B testing technique can be used to troubleshoot an issue. It doesn’t matter if your tool is a tangible object, virtual machine, or software You can use this method to troubleshoot and solve the problems you encounter. You probably did it before without knowing that your using the A/B testing strategy, but let me give you some examples so you understand it better:

  • The moment that you decide to set up camp in the forest and pitch your tent, you are actually doing an A/B testing. You are always comparing between different locations and tents. Should I put my tent here or there? What will happen if I place it here? How do the other tents look? Are their campsites better than mine? You are pretty much using A/B testing at that moment to find and examine the best location available for your tent.
A/B Testing Tent
  • The moment that a laboratory scientist compares between normal and healthy samples to give you the results of your blood test, he/she is using A/B Testing.
A/B Testing Lab

The moment that you are in a clothing store and testing the clothes to see which one suits you better, you are doing an A/B Testing.

A/B Testing Clothes

There are dozens of other examples of the concept. You basically used this method a lot in your daily life to troubleshoot an issue.

In digital marketing, A/B Testing is the perfect method to measure the impression you make on your users and increase your sales by collecting and analyzing the statistics of different marketing campaigns.

Let’s see how we can use it to troubleshoot an issue with your website. The principle and method are the same. You need to compare your website with a perfect version of it or with the design you provided (PSD) to be able to detect the issues.

Notice: Always do your testings over a staging website and keep a full backup before starting your tests.

Provide the perfect look

The key point here is to have a perfect non-issue-ish version of your website. Whether it’s a PSD version or it’s a completed website, you need something to compare with your problematic website. Otherwise, detecting the issue will be hard. Keep the perfect look open on a different tab on your browser or in your Photoshop software. You will need it for the next steps.

If you had a website that was previously available but recently got issues and you don’t have a backup or screenshot from it, you may use Archive.org to see how your website looked like back then.

A/B Testing Perfect Look

Check the error logs

The first thing you should do is to use the browser Developer tools. Developer tools will help you detect the problems by providing debug tools and consoles. Hover the mouse on the different DOM elements in the Elements tab to see the size and details, and compare them with the other tab. It will help you detect the difference and then you will get one step closer to resolving the issue. Also, for the Javascript issues, you can compare the Browser Console tabs to see if you have any new errors in the problematic page or not.

A/B Testing Error Logs

Apply a change and compare again

This is a repeating task. You need to continuously compare the changes on your staging website and see if it helped or not. When I’m talking about the changes, I mean deactivating plugins one by one, switching the themes, updating WordPress (or other CMSes if you are using them), and even reconfigure your web host settings. Issues come from different places, so you need to perform the changes from different places to see if it’s related to your problem or not.

The thing is, the better you know the mechanism, the smarter you can troubleshoot an issue. For example, if a section background color is not working correctly, the reason cannot be from the webserver configuration (unless it’s a caching issue). Or when you have a server error on your page, it may not be related (or barely related) to the color configurations of your theme at all.

Sometimes, the issue goes further and comes from the Database or third-party API. So, you may need to reset your database and see if it helps or not. In a nutshell: You need to check everything that involves your website to be able to detect an issue.

Here is a list of things were common issues usually come from:

  • Web hosts and servers configurations. You should check the server requirements of your theme and plugins and make sure it meets the minimum requirements.
  • Outdated core CMS (WordPress), theme and plugins
  • Firewalls or security plugins.
  • Plugin conflicts, like multiple caching plugins which will conflict with each other
  • Misconfiguration of plugins, such as forcing SSL which should be done carefully
  • Misunderstanding or using the functions in an inappropriate way, like using a popup trigger on your burger menu icon (side note: Yes, it happened to some users already) which triggers weird popups as you trigger the menu
  • Customizing the codes, whether they are CSS or JS customizations, or even if it’s your child theme and you did change the theme files inside your child theme
  • Database corruptions or invalid data in the database

It’s better that you apply the changes you think may help, step by step, and see if they work.

Isolate the problem

While you are doing your A/B testing, you are also isolating the problem to the point that you find the reason for the issue and resolve it. When you find the problem, you did the job! The faster you isolate the problem, the sooner you get to the answer.

Here are some major testing tips which will help you get to the root of the issue faster:

  • Deactivate your plugins. If it did resolve the issue, you know that it’s a plugin conflict. Now, you have to activate the plugins one by one to see which one triggers the issue.
  • Switch the theme. Sometimes, a good starting point is to see if the issue is happening because of using your current theme or not. Switch to your parent theme if you are using a child theme, and switch to another theme if you don’t have a child theme. In case the issue resolves itself, you at least know that it’s coming from your theme.
  • Switch to another web host. Sometimes, it’s faster to move your whole website to another web server and see if you still see the issue. It’s especially good for when you have permission or caching issues. If your issue was resolved by moving your website to a new web host, then the problem is your previous web hosting service.
  • Change your browser, device or network. It happens sometimes that your browser, device, or even your ISP causes issues. Also, it’s better to deactivate your browser extensions as much as you can because some extensions such AdBlockers may cause some conflicts with parts of your website.

If none of the above helped, you can isolate more by removing the content from your pages or deactivating headers, footers and block sections. These will help you identify issues with your content if you had any.

Software and tools for A/B Testing

Although the best tools to troubleshoot an issue are your personal computer, a browser, and developer tools, each issue requires its own tool or service. Imagine that your SEO rank has dropped and you want to find the issue. What tools would you need? Probably, you will need your Google Search Console, or Alexa and Google Analytics.

Furthermore, each issue requires its own debugging tools. There are plenty of software and services, free and premium, which can help you troubleshoot an issue and also help you do automatic testing.

Here, I listed some of them:

  • BrowserStack Automate. It gives access to 2000+ real mobile devices and browsers, which include real iOS and Android devices, Chrome, IE, Firefox, Safari, and Edge. You can set a bunch of automatic testing tasks with different conditions and get results by Text Logs, Selenium/Appium Logs, Video Recordings, Screenshots, Console Logs, Network Logs, and more.
  • Screener.io. Although this is a good tool for automated testing, it’s Screen Overview function is also a great tool to find differences between two versions of your page.
  • WinMerge.org. It’s a diff checker tool that will allow you to find the difference between two versions of texts. You can use this to spot the differences between page contents, page sources, and even images!
  • GTMetrix.com is a performance analyzer. Open two tabs of the same website and apply your changes to your website. Then, retest on one of the tabs and do your performance A/B testing with it.
  • WordPress logger, debug and troubleshooting tools such as Debug Bar and its Add-ons. They can be considered as A/B testing debug tools as they provide a set of logs. You can then observe them and compare with different scenarios while doing your A/B testing in order to isolate and find the issue.

Conclusion

As mentioned, A/B testing is a method that you are using a lot in your daily life. You can use it to troubleshoot your website issues, too. Every tool you are using to check your website and debug its issues can turn into an A/B testing tool. It’s just about the way you’re using your tools.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.