Click Metrics

A click metric converts when a visitor clicks on a specific element on your page. You identify the element using a CSS selector — the same syntax used in stylesheets — and optionally restrict tracking to clicks that happen on a specific URL. It is the fastest way to measure whether a button, link, or interactive element is getting more engagement in one variation vs another.

What click metrics track

Click metrics listen for clicks on any element that matches a CSS selector you provide. The selector works across your entire page, so you can target a single specific button, a group of similar elements, or any element with a particular attribute.

The metric records at most one conversion per visitor. If the same visitor clicks the matched element ten times in the same session, that still counts as one conversion.

How to create a click metric

Go to the Metrics page

From your project dashboard, click Metrics in the left navigation. This page shows all metrics defined for your project.

Click New Metric

Click the New metric button in the top-right corner. A drawer or modal will open with the metric creation form.

Choose Click as the type

Select Click from the metric type options. The form will update to show the fields relevant to click tracking.

Give it a name

Enter a descriptive name that makes it clear what is being tracked. Good names include the element and its purpose: CTA Button Click, Add to Cart Click, Sign Up Button.

Enter a CSS selector

Enter the CSS selector that identifies the element you want to track. The selector must match at least one element on your page for the metric to fire. See the examples below for guidance.

Add an optional URL filter

If you only want to count clicks that happen on a specific page, enter a URL filter. For example, if you enter /pricing, the metric will only fire when the click happens on a URL that contains /pricing. Leave this blank to track clicks on any page.

Save the metric

Click Save. The metric now appears in your metrics list and can be attached to experiments as a primary or secondary metric.

CSS selector examples

CSS selectors let you target elements precisely. Here are the most common patterns you will need.

By class name

Use a dot (.) followed by the class name. This matches any element that has that class.

1.cta-button

This matches <button class="cta-button">, <a class="cta-button">, or any other element with that class.

By ID

Use a hash (#) followed by the element's ID. IDs are unique per page, so this is the most precise selector you can use.

1#signup-form button[type="submit"]

This matches a submit button that is a descendant of the element with the ID signup-form.

By data attribute

Use attribute selectors to target elements by their data attributes. This is the most robust approach because it does not depend on class names, which can change for styling reasons.

1[data-track="add-to-cart"]

This matches any element with the attribute data-track="add-to-cart". You can add this attribute to your HTML specifically for tracking purposes without affecting your styles.

Combined selectors

1/* All primary buttons inside the hero section */
2.hero .btn-primary
3
4/* Any link that goes to the pricing page */
5a[href="/pricing"]
6
7/* The first navigation link */
8nav ul li:first-child a

Before saving your metric, test your selector in the browser console. Open Developer Tools on the target page and run: document.querySelectorAll('your-selector-here'). If it returns the elements you expect, your selector is correct.

How the snippet detects clicks

The A vs B snippet attaches a single click listener to the document using the capture phase. This means it intercepts clicks at the top of the DOM before they reach the target element.

When a click event fires, the snippet checks every active click metric for the current experiment. For each one, it calls element.matches(selector) on the clicked element and walks up the DOM tree using element.closest(selector) to account for clicks on child elements — for example, clicking an icon inside a button. If a match is found and the visitor has not already converted on that metric, the conversion is recorded.

Using the capture phase and closest() traversal makes click tracking reliable even when your markup nests elements inside the tracked target.

One conversion per visitor

Click metrics fire at most once per visitor per metric. After the first click is recorded, subsequent clicks on the same element do not generate additional conversions. This keeps your conversion rates clean and prevents a single enthusiastic visitor from distorting your results.

Click metrics work on dynamically rendered elements too. Because the snippet uses event delegation on the document level, elements that are added to the page after the snippet loads are still tracked correctly.