Nelio A/B Testing allows tracking your visitors’ clicks on an item on your website and count them as a conversion in a test.
Since you are only interested in certain clicks (i.e. when the visitor clicks on specific items), you need to tell Nelio A/B Testing the exact items that, when clicked, should trigger a conversion. To do this, you can use CSS selectors or the element ID. You define this in the conversion goals and actions section when editing a test:
For example, assuming you’re interested in the visitor clicking a button like this:
<button id="my-button">Buy!</button>You can simply use the ID (my-button) or the equivalent CSS selector (#my-button).
Now, the relevant thing about CSS selectors is that you can match more than one element with a single rule. For example, if I want to match any link in the content of my post:
<div class="post-content">
<p>...<a href="">...</a>...</p>
<p>...</p>
<p><a href="">...</a>...</p>
...
</div>I can use the following CSS selector:.post-content a
that matches any link (HTML <a> tag) that is inside an element whose CSS class (that’s why we use the dot symbol in .post-content) is post-content.
Here’s more information on CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
To know both the CSS selector or the element ID you need to see the HTML of your website. In most browsers you have the option to right-click on the element of your website that interests you and inspect that element. This will open the web developer console and display the HTML of your website, with the focus on the selected element.
Keep in mind that not all the elements of your website have an ID. If this is the case for the element that you want to track, you should search for its CSS selector instead.
Set The Elements You Want To Track With Nelio A/B Testing
Nelio A/B Testing includes a user interface that helps you see which elements correspond to a specific CSS selector and to select a CSS selector in a friendly way.
Please note that a CSS selector that “works” in the control version may not match any elements in your test variants. If this is the case, your variants would never have conversions because our plugin would assume that none of the elements that the visitors clicked on are relevant to your test.
To solve this problem you have two options. Either you use a less specific CSS selector that allows you to “find” the element in both variants, or you add more CSS selectors (one that matches elements in the control version and another that matches elements in version B of the test).
If we return to the section where we defined the conversion actions in Nelio A/B Testing, when selecting a click action we have the possibility to press the Explore button:
This will open a popup window within the same test edit page where you can preview the page under test. In the top bar of this window you have different options. In the drop-down on the left you can select which variant you want to preview. This is especially useful when the elements of the different variants are different.
Then you have a magnifying glass icon that when clicking on it allows you to select which element of the page is what you want to track.
Once you click on the magnifying glass, when you move the cursor over the page you will see that the different elements are highlighted. This way you can select the one you want clicks on it to be tracked in the test. In our case, in the following example you see that we have selected the See our products button:
When you click on the element, its CSS selector will appear in the search bar of this popup window. You have already selected the selector you want. Now if you click on the OK button this selector will be added in the click conversion action:
In this way, selecting the elements whose clicks you want to track and count them as conversions is much easier. And you don’t need to be an expert in HTML or CSS rules.
Similarly, you can write a CSS selector in the click conversion action and then hit the Explore button. This will open the same popup window above with the page under test. The elements that match the CSS selector you typed will be marked in blue. Thus, you can check that the selector you have written is the one that selects all the elements that you want Nelio A/B Testing to track.
Adding a CSS Class to All The Elements We Want to Analyze
Another option is to edit the control version and the variants of the test and add a specific CSS class to those elements where you want clicks to be tracked as conversions.
In this way, if you set the same CSS classname to all the elements you want to track, setting the click action in the test editor with a CSS selector is as simple as putting the name of the class you used preceded by a dot.
In the previous example we selected a button in the block editor. Then you see the Advanced section in the right sidebar. There you can add an additional CSS class. In this case we have used conversion-action.
Then, you just have to use that same name, preceded by a period (.conversion-action), as mentioned before:
You can do the same if you use different page builders like Divi, Beaver Builder, and others. Every builder may have the option of adding an additional CSS class to the elements that appear in a page.