Hello World! or how to run your first A/B test
When we build new features we believe they will have positive impact on Conversion Rate or Customer Experience. But what if we are wrong? What if the idea was good but implementation was buggy? A/B testing allows you to avoid costly mistakes and learn what really works for your customers.
UseItBetter started as an analytics tool but over the time it turned into a powerful tool for data-driven web development. Using Triggers you can remotely change how your website works regardless of what your CMS (Content Management System) is capable of. That includes adding personalisation, customisations, or even adding widgets like contact forms, messages, notifications and more.
Whatever feature you decide to implement, you should consider A/B testing it to see if it has a positive or negative impact on your metrics like revenue or conversion rate.
In this tutorial, we’ll show you how to test changing a headline on your landing page from “Hello!” to “Hello World!”.
Implementing the “Hello World!” A/B test
We start with a landing page that has UseItBetter scripts added to. It’s basically a single <script> tag that you need to add in the <header> tag of your page. Once you do this, you can start remotely changing the page.
Create a workspace
Sign in to your project and create a new workspace. Call it “Hello World” and save.
Most tasks in UseItBetter start with creating a workspace where you can build all related features but also analyse data, prepare reports or data feeds for data-driven features like personalisation or recommendations.
Create a segment
A segment is a subset of visits to your website that match some rules. In analytics, segments contain data collected in the past. However, if you assign a trigger to a segment, you will be able to change how your website will work in future when a new visit meets all the rules of your segment.
To create a new segment, click [+] icon on the “All Visits” branch. A modal window will pop up.
Since we want to change the content of a particular landing page, we need just a single rule based on URL:
or Section which is a simplified version of URL:
Once you enter the rule into the “key/value” field hit Enter key and click apply.
Trigger a Response
Now our Workspace has a new segment. To assign a trigger to it, select the segment and open the Triggers tab. You will see a list of different responses that you can trigger when a user visits the landing page.
To change the content of the page, select “Change Or Add Page Content” response.
Changing the Page Content
To change the headline from “Hello!” to “Hello World” we need to enter the new copy into the “Text or HTML content” field.
The text has to replace the existing content inside the <h1> tag so we need to select "Replace element's content" option and then enter “h1” into the "selectors" field.
Testing the Trigger
To test the change, save the workspace and click “Preview Mode” in the top right corner. You will land on your website’s homepage and at the bottom of the window you should be seeing UseItBetter console. If you don’t, make sure there are UseItBetter scripts on the page and that the Preview Mode is working. You can always force it by adding “?previewMode@@on” parameter to the URL.
Navigate to the landing page to see the changes.
Publishing Trigger as A/B test.
Go back to the app. Change the sampling to 50% and toggle the Preview Mode. If you click save, the changes will immediately go live for half of your users.
That’s it. Your first A/B test is live.