Successfully install Google Optimize on any website, which will allow you to start A/B testing to make careful data-driven changes to your user experience.
Goal: To successfully set up VWO and start running A/B tests on your website.
Ideal Outcome: VWO is setup, tested, and ready for you to start experimenting.
Why this is important: A/B Testing allows you to make careful data-driven changes to your user experience. VWO is free and integrates with Google Analytics.
Where this is done VWO and your website dashboard.
When this is done: Only once per website.
Who does this: The person responsible for Website Management, or Conversion Rate Optimization.
Prerequisites or requirements: None
What you should know before you start
VWO is free for up to 50,000 visitors per month. This means you can run unlimited tests, but they can only be displayed to a maximum of 50,000 visitors each month. Once you reach the 50,000 visitor limit, VWO will automatically pause your tests unless you upgrade. Alternatively, you can resume running your tests next month when your quota refreshes.
Sign up for VWO (Free)
01▸ Visit VWO.com and click “Try VWO for Free”.
Enter your business email and click “Start Now”.
Input your name, phone number, and password to proceed and click “Create Account”.
On the set up page, input your website URL link and fill out your monthly average traffic and the industry type. Click “Next”.
Next, start with a free 30 days VWO trial account with products “VWO TESTING – WEB” and “VWO INSIGHTS – WEB”.
Once the set up is complete, you’ll need to connect your website using a SmartCode.
Get the VWO SmartCode
01▸ You will need to generate a SmartCode according to your website domain. Click “Connect Now”.
Next, click “Website” and then “Next”.
Enter your website domain name and tick the box below to track all sub-domains as well. Click “Add domain” to proceed.
Ta-da! Your SmartCode is ready to be copied and deployed in your website.
Note: We do not recommend installing the VWO SmartCode using tag managers like Google Tag Manager. By default, all tag managers load VWO code asynchronously, which can cause page flicker on test pages. Often, with the use of tag managers, the VWO code may load with a delay, causing time-out issues and preventing visitors from becoming part of the test.
Add the VWO SmartCode to your website
01▸ Sign in to your website admin panel. In this SOP, we will be using WordPress as an example.
02▸ Go to “Plugins” > “Add New Plugin”.
Search for a plugin that helps insert a code into your website header. Install and activate WPCode.
Once activated, go to “Settings”. By now you should be able to see “WP Headers and Footers”.
Under “Scripts in Header”, paste the VWO SmartCode.
Remember to click “Save changes” at the bottom of the page.
Finally, go back to VWO where you’ve copied your SmartCode and scroll down to the bottom. Enter your website URL to verify by clicking “Check”.
VWO will notify after 30 seconds if the copied SmartCode has been properly installed into your website.
Create an A/B Test in VWO
01▸ Go to your main VWO dashboard and click “Create Test”.
Name your campaign and select “A/B Test”. Click “Create” to proceed.
Under the configuration tab, specify the URL of the webpage you want to test.
In the case of specifying a URL pattern for the campaign, where you wish to exclude a given webpage that matches the pattern criteria, the “Exclude pages” URL option comes in handy.
02▸ Next, create variations for your site.
- Editor URL: You can edit this URL by clicking on the Edit icon next to the URL.
- View Mode: You can set the “View mode” to “Desktop”, “Mobile”, or “Tablet”, which will enable the editor to load the view of the webpage correspondingly.
- Edit with: We recommend to apply the changes to “Visual Editor”. The “Code Editor” is an advanced manual code editing tool, which requires a website developer to customize your webpage(s) changes.
- Traffic split: The table in the Variations page populates the control (default), which is the original version of the webpage and all the variations that you have created in the respective editor. By default, it is split equally.
Recommended Traffic Split for VWO Testing Start Small and Gradual: Initially allocate a small percentage of traffic (e.g., 10%) to the new variation while keeping the majority on the current version. This minimizes risk and lets you monitor the new variation’s performance closely. Monitor and Adjust: If the new variation performs well and there are no significant issues, gradually increase the traffic percentage (e.g., from 10% to 25%). Continue to monitor performance and feedback as you make these adjustments. Even Distribution for Larger Tests: For more balanced testing, you can distribute traffic evenly among variations, such as 50% to the control (current version) and 50% to the test variation. Alternatively, if you have multiple variations, you can split the traffic evenly among them (e.g., 33% to control and 33% to each of two variations). Custom Distribution: If you have specific needs, use the custom distribution option to allocate traffic according to your preferences (e.g., 60% to control, 20% to Variation A, and 20% to Variation B). Auto-Distribute (Multi-Arm Bandit): To maximize efficiency, you can use VWO’s auto-distribute feature, which dynamically adjusts the traffic allocation to favor better-performing variations. This helps in quickly identifying and maximizing the best-performing version. To add another variation to the existing one, you can click on the “Add variation” option and name it. Click on the “Edit” button to edit the new variation. Every variation comes with “Preview”, “Clone”, and “Delete” options (icons on the right). Click “Save Now”.
03▸ Next, under “Metrics”, click “Add primary metric”.
To se up the metrics for your test campaign, perform the following steps:
- Enter the name of the metric
- Select the event in the dropdown. You can choose either a system-defined event from “Standard Events” or a custom event from “My Events”.
- Now click on “+where” to specify the URL of the page/element on which you want to track the event. Specify the URL matching condition and specify the URL of the web page. You can include or exclude pages as required. You can add more locations by clicking “+and where” and creating a criterion for locating the pages/elements. To delete a location criterion or a URL, click on the respective “Delete” icons.
- You can configure how you want the metric to measure the conversion using the following options:
- Unique Visitors – Each visitor, upon triggering the event, can be counted as converted only once, irrespective of the number of times the event is triggered by the same visitor. E.g. You can use this option to track if a visitor has clicked on a link.
- Event Totals – The event is counted as converted every single time a visitor triggers it. This way, it also populates multiple conversions made by the same visitor. E.g. You can use this option to track the total clicks on a CTA button, such as Add to Cart.
04▸ To add any additional metrics, click “Add secondary metric” under the “Secondary metrics” section and repeat the steps of adding the primary metric.
The next step is to apply any third-party application integrations that you have already enabled in your account to your test campaign.
Note: By default, the “Audience and Traffic” allows you to pre-segment the visitors to become the audience for your campaign and also allocate the traffic percentage for the individual variations. If you haven’t yet integrated with any third-party application, click on “More Configurations”>”Click here” to browse integrations, search and select the respective third-party application integration tile, and click on the “+Click to connect” button to enable the corresponding integration. Click “Done”.
05▸ Finally, review your test campaign in the configuration summary page before clicking “Start test”.