Click & pageview goals
Measure page visits and clicks without writing any code.
Pageview and Click goals work without any code on your website. The snippet detects the visit or the click itself. You only configure the goal in ABlyft.
Both goal types are tied to a page. The goal is counted only while that page is active for the visitor. A page defines on which URLs (and under which conditions) it is active, see Pages.
The page of a goal is independent from the pages of your experiment. A goal can measure a different URL than the page where the variation runs, for example a thank-you page after a checkout.
Pageview goals
A pageview goal counts when a visitor reaches a page. Typical use: a thank-you or confirmation page.
Set up
- Go to Targeting & Goals → Goals and create a goal.
- Choose the type Pageview ("Count a pageview as a conversion").
- Select the Page, for example one that matches
/thank-you. - Choose the counting method and winning direction, then save.
- Assign the goal to your experiment.
How pageview goals behave
- The goal fires each time the linked page becomes active, about half a second after the DOM is ready.
- On normal websites this is once per page load. On single-page apps,
it fires whenever the page is activated through its trigger or
ablyft.reInit(). - With the counting method One (unique), a visitor is counted once. With Every (total), each activation is counted.
Click goals
A click goal counts when a visitor clicks an element that matches a CSS selector.
Set up
- Go to Targeting & Goals → Goals and create a goal.
- Choose the type Click ("Count a click/interaction as a conversion by a CSS selector").
- Select the Page on which the clicks should be counted.
- Enter the CSS selector, for example
.add-to-cart. You can enter several selectors, separated by commas, for example.add-to-cart, #buy-now. The field warns you if the selector is not valid. - Save and assign the goal to your experiment.
How click goals behave
- ABlyft listens for clicks on the whole page. A click counts if the clicked element or any of its parents matches the selector. A click on an icon inside a matching button therefore counts.
- Only goals whose page is active are listened for.
- Elements that appear later (modals, dynamic content) work too, because the selector is checked at the time of the click.
Click goals on links to other pages
When a click leads to a new page, the browser may stop running scripts before the event is sent. ABlyft keeps the event in a queue and sends it on the next page. This only works if that page also has the ABlyft snippet of the same project, is on the same domain (not only the same subdomain), and has no JavaScript errors.
Choose a stable selector
| Tip | Why |
|---|---|
Prefer a dedicated class or data- attribute, for example [data-track="add-to-cart"] | Layout classes change when the design changes |
Test the selector in the browser console with document.querySelectorAll('your-selector') | Confirms it matches the elements you expect |
| Avoid selectors that also match elements in headers, footers or other variations | Otherwise unrelated clicks are counted |
Selectors that your variation changes
If a variation replaces or re-creates the clicked element, make sure the selector still matches in every variation, and matches in the original too. Otherwise you compare unequal numbers of tracked clicks.
Apply click goals programmatically
Sometimes the CSS selector is not enough, for example when elements have no common class. In that case, add the
attribute data-ablyft-clickgoals to the element. Its value is the ID of the click goal.
<a href="/step_2" data-ablyft-clickgoals="12345678">Click here</a>- One element can trigger several goals. Separate the IDs with commas:
data-ablyft-clickgoals="12345678,87654321". - The ID of a goal is shown in the goal list under Targeting & Goals → Goals.
- The goal must be assigned to an experiment, and its page must be active.
- ABlyft reads the attribute from the element that was clicked itself. If the clickable element contains child elements (for example an icon), put the attribute on the innermost element, or make sure the clicks land on the element with the attribute.
Test your goals
- Open the experiment in Preview mode and use the quality assurance tool. Goals triggered in preview mode are shown for checking, but are not counted in the results.
- Turn on debug mode. The console shows
Triggered GOAL "<name>" (click)for each goal. - Check the Live Log of your project for incoming events.
See also Verify measurement and Debugging.