Do you think that your website could have a better conversion rate or more visits if you make some changes? Did your developer or marketing team suggest you to modify some things, but you are not totally sure or convinced that it is the best thing to do?
Here we will show you how to perform tests on two or more versions of a website using a very useful tool by Google, called Optimize. Thus, you will be able to decide what works best in your site, based on actual data, instead of making assumptions.
In the first place, you must know that, an A/B test is a random experiment in which two or more variants of the same website (A and B) are used. Variant A is the original, and variant B (or C, D, F, or as many variants as needed) contains at least one modified element in the page. The idea is to check which of all versions is the most efficient or has a better performance, depending on your objectives.
The development of these tests can be confusing at the beginning, so it is advisable to start doing small experiments, such as changing the color of a button or removing an unnecessary field from a form. When you have got used to creating variants and experiments, you may expand the scope of your tests.
Performing tests with your website can help you to reduce bounce rates (people who abandon your page), improve your content and increase your conversion rates, among other things. However, this is not always the most advisable option.
You have few visits, because it would be more desirable to focus your efforts in increasing your traffic before performing any tests.
Your page has programming problems or something is not working properly. Focus on solving this first.
The cost of performing these experiments is greater than the profit they can provide you.
It is a Google platform that allows users to perform different A/B testing campaigns. The most interesting thing about Google Optimize is that it takes A/B Testing to the next level, allowing you to show two or more variants of a website to the users (up to 5, with the new update of the platform).
Another interesting functionality are the redirect tests(or redirection tests). These allow you to perform tests in independent websites by sending a percentage of your traffic to one website version and a percentage to another.
Apart from multivariate or redirection tests, some of their numerous advantages, we can highlight the following:
Connection and integration with Google Analytics 360 suite.
Potential for deeper analyses directly from Google Analytics interface.
User-friendly visual editor for anyone with no coding background, for the creation of simple experiments.
Now, you know what A/B testing is and why applying it in Google Optimize is a great alternative; let's see what are steps to follow for implementing it. Then, we will create a small project using Angular in which we will change the style of a button. We will make it more noticeable, and we will check the number of times that users click on it.
Before creating an experiment for the first time, it is of great help identifying the problem you have to solve, and then, stating a hypothesis about what you might change to improve it. Once your hypothesis is ready, evaluate under several parameters, such as its level of reliability, its impact on macro objectives and how easy it is to configure it, etc.
For example, let's say that a website is not 'converting' as much as you expected (defining “convert” as actions such as closing a sale or generating a registry). After analyzing all the possible causes for your results, you have determined that changing the call-to-action (CTA) button could influence the result. A possible hypothesis could be that, if you change the color of the call-to-action button, the conversion rate would improve by a 20%.
When you have defined your hypothesis, it is time to install the Google Optimize tool in your website to enable testing. You should have created a Google Optimize account before this. If you do not have one yet, go here and create your free account.
Once your account has been created, log in to the platform to start doing A/B tests. In the first place, you should create a new experience, this is where you will configure your experiments.
Then, select "A/B test".
Add a New Variant
You can add up to five variants per experiment, and they can be edited later.
After creating a variant, you have to edit its content; you will need to install the Chrome extension that is available here.
Then, click on the Edit Button of the created variant and, if you already have a Google Optimize extension, a web editor will be displayed. We will use this editor to make the changes that we stated in our hypothesis.
For our current example, change the color of the button from white to blue, and add an icon to it. Also, rename the Web page as “Version B”. The result obtained should be the following:
Also, assign the website traffic redirection value to 50%, so that you can demonstrate your results quickly.
To link these two services, insert the script below in the index.html file of your project; this will allow the data obtained to be sent to Google Analytics. It is important to insert this script, as it will help you to obtain information on the objectives established for the experiment and demonstrate the results using Google Analytics.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'auto');
ga('require', 'GTM-XXXXXX');
ga('send', 'pageview');
It is also important for you to install a Google Optimize snippet for the experiment to render the two versions of your website.
1. Define the objectives of the experiment.
Now, define the objectives of your experiment, you may choose them from a default list or you may create a personalized objective. This time, we will create a customized objective to register the number of clicks by users in the two versions of the website.
For this experiment, the event Label was: “Click Blue Button”
Test your experiment configuration
It is important to verify that the configuration is correct; otherwise, the experiment will not render your website's Version B. For this, click on Verify Installation in the Configuration section of the Google Optimize snippet. This message should appear on screen:
Send events
Finally, send the click event to google Analytics. To do this, create a service in your Angular project; it will be responsible for triggering the event when you click on the button.
This is the service:
After defining the experiment criteria, you will be able to execute it.
If you access from the browser to the website, you will see Version B.
You can find the Angular project code here.
To observe the results of our experiment, we can log in to Google Analytics console. In the Event's section, we can check the number of calls to the event created: “Click Blue Button”. This number exceeds the number of times that the white button was clicked in more than 20%, and we could test the hypothesis that we stated for our experiment.
According to Google's official documentation, it is recommended to continue the experiment until at least one of the following conditions has been fulfilled:
That two weeks have elapsed, in order to observe cyclical variations in the web traffic of a whole week.
At least one of the variants must show a 95% probability of exceeding the reference value (current website traffic before making any modifications).
We hope that this article has been useful for you to perform tests on your website and to provide validated knowledge for decision-making in your website's or app design or user flow.
© 2018-2024
Llapingacho LLC.
