How to Track Clicks with Nelio A/B Testing

Tracking clicks is one of the most effective ways to measure whether visitors interact with important elements on your site—buttons, links, images, menus, CTAs, and more.

Nelio A/B Testing lets you count these clicks as conversions by selecting the exact elements you want to track.

1. Add a “Click” Conversion Action

Inside your test:

1. On the Conversion Goals and Actions
2. Select a goal or create a new one
3. Click Add Action
4. Choose Click

A configuration panel appears where you’ll define which element(s) should count as a conversion.

2. Choose the Matching Mode

Nelio needs a way to identify the element on the page. The Matching Mode dropdown lets you choose:

• CSS Selector (default — most flexible)
• CSS Class
• Element ID

This determines how the element will be matched.

⚠️ Note: If you want to type an ID or class directly, you must first change the Matching Mode.

3. Select the Element Visually with “Explore”

The easiest way to set up click tracking is to click Explore.

This opens an interactive preview of your page where you can:

• hover over elements to highlight them
• click an element to automatically capture a matching selector
• switch between control and variant previews
• instantly insert the selector into your conversion action

No CSS knowledge required.

4. Enter Your Own ID, Class, or Selector (Optional)

You can also type the target manually.

Element ID

Matching Mode: Element ID

HTML: <button id="buy-button">Buy!</button>

Value to enter: buy-button

CSS Class

Matching Mode: CSS Class

HTML: <a class="cta-button">Buy Now</a>

Value: cta-button

CSS Selector

Matching Mode: CSS Selector

Examples:

#buy-button
.cta-button
.post-content a
header .menu-item > a
Code language: CSS (css)

Click Explore afterward to confirm the selector matches the right element(s). They will be highlighted in blue.

5. Ensure the Selector Works in All Variants

Variants may change layout or structure, so a selector that works in the control version may not exist in a variant. If a selector matches nothing, conversions won’t be counted.

Option A — Use a more generic selector

Instead of #primary-button, use .hero button.

Option B — Use a shared CSS class in all variants (Optional technique, not a required step)

Add a consistent CSS class (e.g., conversion-action) to the relevant element in the control version and each variant. Then track .conversion-action. This guarantees consistency matching across all versions.

Where to add a class

In the WordPress block editor, select the element → open Advanced → add a class under Additional CSS Class(es).

Page builders like Elementor, Divi, or Beaver Builder provide similar controls.:

Best Practices for Reliable Click Tracking

• Use CSS classes for maximum stability across variants
• Keep selectors as simple as possible
• Use Explore to verify the match visually
• Avoid auto-generated or deeply nested selectors
• Always preview the selector in all variants

Summary

Click tracking in Nelio A/B Testing is flexible and powerful. You can track any clickable element—buttons, links, images, product components, navigation items—and the Explore tool makes setup quick and code-free.