Create A/B Tests With The WordPress Block Editor – The Complete Guide

If you have created a website with the WordPress block editor, it’s time to make the most of it and optimize its conversion, which you can do by implementing A/B tests. In this post we will see very briefly what A/B tests are and why they are necessary and how, thanks to the Nelio A/B Testing plugin, you can easily create them on any WordPress website.

What Is Web Conversion and Why Create A/B Tests?

In online marketing, the two topics that are covered in more depth are SEO optimization and web conversion rate optimization.

Web conversion refers to any action that a user is expected to take when reaching a website. Visiting a product details or the pricing page, subscribing to a newsletter, contacting us, reading an article, etc. And the conversion ratio is the number of conversions achieved with respect to the number of visits. That is, if you have a total of 100 daily visits, two of which end up buying a product, the conversion rate on your website is 2%.

With Google Analytics you can measure your conversion rate at any time, but the best tool that will help you improve your conversion rate is A/B testing. In short, an A/B test consists of, based on a hypothesis of improvement, proposing a change in your website (for example, a redistribution of the Landing Page to better display certain relevant information, a rearrangement of the menu to make more clicks on my product page, or a radical change in the theme to make it more attractive), and then see if that change works better than what you had before.

Technically, an A/B test is nothing more than an experiment that consists of showing two variants of the same web page to different segments of website visitors at the same time and comparing which variant generates more conversions.

A/B tests are not experiments that you perform randomly, they should be part of a more ambitious process known as the Conversion Ratio Optimization or CRO process.

Steps Prior To Creating An A/B Test

In order to improve your conversion, the first thing you need to know is where you are and where you want to go: define your business goals, your website conversion goals, your KPIs, and the metrics for those goals.

To define the your website goals you must understand the conversion funnel, that is, what your visitors do from the moment they land on your website until they become customers. This way you can optimize each different stage in the funnel.

For example, in the case of our website, Nelio Software, our goal is to increase subscribers to the premium plans of our plugins. A visitor may first learn about Nelio A/B Testing when they have Googled for information about A/B testing. Once they lands on our website, they reads some articles in our product documentation to learn more about it. Then, if the visitor finds interesting information, they will ask for more detailed information or download the plugin from the WordPress directory to test the free version of the pluign. Finally, the visitor subscribes to one of our premium plans.

For each of the stages, you must define the different conversion goals you want to achieve. For example, a conversion goal might be a minimum number of visits to the product documentation.

Analyze and try to understand with the tools you already have (Google Analytics, heatmaps, scrollmaps, clickmaps) what’s happening and where you lose visitors.

Try responding to the following questions:

• Does the page meet the user’s expectations in terms of content and design?
• How can we improve it?
• Are the content and offers on the site as clear as possible?
• Can we make it clearer or simpler?
• What causes hesitation on this page or hinders the process?
• What is there on the page that does not help the user to act?
• Can we increase user motivation?

And from here, generate your change hypotheses. For example, on our Nelio A/B Testing landing page we saw that many visitors only see the first fold and don’t scroll down the page. After discussing various alternatives, we decided that we could rethink the text. Our hypothesis was the following: if in the first section of our website we change the message to arouse curiosity instead of urgency, the conversion should improve.

From your hypothesis of change, you already have a new A/B test idea that you can perform.

Create An A/B Test In The Block Editor

If you want to create an A/B test on a WordPress website manually, you could use Google Analytics for conversion analysis. However, our recommendation is that you use one of the tools available on the market. And in particular, we recommend the use of Nelio A/B Testing (free and premium version from €29/month), because it’s a native WordPress plugin and, as such, it’s 100% compatible with the block editor, which means you do not need to learn or use any other external tool for its operation.

With Nelio A/B Testing, creating alternatives for any A/B test is exactly the same as creating any page, post, menu, widget, etc. in WordPress, but also, it saves you the work of having to segment the traffic to your website and directly provides you with the metrics and results you are looking for.

Let’s see below the different steps you must follow to create an A/B test with Nelio A/B Testing with the WordPress block editor:

• Select the type of test to create
• Define the test variants
• Define conversion goals and actions
• Define which segments, if any, you want to analyze
• Run the test and analyze your progress
• Apply the winning variant and make it permanent

Select The Type of Test To Create

It is not the same to create an A/B test of a page than of a navigation menu. The creation of the variants will be different but the great advantage of using a tool like Nelio A/B Testing is that it’ll guide you through the process within WordPress itself, making it totally intuitive and straightforward.

The first thing you should do is select the type of A/B test you want to create and it offers you a wide variety of elements to select from:

Once you have selected the type of test, you will see that creating test variants is exactly the same as when you create any WordPress element.

Define The Test Variants

For the type of test you have selected, you must choose the element you want to test and define its variants. Let’s see an example…

Page A/B Testing

Recently, in order to increase the sales of our Nelio Content product, we decided to A/B test its pricing page. In particular, we wanted to analyze which color combination of the different plans could generate the most revenue for us.

We decided to create, in addition to the original version, two other variants with these color combinations:

In the first variant, we decided to show the plans with a selection of pastel colors that are very fashionable this year.

And in the second variant, as you can see in the image above, we only wanted to highlight the Standard plan.

How do we create this test with Nelio A/B Testing? After selecting that you want to perform a page test, the first thing is to name you test and select the page you want to test.

You can choose the tested page using a dropdown selector. If the page isn’t there, you can search it by typing its title, its URL, or its identifier. We call this page the control page or control version.

Next you can create one or more variants (which you can name). By default, each variant will be an exact copy of the control page that you had previously selected. Click on the Edit link of the variant and you will have the WordPress block editor that you already know to be able to make all the changes you want.

Add, modify, and delete the blocks and patterns you want on the variant pages as you wish. As you can see, you’ll be using the same editor you used for creating the control page, which means you have full control to tweak the variant as you please. Notice, however, that in the right sidebar of the variant edition you will see that the page you are editing is part of an A/B test:

Post A/B Testing

Creating an A/B test for a post is very similar to that of a page. After selecting that you want to create a post test, the dropdown to select the original post you want to test will show the list of published posts. You can also search for the entry by typing its title, URL, or identifier.

The rest of the process is exactly the same as the previous one.

A/B Testing of a Custom Post Type

If what you want is to create a type of A/B test of a custom post type different from pages and posts, such as courses that you have created on your website, FAQs, etc., you can also do it with Nelio A/B Testing. You just have to select that you want to perform this type of test, and now the selector will allow you to first select the type of custom post type you want and then the specific content you want to test.

Headline A/B Testing

If you want to create more attractive headlines, Nelio A/B Testing makes it super easy. You can test different versions of a post’s title, excerpt, and featured image and find out which combination gets more readers.

To perform a headline test with Nelio A/B Testing, you don’t need to go to the block editor. The plugin itself allows you to do it directly in the edition of a test:

Select the post whose headline you want to test and create one or more variants:

A/B Testing of Themes

If after the analysis of your website your hypothesis is that your website needs a more radical change, maybe changing the theme can be an alternative. Creating a theme test is very easy with Nelio A/B Testing. You just need to have installed in your WordPress the themes you want to test and select them in the A/B test of themes.

A/B Testing of Templates

Instead of changing the theme of a website, you can try creating different templates for some of the pages on your website. Design them in advance with the block editor and then perform an A/B test with them.

As always, it’s as easy as selecting the different template variants that you want to use as a template variant on all pages that use a particular template.

Menu A/B Testing

Creating an A/B test of menus is as simple as selecting one of the menus you currently have and creating the variants you want.

To modify the variants, you just have to click on the link to edit and modify the menu in the same way that you edit any traditional menu. Once created, you already have it available as a variant of this test.

Modify the menu structure by changing the elements as you want and, when you have it ready, return to the test.

A/B Testing of Widgets

If you need to create a widget test in WordPress, after selecting that you want to create a widget test, you just have to indicate the name of the new widget variant and click on the Edit link.

When editing a variant, Nelio uses WordPress’s own widget editor with some additional controls. Add, delete, and sort the variant widgets as you like and then go back to the test:

A/B Testing of CSS

If you want to test different versions of CSS style rules and measure which one works best to achieve your goals, you can select to create a CSS test. As in the case of widgets, you just have to enter the name of the new variant and click on the edit link. In this case, an editor will open for you to add the CSS styles you want while previewing their effect in real time:

Once you have the new rules defined, click on publish and you have the CSS variant of your test created.

WooCommerce Product Summary A/B Testing

Finally, WooCommerce product summary A/B tests are a WooCommerce-specific test in which different combinations of name, short description, and product image are tested, with the intention of discovering which of them gets the most purchases of said product. The way to create a test of this type is very similar to that of the headlines that we have seen previously.

If you have selected to create a test of this type, Nelio A/B Testing will show you in a drop-down the products that you have available and you only have to make the modifications of the variants that you want to create directly in the test editor. You do not need to go to edit the product.

Define Your Conversion Goals and Actions

After defining the variants to your test, the next step is to define the conversion goal of the test. That is, what’s the purpose of your test? For instance, your goal might be getting more sales, more subscribers, or more visits to the pricing page. Whatever your goals are, they’re met when the visitor performs certain actions. For example, you might want to consider that you got a new subscriber when a user submitted a subscription form on your website or clicked on a “subscribe” button on your pricing page.

How Do We Define Conversion Goals and Actions in Nelio A/B Testing?

In the Conversion Goals and Actions section, you can add as many goals as you want by clicking the + New link and you can optionally add a name to them. Nelio A/B Testing will show you information on how effective each variant is for each of the objectives you have defined.

For each of the goals you have defined, you have different types of conversion actions to track your visitors. For example, you can monitor when they access a certain page, when they click on a certain element of your website, or when they submit a contact form. Click on the action button you are interested in and, for each type of action, define its own configuration parameters.

In the example of the test on the Nelio Content pricing page, we defined 4 goals to be measured within the test:

• Clicks on the buttons of any plan.
• Clicks on the buttons of the Basic plan.
• Clicks on the buttons of the Standard plan.
• Clicks on the Plus plan buttons.

Segment Your Traffic

One of the interesting features of some A/B testing tools is that you can segment your traffic. That is, you can set only certain visitors to participate in a test. For example, by country, time, language, browser, device, etc. If you want more details on how to implement traffic segmentation with Nelio A/B Testing, in this article Antonio explains it to you in detail.

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

Run the Created Test and Analyze Its Progress

And that’s it, now you just have to press the button to start a test and analyze its progress. Nelio A/B Testing will be in charge of splitting your traffic so that each visitor only sees one of the variants you created and tracking their behavior. When using Nelio A/B Testing, you don’t have to worry about how long you need to run a test or control the statistical confidence of the data, as the plugin will take care of this. Just look at the data that matters the most to you: total number of conversions and visits to each tested variant. You will also be able to see the percentage of improvement of each variant with respect to the original version.

For example, after one month and nine days of running the Nelio Content pricing page test, we already achieved statistically significant results with almost 100% confidence. And, from the first goal, which consisted of measuring the clicks that were made on any of the buttons of the pricing table plans, we had the following results:

In this case, as you can see in the image of the results, they show that the second variant, alternative C, is the one that achieves almost 130% more clicks than the original version. In contrast, the variant showing the plans in pastel colors is 25.5% worse. If we had only had this goal of the test, alternative C we see that it has achieved overwhelming results.

In a similar way, we analyzed each of the goals that we had set ourselves and, looking at the results we obtained from the A/B test, we came to the conclusion that version C, which clearly highlighted the Standard plan with an accent color, worked much better than variants A and B.

Apply The Winning Alternative

Finally, as is the case in the example above, if you get a winning variant of a test, Nelio A/B Testing allows you to apply that variant as the final version on your website. This is another great advantage of Nelio A/B Testing being a native WordPress plugin, applying the winning alternative only involves clicking an Apply.

And voilà, now you have a new design of your website with proven data, better than the previous one.

What Are You waiting For To Create Your A/B Tests With The WordPress Block Editor?

With this complete guide on how to create A/B tests in the block editor, you now know that Nelio A/B Testing makes it super easy to A/B test anything in WordPress. Moreover, thanks to using a tool like this, you don’t have to worry about splitting your website traffic, or analyzing the behavior of your visitors. Nelio A/B Testing does it all for you in a very comfortable way. Our experience and that of our customers shows us that A/B testing helps you understand much better what your visitors expect to find on your website and how to increase your business revenue without the need for additional advertising.

If you have found this guide useful, please share it on your social networks. And if you have any questions, comments, or need additional information, do not hesitate to leave your comment at the end of this post.

Featured image by Maarten Deckers in Unsplash.