JavaScript A/B Test in WordPress

JavaScript A/B testing in WordPress allows you to create small snippets of JavaScript code that load dinamically on your website, thus providing a versatile and very powerful mechanism with which to change the appearance or behavior of the pages where they are included.

Nelio A/B Testing allows you to perform this type of testing in WordPress in a very simple way, offering the necessary tools to create alternative content, perform the test and track visitors and the achievement of objectives (such as increasing revenue or subscriptions). Install, activate and configure Nelio and get the most out of your website.

Instructions for JavaScript testing

Let’s see how to create this type of tests with a concrete example.

Create a new JavaScript A/B test

1. Under the Nelio A/B Testing menu, click Testing to view and manage your tests.
2. Click the New Test button at the top of the screen.
3. You will see a window with all the test types you can create. Each one of them has a name and an icon.
   • Click JavaScript.

Name and define your test

First of all, give a descriptive Name to the test you want to create to help you identify it in the future. Additionally, in the right sidebar, you will find three additional tabs:

• Status & Management, where you see the status your test is currently in (Draft, Ready, Scheduled, or Paused) and options on when it should start and end,
• Description of the test, where you can indicate what you are testing and what you intend to achieve with it,
• Test Scope, where you specify which pages of your website are affected by this test and which by default indicates that the variants will be visible on all pages of your website. If you want to limit its scope to certain pages, you have a form to define the URLs in which the test should be executed.

How to Create the Variants to Test

A JavaScript A/B test in WordPress consists of testing different versions in which you add JavaScript code to your website and measure which one works best to achieve your goals. For example, if your website is built with a page builder (like Elementor) that doesn’t use standard WordPress elements, you can modify any part of the website (like a menu, a widget, or whatever you want) with a few lines of code.

Create New Variants

Create a “Variant B” (or more than one variant, if you wish) of the original look and feel:

1. Name your variant in the field next to the letter that indicates the variant you are creating (for example, “Button Style Change” or “Font Change”).
2. Click the Edit link for each variant to create the new JavaScript code.
3. If you want to create more than one variant, click the New Variant button at the end of the section.

Editing a Variant

Suppose, for example, you want to modify one of the buttons in the menu. In general, you should use a menu test for this, but if this menu has been created with Elementor or is directly defined in your theme templates, it is probably not possible to use the standard test type. It is in these complicated cases where a JavaScript test allows you to bypass all these kinds of restrictions.

When you edit a variant, WordPress will open a small text box next to a preview of your website. There you can add the JavaScript code you want:

which will be encapsulated in a function like the following:

function( done: () => void, utils: Utils ): void {
  /* your code will end up here */
}
type Utils = {
  readonly domReady: ( fn: () => void ) => void;
}

so you don’t have to worry about “messing up” the global scope of your website or with name collisions.

Note that the function where your code will go gives access to a couple of variables: utils and done. The most important of the two is done: after you have applied your changes via JavaScript, don’t forget to call it so that our plugin displays the alternative content and starts tracking your users.

On the other hand, in utils you have a function called utils.domReady. If you want to modify elements of your page, you have to wait for them to be loaded before you can manipulate them (commonly called “waiting for the DOM to be ready”). As you see in the definition, it is a function that receives a callback as a parameter.

Finally, note that if you want to define something at the global level, you would have to do it explicitly. That is, if you want to define a global variable x or a global function f, you should do so using window.x or window.f.

Taking all this into account, imagine that we want to modify one of the items on our menu, which was created with Elementor. To do this we should do the following:

1. We look for the identifier of the menu item we want to modify by inspecting the item in your browser.

2. Once we have it identified (in our case, menu-item-7745), we can use the document.querySelector function to retrieve the node from the DOM and put it in a variable b. As we know that what we want to modify is actually the element a inside menu-item-7745, the selector we use is #menu-item-7745 a.
3. Then we apply the changes we want: we can add new text, change its font and background color, etc.
4. Finally, we call done() to tell Nelio A/B Testing that we have already made the changes and that it can show the variant to the visitor.

If, at any time, you click the Save and Preview button, you will be able to see how the code you have written is working and if it does what you want it to do.

When you’re done, save your changes and use the Back button to return to your test. Remember that the variants created are only shown as part of an A/B test and that is what Nelio A/B Testing takes care of.

How to Define Your Conversion Goals and Actions

A/B tests are usually performed with one or more goals in mind, such as “show interest in your products” or “increase visits to posts.” The goals are met when the visitor performs certain actions. For example, a visitor may be “increase visits to posts” when he visits any or your blog posts. Moreover, a visitor may “show interest in your products” when they visit your pricing page or when they complete a certain form requesting information.

Let’s see how to define conversion goals and actions in Nelio A/B Testing in order to track the activity of your visitors.

Define Your Conversion Goals

You can add as many goals as you want by clicking on the + New link. If you create more than one goal, Nelio A/B Testing will show you information on how effective each variant is for each of the defined goals.

Optionally, you can give your objective a name that helps you remember what you were interested in improving in your test. For example, your goals could be “Increase subscriptions” or “Get more clicks on the menu tabs.”

Add Conversion Actions to Your Goals

Different types of conversion actions are available to track your visitors. For example, you can control when they access a certain page, when they click on a certain element of your website or when they send a contact form.

1. Click on the Action Button that interests you. (for example, if you want them to click on a menu option, click on Click).
2. Each type of conversion action has its own settings. In the case of Click, for example, you must specify which HTML element (through its ID or CSS selector) the user has to click. Note that in this case you must select the HTML elements of the control version and each of the variants.
3. Repeat the process for all the actions you want to add.

Remember that you can delete any action by clicking on the Delete link below the action.

How to Start the Test

Once you have fully defined your test, you will see that the status of the test will have passed from Draft to Ready. At that point, you can Start it so that your website visitors can see the different variants that you have created and Nelio A/B Testing will start tracking their actions.

Start your test

To start a test, check that it is Ready and, if it is, click on the Start… button in the upper right corner. If it was not ready, you can hover the mouse over the information icon that appears next to the Status to see why your test is still a Draft.

If you do not want to start the test directly, but want to leave it scheduled for a specific date, specify it using the Start field in the Status & Management section.

Once the test has started, the plugin will show you its results page and you will see that the status changes to Running.

Important: tests cannot be edited once they are active, but you can pause, modify them and restart them so they continue to run. Of course, depending on the modifications you make, your partial results may be invalid after restarting the test. If that is the case, it is best to start a new test, duplicating the previous one.

When do you want to end your test

You can also define when you want the execution to end, indicating the End Mode of the test:

• Manual: the test will stop when you click the Stop button, in the list of tests or on its results page.
• Duration: the test will stop automatically after the indicated time.
• Page views: the test will stop automatically after reaching the total number of visits you have specified.
• Confidence: The test will stop automatically when a winner is found in the first goal with the specified confidence level.

How to See the Progress of a Test and Its Results

In the menu option Tests you can see the list of the tests created, the status they are in and the date of their last update. At any time you can see the results of a test that is started or that has already ended by clicking on the View Results link below its name.

Summary of the results

In the right sidebar of the results page you will find the Summary of your test with the following information:

• Status icon. This icon helps you quickly identify the progress of your tests. It is initially in yellow, indicating that there are not enough visits to determine a winner. If the icon changes showing a clock with a heart, there is a possible winner, but statistical confidence is low, so things can still change. Finally if a green icon is shown (with a medal), we have a clear winner. If the icon is red, no alternative is better than the original.
• Some metadata about your test. Specifically, you can see the status of the test, how long it has been running, when it started and how it ends.
• The description and scope of the test are also included, if applicable.

Test Progress

The results page shows, in turn, the following information on the progress of a test:

1. Test Name
2. Evolution with the conversion rate of the control version and all variants, as well as the total number of conversions and visits to the tested pages.
3. Two additional graphs showing the conversion rates of each alternative and its degree of improvement over the original, respectively.
4. For each of the variants of the test we will see a thumbnail image, if available, the number of visits it has received, its number of conversions, the resulting conversion rate and, for all variants other than the original, the degree of improvement that they have with respect to the control version.
5. Finally, a summary of the conversion goals and actions of the test is shown.

Improve Your Web Conversion

You can end a test manually at any time by clicking on the Stop button found in the top right corner of the results page. Remember that a test can also end automatically if the condition indicated in its end mode is met.

After completing a test and to improve the conversion of your website, make sure that you manually apply the JavaScript code of the winning variant on your website.