# Click & pageview goals

URL: https://docs.ablyft.com/developers/tracking-and-events/click-and-pageview-goals/

> Measure page visits and clicks without writing any code.



**Pageview** and **Click** goals work without any code on your website. The [snippet](https://docs.ablyft.com/developers/installation/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](https://docs.ablyft.com/guides/audiences-and-delivery/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

1. Go to **Targeting & Goals → Goals** and create a goal.
2. Choose the type **Pageview** ("Count a pageview as a conversion").
3. Select the **Page**, for example one that matches `/thank-you`.
4. Choose the counting method and winning direction, then save.
5. [Assign the goal to your experiment](https://docs.ablyft.com/guides/goals-and-measurement/configure-goals/#assign-goals-to-an-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](https://docs.ablyft.com/developers/application-integration/spa-navigation/),
  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

1. Go to **Targeting & Goals → Goals** and create a goal.
2. Choose the type **Click** ("Count a click/interaction as a conversion by a CSS selector").
3. Select the **Page** on which the clicks should be counted.
4. 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.
5. Save and [assign the goal to your experiment](https://docs.ablyft.com/guides/goals-and-measurement/configure-goals/#assign-goals-to-an-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.

```html
<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

1. 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.
2. Turn on [debug mode](https://docs.ablyft.com/developers/debugging/preview-and-live-log/#debug-mode). The console shows
   `Triggered GOAL "<name>" (click)` for each goal.
3. Check the **Live Log** of your project for incoming events.

See also [Verify measurement](https://docs.ablyft.com/guides/goals-and-measurement/verify-measurement/) and [Debugging](https://docs.ablyft.com/developers/debugging/).

## Next steps

- [Custom goals](https://docs.ablyft.com/developers/tracking-and-events/custom-goals/): For conversions that are not a click or a pageview.
- [Configure goals](https://docs.ablyft.com/guides/goals-and-measurement/configure-goals/): Create goals and assign them to experiments.
- [Goal types](https://docs.ablyft.com/guides/goals-and-measurement/goal-types/): Compare all four types.