How to Split Test Custom Built HTML elements

Introduction

If you custom-build your pages with HTML, you can use AB Split Test to test different elements on your site, such as headers, images, or call-to-action sections. This guide explains how to create an on-page split test, apply split test classes, and observe the results.

Step-by-Step Guide

1. Create an “On Page” Split Test

To start testing custom elements, follow these steps:

1. Go to your WordPress dashboard and navigate to AB Split Test > Add New Test.
2. Select the On Page Elements test type.
3. Configure your test settings, such as the name of the test and your conversion goals (e.g., button clicks or completed orders).
4. Click Save to generate the CSS classes for your test.

2. Copy Your Split Test CSS Classes

When you create an “On Page” test, the plugin provides CSS classes that you’ll use to identify and tag your test variations. The format of the classes is:

ab-[testID] ab-var-{name}

For example, for a test with the ID 74063, the classes might look like:

• ab-74063 ab-var-default (default version)
• ab-74063 ab-var-funny (variation version)

3. Choose your goal and targeting

Just as you normally would, create your goals and subgoals. See here for a walkthrough.

4. Start the Test

Click Start Test. The plugin will now begin watching for your test classes, rotating them and tracking their performance based on your configured goals.

5. Add Your Variations to the HTML

On your custom-built page, create the elements you want to test. Add both variations directly to the HTML structure. For example, if you’re testing two versions of a section, your HTML might look like this:

After publishing the update to your page, the plugin will now automatically handle switching between the variations for each visitor and the goal monitoring.

Additional Tips

• Test Goals: Set meaningful conversion goals such as clicks, form submissions, or WooCommerce purchases to get actionable results.
• CSS Class Matching: If your page is custom-coded, ensure the CSS classes are added exactly as shown in the AB Split Test setup to avoid issues.

Why Use On Page Tests?

On Page tests are perfect for custom-coded websites because they allow you to directly test specific HTML elements without requiring a builder. Whether you want to test a headline, image, or call-to-action layout, this approach offers flexibility and precision for developers.