How to create an A/B Test

The first thing you’ll have to know is the answer to this question: What is A/B testing?

What is an A/B test?

A/B testing (sometimes called split testing) is the act of running two versions of a web page at the same time to see which one performs better. You compare two variants of the same page (the original version is called ” control ” and the changed version is called ” variation “) to visitors at the same time. The one that gives a better conversion rate, wins!

Now that you know what A/B testing means let’s start creating your first experiment of this kind.

Step 1. Create a new A/B test experiment

From the main left menu choose the ‘A/B Testing’ option.

From the next window choose  New A/B Test.

In the next window you can add the URL of the web page you intend to make changes to ( “Enter the page URL you want to edit” ) or add the HTML source code of the web page you want to start testing.

The second option,  ‘or upload HTML’, is used only for the auto-generated web pages, like the shopping cart page.

Step 2. Apply the changes in the variation editor

Let’s start implementing the changes that you want in the “Variations” tab. Here you will find the WYSIWYG editor which will help you make changes to the original (“Control“) page you’ve entered into the “Enter the page URL you want to edit” box earlier.
To start changing things into the page just click on “+ NEW VARIATION” next to the blue ” Control ” button.

After loading the URL of the webpage in the platform, create a “+ New variation” and every time you hover your mouse on a page element (image, link, piece of text, etc.) inside the variation, you will be able to select it.
Click left or right on it and a menu with all the available options for that element will appear.

Depending on the element type, it will contain the following operations:

a. Edit element: here you can edit the HTML code, content, and/or CSS style of the element.

• HTML code: selecting this you can make changes inside the HTML code of the element.
• Content: you can make changes to the content of an element such as replacing the text inside a paragraph.
• CSS style: you can change the style of the element, details related to text, color, background, dimensions, borders, layout or even add custom CSS attributes.
• Change image: an option available only for images that lets you change or upload another image.
• Edit image: also an option available only for images, you can edit the image by adding effects, frames, stickers text, etc.
• Change link: an option available only for links, which lets you add a new URL for the element.
• Edit link anchor: allows you to change the link anchor without losing the javascript events; this option is also available just for link-type elements.

b. Insert content:

• Before selected: you can add content before the selected element.
• After selected: adds content after the selected element.

c. On click:

• Track clicks: sets an on-click trigger goal that tracks how many clicks were made on that certain element.
  This trigger goal is created individually from inside each A/B test. It will not be available in the Goal section from the left side menu.
• Display interaction: you can choose a variation from an active web personalization experiment to be displayed on click on that element.
• Display survey: you can choose one survey from the active ones to be displayed upon clicking on the selected element.

d. Move element: lets you set another position for the selected element from a CSS perspective (the position attribute).

e. Rearrange element: you can rearrange the element from an HTML perspective (it changes the hierarchy of the HTML elements that are included in the list).

f. Resize element: you can resize the element directly from the editor.

g. Hide element: hides the element from the page using the CSS style attribute “visibility: hidden”.

h. Remove element: removes the element from the page and all its attributes and values.

i. Select parent: selects the parent tag of the element.

j. Undo last edit: it’s an option that is visible only after one change has been made in the editor and it undoes the last change made in the editor.

Step 3. Set the audience and segmentation

Now you have to choose your “Audience“.  That means that you must “Manage pages where you want to run this experiment” and select the “Segment” (Target) of visitors you want to see the experiment.

To select the pages where you want to run the experiment you can choose from different conditions for the URL :

1. URL is: With this rule, the A/B test will run only on the exact page introduced in the value field next to the condition
2. URL is not: With this rule, the A/B test will run on all the other pages but the one introduced in
the value field next to the condition
3. URL starts with: With this condition, the A/B test will run on all the pages that have an URL
which starts with the same value as inserted in the value field
4. URL ends with: With this rule, the A/B test will run on all the pages that have an URL which ends with the
same value as inserted in the value field next to the condition
5. URL contains: Using this condition the A/B test will run on all the pages that contain in their
URL the same value as the one inserted in the value field
6. URL does not contain: Using this condition the A/B test will run on all the pages that do not
contain in their URL the value entered in the value field
7. URL RegEx: Using this you can define with RegEx the pages where you want the A/B test to
run
8. Page contains keyword: With this, the A/B test will run only on the pages that contain the
keyword or keywords in a small sentence/grouped format

This is an example of a product description:

This is an awesome product with awesome features at half of the price of other providers.

Correct keyword to use: awesome product Not correct keyword to use: awesome providers

If you don’t have a large amount of traffic on your website, we recommend you add multiple pages in the test.
When you do this you must add only the pages that have the same structure as in case of an e-commerce website where all of the product pages look similar.

After you’ve done managing the pages where you want to run the experiment select the “Segment” of visitors who will be included in the experiment by clicking on the red drop-down button.

After you’ll click on it the “Select a segment” window will appear. From this window, you can choose a segment that has been already created or create a new one.

In the second part of the page, you can add a maximum number of responses (once that number is reached the experiment will stop) and select the devices where you want the A/B test to be visible.

In the end, you have the option to mark it as exclusive, meaning that no other experiments will be triggered for the visitors who already viewed this one, for the time it is running.

Step 4. Set the traffic allocation and goals

In the next tab “Traffic Allocations and Goals” you will select the percentage of visitors that will see the experiment. This percentage will be randomly extracted from the segment you have decided to use. You can run the test on all of the visitors who are included in the segment or just a part of them (let’s say 50%).
After the percentage of visitors is set you can use the variation traffic selector to modify how much of that percentage will see the “Control” ( original page ) and how much the “Variation” ( the page with the changes ).

In the second part of the page, you will find the “Goals“.  A goal is set to track sales, conversion rate, click rate, engagement, etc.

You can set them as page views or customizable goals such as conversion rate, sales – that require inserting a shortcode into the website’s source. The customizable goals allow you to see the impact of the change in the A/B test on the performance indicators: conversion rate, revenue, etc.

There are 3 predefined goals that you can use – Sale ( which works only after the Goal tracking code is inserted on the thank you page of your website – Click here for more details), Engagement and Bounce rate.

Step 5. Schedule and publish the experiment

The last step of setting up and A/B test experiment is  “Schedule”-ing it. Choose for how long to set it live, when to be triggered to your visitors and whether or not you want to receive an email when it has expired.

Last, but not least PUBLISH it.
That’s it! You’re ready to see which idea converts more!

DON’T FORGET: After each modification made you have to wait 3-4 minutes until it will be visible in the front end.