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 modal opens 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 page URL. A Page URL match mode choice appears alongside it, preselected to Path for a new metric, so entering /pricing counts clicks on the /pricing page and nowhere else. The same six modes are available here as on a pageview metric, with examples in Pageview Metrics. Leave the page URL 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.
A click metric saved before match modes were offered keeps counting clicks on any address that contains its page URL, until you next edit that page filter and pick a mode.
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.
.cta-buttonThis 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.
#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.
[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
/* All primary buttons inside the hero section */.hero .btn-primary/* Any link that goes to the pricing page */a[href="/pricing"]/* The first navigation link */nav ul li:first-child aBefore 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 click metric configured for your project, not only ones attached to the experiment currently running on the page. For each one, it walks from the clicked element up through its parent elements, calling element.matches(selector) at each step, to account for clicks on child elements: for example, clicking an icon inside a button. If any ancestor matches, a conversion row is recorded for that visitor.
Walking up through parent elements this way makes click tracking reliable even when your markup nests elements inside the tracked target.
One conversion per visitor
A click metric's results count at most one conversion per visitor, no matter how many times that visitor clicks the matched element. A vs B counts unique visitors per metric when it builds your results, not raw clicks. 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.