Create And Run Your First AB Test​ With WPHubSite

Build your website integrated with HubSpot on WPHubSite. It's the best all-in-one WordPress-based HubSpot website builder and it's free.

Finding the right combination of copy, contrast, size, position and more can be tough. With AB testing built right into WPHubSite you can test everything in Site Builder.

It’s more than just AB testing, though. You can also perform multivariate testing to test 3 or more variations of a row or module too. Creating an experiment is easy so you can figure out what performs best for your website.

You may find that there’s some interchange between the terms AB test and experiment in this help article and in WPHubSite in general. Rest assured they’re the same thing just referred to in different way.

WPHubSite doesn’t only do AB tests which is why it’s called an experiment. You’ll find that you can do an AB test OR a multivariant test. Multivariant testing contains three or more variations instead of just two.

Note: Experiments can only be set up on Site Builder pages or elements. With more advanced setups for your WPHubSite website, you can even run experiments in the header and footer of your website.

Ready to get started setting up your first AB test in WPHubSite?

Create A New Experiment

Now it’s time to create the new experiment so you can set things up in the Site Builder. Before even heading into Site Builder you have to create a new experiment in your WPHubSite WordPress admin dashboard.

Here’s how to do that.

Step 1: The first step before you can do anything is to log into your WPHubSite website.

Create a new experiment in the WPHubSite WordPress admin dashboard.

Step 2: Hover over the Experiments item in the sidebar.

Step 3: Click on the New Experiment link.

Configure settings for a new experiment.

Step 4: Add a title for your experiment that describes what the experiment is for and that you will remember when setting up the experiment in Site Builder. The name isn’t visible to anyone buy you but it helps for you to know what the test is for.

Step 5: Choose how you’d like to track what a conversion is for the experiment. The best and most dependable way to track is using the Site Builder Conversion Module. You can also choose a page from the list or choose URL and paste the URL in the box. Keep in mind that the conversion page must be on your website.

Step 6: You can choose how you’d like to target this experiment to your website visitors. Here’s how each option works:

  • Percentage: You can choose to only show this experiment to a certain percentage of your website visitors rather than everyone. The default is 100% of site visitors but if you type in 30 then only 30% of your site visitors will be tested for this experiment.
  • Query: Choose who the test is shown to depending on the referral source. You can use a utm_source that’s typically defined such as Google, Bing, or Facebook. It’s also possible to run your test against sources you specify such as a link in your newsletter that defines the utm_source as something like Newsletter.

The URL query targeting option is applied first and then the percentage target. So, if you use both then your test will only show to X% of those coming from the query source (ie. Google).

Important: If a website visitor is not included in a test their view and/or conversion will not be tracked. They will still see the object you are testing, though. The object that they see is determined by which one is higher on the page (unless a name such as default, original, or standard is used as the variation name).

Step 7: Select the turn on autocomplete option and then choose the autocomplete options to end the experiment automatically based on your settings. When the criteria you have selected is met and there is a clear winner (95% or greater confidence) then the losing module or row is hidden. Here are some of the options and the explanation of them.

  • Choose the number of days the experiment runs for. The more days the better results you’ll get. You should also be sure each variation will get a good number of views (ideally 100 or more each).
  • Choose how many views each variation needs before the experiment is complete. Again, the more the merrier but 100 should be the bare minimum.

Note: When the losing experiment is hidden, it will remain hidden until you make it visible again even if you are going to clear the results of an experiment to restart it. If you’d like to run a test again, be sure to also unhide the losing experiment variation.

Step 8: Click the Publish button to save this experiment so we can set it up in Site Builder.

That’s it for creating the experiment where data will be stored as the experiment runs. At a later stage we’ll come back to the experiment to see the results and perform other tasks. For now, it’s time to move onto the next step which is to finish setting up the experiment in Site Builder.

Set Up Your Experiment In Site Builder

Now it’s time to head over to the WPHubSite Site Builder page you’d like to set up your experiment on. If you’re still in the experiment screen then you can easily move right over to your page list.

This process starts in the WPHubSite WordPress admin dashboard.

How to open Site Builder page in WPHubSite.

Step 1: Hover over Pages or click on Pages.

Step 2: Click on All Pages.

Step 3: Hover over the page you’d like to set up the experiment on and click the Site Builder link.

Open button module settings in WPHubSite Site Builder.

Step 4: Click on the settings icon on the module or row you’d like to set up the experiment for.

Open the Advanced tab for experiment setup.

Step 5: Make sure the link in the module is set to the same page you set the conversion module up on (later step).

Step 6: Click on the Advanced tab.

Configure AB Test settings in a Site Builder button module.

Step 7: Start typing in the name of the experiment you created in the first part. After you type a few letters a list of matching experiment names will pop up. Click the correct experiment you’d like to attach your module or row to.

Step 8: Type in the name of this variation. You can type in anything you’d like to help you remember what variation this is. This does need to be unique from the other variation, though.

Step 9: Click the Save button.

Duplicate the button module experiment.

Note: Notice the module (or row) now shows a red border instead of blue. This is because it’s tied to an experiment now. This red box will show up on the front end also but only to visitors logged into your website.

Step 10: Hover over the module or row you just saved and click on the duplicate button on the Site Builder tools menu.

Open the duplicate button module settings in Site Builder.

Step 11: Hover over the new module or row (the second one) and click the settings button on the toolbar.

Make changes for the experiment variation and open advanced tab.

Step 12: Make any changes you’d like to test against. You can update anything such as the text, the colors, padding, etc. The only thing you shouldn’t change in the General tab is the link, this must remain the same.

Step 13: Click the Advanced tab.

Change the variation name and save the duplicate button module.

Step 14: Make sure the experiment name is still the same from the previous module or row. You shouldn’t have to change this since you made a duplicate but you should verify it’s correct.

Step 15: Change the variation name to something that defines this variation of the test. These names will be shown as results show up in the experiment.

Step 16: Click on the Save button.

Step 17: Publish your Site Builder page so you can then set up the conversion tracking module.

Set Up The Conversion Tracking Module

Placing the conversion tracking module on the page you have linked in your module or row will allow your experiment to properly track which variation is converting better.

Step 1: Open the Site Builder editor for the landing page you’d like to track conversions on.

Drag the Conversion module on the landing page Site Builder layout.

Step 2: Click the add drop-down menu to add the conversion module.

Step 3: Drag the Conversion module onto your layout (it’s in the Lead Generation section or you can search for it). It’s a good idea to place the conversion module at the top of the page.

Update the Experiment name in the Conversion module.

Step 4: Type in the name of your experiment and select it from the list once it pops up.

Step 5: Click the Save button.

Note: Dragging the Conversion module into a new row will adopt any defaults you have set for global Site Builder settings for a row, column, and module. If you have padding or margins set for those you will need to update them to 0. If you don’t remove these margins or padding then you may end up with odd spacing on your page.

Step 6: Publish the page that you placed the conversion module onto. The page will look like the following once it’s saved. Don’t worry, visitors to the page won’t see the box. It’s just there to give you something to click on, edit, and see that the module is indeed there.

The conversion module placed on a Site Builder page.

View The Results Of Your Experiment

Once your experiment has accumulated enough conversions and visits then a winner will be be shown with a confidence percentage. If there’s not enough data then that will be shown too.

The more data you can collect for an experiment the more success you will see in using the winning variation. With only only 10 visits and 1 conversion there will still be a winner shown in the experiment but the dependability of that results will be very low.

Now for checking on the experiment results.

Open an experiment to view the results.

Step 1: Hover over or click the Experiments menu item in your WPHubSite WordPress admin dashboard.

Step 2: Click on the All Experiments option.

Step 3: Hover over the experiment you’d like to view results for and click the View link.

Note: You can also see some of the results of the experiment on the Experiments screen without clicking into the details of an experiment. You won’t see the winner but you can see visits, conversions, and the conversion rate.

View the results of a conversion with a winner.

Step 4: Check on the results! If there’s a winner then it will be shown in green text. If there’s not enough data then that will be shown in red text. You can also see the details about how many times each variation was shown along with how many times it converted.

If your experiment doesn’t have enough data then you’ll see the following results.

Viewing experiment results for an experiment with not enough data.

You can see that there’s still a probability of winning percentage but they are so close a winner can’t be determined.

Clear The Results Of Your Experiment

If you’ve made changes in your experiment variations or any other setting then it’s a good idea to clear the data. This is easy to do inside the experiment. Here’s how.

View an experiment to clear the results of the experiment.

Step 1: Hover over or click on Experiments in the WPHubSite WordPress admin dashboard sidebar menu.

Step 2: Click the All Experiments menu item.

Step 3: Hover over the experiment you’d like to clear results for and click the View link.

Clear the results of an experiment.

Step 4: Click the Clear results button under the results.

Step 4: Verify you’d like to clear the results by clicking OK. You will get an alert that the experiment results have been cleared and that the page will reload. You can click Close and the results will be cleared.

Unhide A Hidden Losing Experiment Variation

After an experiment runs that you’ve set autocomplete on, the loser will automatically be hidden. It won’t show up in future experiments you set it on unless you actively show it again.

These instructions will help you unhide a hidden losing experiment variation module or row.

Step 1: Open the page with the module or row in it with the WPHubSite Site Builder.

Hidden module pointed out and then click on settings icon.

Item 2: Notice the eye in the corner when you hover over the module? This means the module is hidden from view for either all website visitors or some.

Step 3: Click the module settings icon.

Open the advanced tab and change the display to always.

Step 4: Click the Advanced tab.

Step 5: Choose Always from the Display drop-down menu.

Step 6: Click the Save button.

Step 7: Publish the page by clicking Done > Publish.

Now the module will be visible again and can be part of an experiment. If you want to delete the losing variation then instead of clicking the settings icon you would just click the Remove icon (the X).

Run An Experiment With HubSpot Forms

While you can’t directly set up an experiment with HubSpot forms inside HubSpot, you can get around that with this process to test two different forms.

Her’s how to do it.

Step 1: Create two different forms in HubSpot with the changes you’d like to test. Make sure you choose to redirect visitors to another page (the landing page on your website) on your website. This has to be the same page for both variations of the form.

Step 2: Create a new experiment that you will use in Site Builder for your HubSpot form test.

Step 3: Drag an HTML module into a Site Builder page layout with the first HubSpot form embed code in it. Make sure you also set up the experiment information in the HTML module similar to setting up an experiment in Site Builder above.

Step 4: Duplicate the HTML module with your HubSpot embed code in it then put the second form embed code in this one. Make sure you also update the experiment variation in the Advanced tab.

Step 5: Set up the conversion tracker on the page of your website you chose to redirector visitors to in your HubSpot form.

Now the two different HubSpot forms will be tested against each other in order to determine which form converts better.

Last Updated On November 16, 2020


Tag(s): , ,

Grow your business with the power of WordPress & HubSpot.

Get WPHubSite for the most powerful web platform integrated with the power of HubSpot for your inbound marketing strategy.