Hello World! or how to run your first A/B test

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.

A/B testing different headlines

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

Create a new 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

Create a new 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:

URL=https://demo.useitbetter.com/landing-pages/hello-world.html

or Section which is a simplified version of URL:

Section=landing-pages/hello-world.html

Once you enter the rule into the “key/value” field hit Enter key and click apply.

Trigger a Response

Turn segment into a Trigger

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

Configure triggered response to change headlines on the page

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.

If you would like to make other changes besides the copy you can also add CSS styles and run custom JavaScript in the fields below.

Testing the Trigger

Test changes in the Preview Mode

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.

Set the test sample and publish to the production

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.