VWO A/B Testing: A Complete Guide for 2020

VWO, or Visual Website Optimizer, is a leading all-in-one Experience Optimization platform in the Conversion Rate Optimization industry of today.

It helps companies increase their conversions, and therefore sales, by assessing user behaviour and web analytics, while building personalized experiences customers just can not love based on findings it brings.

To answer the question of “What is Visual Website Optimizer?” simply, VWO is a comprehensive website optimization platform that combines and connects all of your Conversion Rate Optimization tools in a single place.

So what functionality does it offer and how do you run an A/B test in VWO — let’s find out in the following sections 😉

Image for post
Image for post

Visual Website Optimizer (VWO) Tools

After what you’ve just read about VWO performance and versatility, it’s hard to not assume they have literally everything and to not fall in love with the idea of having all of your A/B tests, their findings and implementations in one place.

Great news — you don’t have to, as here is a complete list of all Visual Website Optimizer tools you are allowed and encouraged to use in order to make your customers happy, let’s take a look:

  • Heatmaps
  • Session recording
  • Cart abandonment
  • Mobile app testing
  • Push notifications
  • Server-side testing
  • Webform analytics
  • On-page surveys
  • Visitor segmentation
  • Real-time tracking
  • User journeys
  • Facebook messenger
  • Usability reviews
  • Split URL testing
  • Multivariate testing
  • A/B testing

Impressive, right? And the power of the mighty Visual Website Optimizer does not come from simply having all of these advanced tools of Conversion Rate Optimization at your convenient disposal, it lays in uniting all of these operations together.

Image for post
Image for post

Imagine how much simpler it is to determine the success of, say, your Facebook campaign, when you can track which ads have the most impact, which brought the most qualified leads, how many of the newly-acquired users actually converted and after which steps.

One of the greatest advantages VWO website tester presents is the ability to monitor the performance of your business on a small and on a large scale simultaneously — from the behaviour of a single user on your website to how the whole company is performing in general in terms of conversions, leads and sales.

Now that we know what is VWO and the tools it offers, let’s find out how to run an A/B test in the Visual Website Optimizer you’ve heard so much about.

How to run an A/B test in Visual Website Optimizer (VWO)

Among the variety of all website testing tools Visual Website Optimizer offers, the most demanded one is VWO AB testing, which is exactly what we are reviewing today. Below is a complete guide on how to run an A/B test in VWO.

Ready to begin?

Image for post
Image for post

Step 1. Install a VWO code

After you’ve created a VWO account, and among all other tools of your personal cabinet chose A/B testing, start your split testing by connecting your website to VWO by installing the code.

All you have to do is copy the code below and insert it before the </head> tag on your website:

<!-- Start VWO Async Smartcode -->
<script type='text/javascript'>
window._vwo_code = window._vwo_code || (function(){
var account_id=464082,
settings_tolerance=2000,
library_tolerance=2500,
use_existing_jquery=false,
is_spa=1,
hide_element='body',
/* DO NOT EDIT BELOW THIS LINE */f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){window.settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);var a=d.createElement('style'),b=hide_element?hide_element+'{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}':'',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&f='+(+is_spa)+'&r='+Math.random());return settings_timer; }};window._vwo_settings_timer = code.init(); return code; }());</script><!-- End VWO Async Smartcode -->

This step will look like the screenshot image below, where, as you can see in the header area, you can also choose alternative options for your WordPress, Magento, BigCommerce, Drupal, Demandware, or Joomla website.

Image for post
Image for post

After this, you can verify a VWO code using their native tracker, and you are all done! Proceed to step 2 of the VWO A/B testing tutorial.

Step 2. Set up a VWO URL

To do so go to your Dashboard > Testing > A/B > Create an A/B test. You will see a new window that looks like this ⇩ and offers you to choose from an existing hypothesis or to create a new one you’d like to test.

Image for post
Image for post

If you haven’t yet, press Create a new hypothesis and type in the empty blanks on your observation, expectation and what it will address. There is no right or wrong.

At this stage you are basically describing the issue you are about to test, supplying it with images and info that will further be helpful to you and your team.

Image for post
Image for post

After you’re done and clicked Create you will return to the previous page that displays your URL. And you see, here’s where the VWO A/B testing magic happens.

Right below the chosen URL you’d like to test, at the very bottom, is a progress bar that displays exactly what to do next. For example, we just accomplished Step 2 — Set up a VWO URL and moving on to Step 3 — Setting Up Variations.

Image for post
Image for post

Step 3. Set up a VWO A/B Test Variations

After you’ve pressed Next from the previous URL page, you will see a new window that will offer two points — Control and Variation 1.

Image for post
Image for post

You don’t have to do anything here at the moment, so focus all of your attention on the new window of your website that VWO AB testing editor just courteously opened for you.

Image for post
Image for post

Here you can see the URL you’ve previously inserted opened right in front of you ready for a change! If by any chance you want to test an element elsewhere, go to a Bottom Bar > Mode > Navigate (instead of Design).

After you’ve arrived at the place you want to test, use the VWO A/B testing editor to adjust the element you’ll use as a variation, adjusting their shape, size, copy, colour, position, etc.

Image for post
Image for post

Just edit the element you want to test and the Visual Website Optimizer will automatically recognize it as a Variation 1, and when you will see Modifications (1) right under it you are ready to proceed further.

You can add a number of variations using the blue + Add Variations button below with a number of modifications before you decide you are ready to continue and press Next.

Step 4. Set up a VWO A/B Test Goals

Now that you’ve pressed Next leaving your website, you will return back to the VWO A/B Testing Dashboard to set up some A/B testing Goals.

A goal is just another name for a desired conversion. Here you tell a VWO editor what exactly you want it to do:

  • Track page visits
  • Track engagement
  • Track form submits
  • Track clicks on links
  • Track clicks on element(s)
  • Track revenue
  • Track custom conversion
Image for post
Image for post

You can press Include URL to add another page to monitor and press Add Another Goal to track a number of different conversion actions across your designated URLs. After you’re done press Next to get to the final step of the VWO A/B Testing Guide tutorial.

Step 5. Set up Advanced Options for VWO A/B Test

Congrats! You’ve got to the final stage. It wasn’t that hard now, was it? Now all you have to do to start running an A/B test in VWO is add some advanced options — if you want, and you’re doooone.

So let’s see what we have here.

Image for post
Image for post

Here you have to name your VWO A/B testing campaign and choose if you want to limit the amount of traffic that counts towards your experiment. It can be a plausible option if the page you are testing overflows with traffic, but will take longer to reach A/B test significance.

Below is the next advanced option — integrating your A/B test with popular Analytics and Web products like Amplitude, Adobe Analytics, KISSmetrics, Mixpanel, Clicktale, Google Analytics, Universal Analytics, Google Tag Manager, WordPress, Magento, Drupal, Joomla, Hubspot, Tealium and others.

Image for post
Image for post

Now all you have to do is press Next, which will bring you to a final page — reviewing your campaign and starting the A/B test experiment. You can choose to Preview campaign and start later or Start now, depending on your preferences.

Voilà! Your VWO A/B test has been created!

Image for post
Image for post
Image for post
Image for post

Conclusion

Without a doubt, Visual Website Optimizer is a terrific and comprehensive Conversion Rate Optimization platform, and, as you’ve probably noticed while setting up your VWO A/B test, user-friendly tool.

If you feel like running A/B tests in other CRO and Experience Optimization platforms, read our article on How to Run an AB Test in Google Optimize. Cheers 🙂

Originally published at https://insightwhale.com on December 6, 2019.

Written by

Fully remote team of professionals providing Digital Analytics, Conversion Rate Optimization and Business Intelligence services for clients around the world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store