How to Create an A/B Test (Visual Editor Guide)

Before creating a test

Go to the FreeCROTool interface and find the project for the website you want to test.

A project normally represents one website where you run experiments. The website should already have that project's FreeCROTool testing tag, sometimes called a snippet, installed. The tag lets the visitor's browser retrieve the tests you have published for that project.

Visual Editor example

This video demonstrates the FreeCROTool Visual Editor and some of the changes it can make. It is an example of the editor in use, rather than a step-by-step guide to creating and configuring a complete test.

Watch the Visual Editor example on YouTube.

1. Open the project Workspace

1. Open /interface/.
2. Find the project for the website on which you want to run the test.
3. Open that project's Workspace.

The Workspace contains draft and published settings for the project's tests, audiences and locations. Saving changes in the Workspace does not immediately change the live website. Changes reach visitors only after the Workspace is published.

2. Start a new Visual Editor test

In the Workspace, select Add New Visual Editor Test. The creation dialogue asks for the basic information FreeCROTool needs before it can open the page in the visual editor.

Give the test a meaningful name

Use a name that describes the hypothesis or the change, not a name such as “Test 1”. For example, “Product page – larger Add to Basket button” is easier to recognise in reports and safer for other people to publish later.

Select the page to edit

If Google Analytics has been connected in the project's settings, the dialogue can connect to GA4 and retrieve a list of URLs that have already been recorded for the website. Selecting an existing URL reduces typing and makes it easier to find a real page on which to build the test.

You can also enter a page manually. A location created this way uses a strict, exact URL match. Visual-editor test pages are intentionally more restrictive at creation time so the editor opens a definite page rather than an unpredictable group of pages.

You can edit the generated location afterwards if the test should run across several URLs, needs a query-string rule, or requires AND/OR logic. See how to create and edit A/B test locations.

Choose how many variants the test needs

A variant is one version of the experience being compared. The control is the original, unchanged page. Variant 1, Variant 2 and any later variants contain the alternative changes you want to measure against that control.

Choose only as many variants as the hypothesis needs. Every additional variant divides the available traffic and usually means the experiment needs more visitors and more time.

The control cannot contain transforms. A transform is an instruction that changes the page for a variant, for example, replacing text, changing a colour, hiding an element or inserting a banner. Keeping the control free of transforms preserves the original experience as a dependable comparison.

3. Create the test and open the Visual Editor

After checking the name, page and number of variants, create the test. Open the new test and select Visual Editor.

The editor loads the selected webpage and adds a tool strip, positioned on the left by default. The strip lets you:

• switch between the control and each variant;
• select page elements and create changes;
• review the list of transforms already added to the current test;
• identify which element a transform belongs to; and
• remove a transform to restore the original version of that element.

When you hover over a change in the list, the corresponding page element is highlighted and fades in and out so you can identify it. This is especially helpful when several changes affect nearby elements.

Move or minimise the editor

If the tool strip covers part of the page, swap it to the other side. If it gets in the way while you inspect the page, minimise it and reopen it when you are ready to make another change.

4. Build each variant

Switch to the variant you want to edit, then select an existing page element or add a new component. The available visual changes include:

Modify existing elements

• change text;
• change text or background colours;
• change font size;
• change border style, thickness and pattern;
• make an element clickable and optionally track its clicks;
• hide an element completely so it no longer takes up space; or
• make an element invisible while preserving the space it occupies.

Hiding and making invisible are different. Removing an element's space can cause surrounding content to move, while invisibility leaves an empty area where the element was displayed.

Make an element clickable and track clicks

You can turn a suitable element into a clickable link that takes the visitor to another webpage. The Visual Editor can suggest destinations from links already found on the page. If Google Analytics is connected in the project settings, it can also retrieve URLs previously recorded in GA4, as it does when you select the initial test page. You can enter the destination URL manually when the page you need is not listed.

Click tracking records that the visitor interacted with the element so you can measure the action across the test. Making an element clickable controls what happens after the click; enabling click tracking measures the click. You can use either capability where appropriate, or use them together for a link whose engagement should be measured.

Add new content and components

You can add paragraphs, links to other pages and images. You can also add more prominent components such as:

• notification or “hello” bars in the header or footer;
• countdown banners; and
• popups with configurable overlay background colour, transparency, border radius and other presentation settings.

Keep additions accessible and easy to dismiss where appropriate. Check text contrast, keyboard access, focus behaviour, responsive layouts and whether important consent controls remain usable.

Duplicate an existing element

Duplicating an element is useful when you want to retain its exact styling as a starting point. You can duplicate it, change the copy, and then remove the original in that variant. Review the result carefully because duplicated form fields, IDs or interactive controls can behave unexpectedly if both copies remain on the page.

5. Understand tracking across variants

This makes it possible to compare the same action consistently across the control and alternatives. Use stable event names, avoid personal information, respect consent choices and check that an event fires once, not zero times or several times, in every variant.

6. Review the live preview

The visual editor's live preview shows approximately how the selected page will look when the test is running and the visitor receives the relevant variant. Switch through the control and every variant and review the transform list as you go.

A successful editor preview is not the same as testing the published tag. The live website may load scripts, consent tools, personalised content or delayed elements differently from the editor.

7. Test in Staging before going live

1. Save the test.
2. Set its status to Staging.
3. Review its locations and target audience.
4. Review every other pending Workspace change.
5. Publish the Workspace.
6. Preview the published Staging test through the website's installed FreeCROTool tag.

Publishing updates the live project copy used by visitor browsers. It publishes all pending Workspace changes together, not only the test you have just edited.

Check every relevant environment

• the control and every variant;
• URLs that should and should not match;
• each targeted browser;
• desktop, tablet and mobile devices;
• portrait and landscape device orientations;
• different viewport sizes and zoom levels;
• logged-in, logged-out and consent states where relevant;
• slow connections and content that appears after the initial page load;
• links, forms, menus and other interactive elements; and
• analytics and conversion tracking in every variant, including control.

Only move the test from Staging to its live status after the visual result, targeting, interactions and tracking work as expected in all relevant conditions.