# Examples

> Concrete ClickClacks tracking examples: the question in plain words, what autocapture already answers, the custom event that answers it exactly, and where to read the answer in the app. For marketing sites, forms and leads, and SaaS apps.

- Canonical URL: https://clickclacks.io/docs/examples
- Section: Examples
- Last updated: 2026-09-26

Concrete questions, such as “how many people click Book a demo?” or “which FAQ gets opened most?”, each answered the fastest way and the exact way, with code you can copy and the clicks to read the answer.

## How each example works {#shape}

1. **The question**, in plain words.
2. **Fastest:** what autocapture already records, with no code, and where that stops being enough.
3. **Precise:** a custom event with a property, as copyable HTML or JavaScript.
4. **Read the answer:** which report, which event, which filter, what to break down by and which chart.
5. **What you should see**, so you know it worked.

They use Acme CRM, the running example from the [walkthroughs](https://clickclacks.io/docs/walkthroughs.md): a marketing site on `acme.com` and a product on `app.acme.com`.

## The examples {#examples}

- [Marketing site](https://clickclacks.io/docs/examples/marketing-site.md)
  
  Buttons, FAQs, pricing, links, video, scrolling and broken pages.
  
  - [Who clicks “Book a demo”, on which page, and do they book?](https://clickclacks.io/docs/examples/marketing-site.md#book-demo)
  - [Which FAQs do people open, and do they book afterwards?](https://clickclacks.io/docs/examples/marketing-site.md#faq)
  - [Who switches to annual, and which plan do they pick?](https://clickclacks.io/docs/examples/marketing-site.md#pricing)
  - [Where do outbound, phone and email links go?](https://clickclacks.io/docs/examples/marketing-site.md#links)
  - [Who plays the video, and who watches to the end?](https://clickclacks.io/docs/examples/marketing-site.md#video)
  - [How far do people scroll, and do they reach the plans?](https://clickclacks.io/docs/examples/marketing-site.md#scroll)
  - [Which CTA gets more clicks, the hero or the footer?](https://clickclacks.io/docs/examples/marketing-site.md#cta)
  - [Is a button broken?](https://clickclacks.io/docs/examples/marketing-site.md#rage)
  - [Which 404 pages do people hit, and from where?](https://clickclacks.io/docs/examples/marketing-site.md#not-found)
- [Forms and leads](https://clickclacks.io/docs/examples/forms.md)
  
  Form drop-off and newsletter sign-ups, without sending what people type.
  
  - [How many people start the demo form, and how many send it?](https://clickclacks.io/docs/examples/forms.md#lead-form)
  - [How many join the newsletter, from which box and campaign?](https://clickclacks.io/docs/examples/forms.md#newsletter)
- [SaaS app](https://clickclacks.io/docs/examples/saas-app.md)
  
  Feature use, first-time use, repeat use and the buttons on a screen.
  
  - [Is anyone using the new export, and on which plans?](https://clickclacks.io/docs/examples/saas-app.md#feature-used)
  - [Who used it for the first time this week?](https://clickclacks.io/docs/examples/saas-app.md#first-time)
  - [Do people keep using it?](https://clickclacks.io/docs/examples/saas-app.md#kept-using)
  - [Which buttons on a screen get clicked?](https://clickclacks.io/docs/examples/saas-app.md#buttons)

## What autocapture sees, and what it doesn’t {#autocapture}

Most of these answers start from the three events the tracker sends on its own. Knowing exactly what they carry tells you when you need a custom event.

- **`$pageview`**: the page (**Page**, read without its query string in reports), and on the first one the referrer. Campaign tags become **UTM source** and the rest.
- **`$click`**: the nearest link or button to what was clicked, or the element itself if there isn’t one. It records its tag (**Clicked element**), its `id` (**Clicked element ID**), its first two classes, a short selector (**Clicked selector**) and, for links and buttons only, up to 40 characters of their text (**Clicked text**).
- **`$scroll`**: once per page view, how far down the visitor got, which the heatmap’s **Scroll depth** turns into percentages.

Autocapture _doesn’t_ record:

- Where a link points. No `href`, so no outbound domain and no `tel:` or `mailto:`.
- Your `data-…` attributes, `aria-label`s or the text of anything that isn’t a link or a button, such as a `<summary>`.
- What happens inside an iframe, such as an embedded video or scheduling widget.
- Outcomes: a form that was accepted, a video that ended, a 404, an export that worked.

There’s no HTML attribute that sends an event by itself. Every custom event is one call:

```js
window.clickclacks?.('event', 'FAQ opened', { question: 'Can I import from HubSpot?' })
```

The name is 1 to 128 characters and can’t start with `$`, and the properties are capped at 2 KB of JSON. Events sent from the browser carry the page automatically as `path` (the pathname, never the query string or `#fragment`), which reports read as **Page**. Pass your own `path` to override it. Events sent from your servers carry no page: add `path` yourself if you want one. [Autocapture](https://clickclacks.io/docs/autocapture.md) and [Custom events](https://clickclacks.io/docs/events.md) have every detail.

## One-time setup {#setup}

Put the queue stub and the script tag in the `<head>` of every page. The stub keeps calls made before `c.js` loads, and the tracker sends them when it starts. Your real tag, with your key and domains, is on the source’s page in the app.

```html title="index.html"
<script>
  window.clickclacks = window.clickclacks || function () {
    (window.clickclacks.q = window.clickclacks.q || []).push(arguments)
  }
</script>
<script async src="https://app.clickclacks.io/c.js" data-key="pk_live_3f9a1c7e5b2d4f6a8c0e1b3d" data-domains="acme.com,www.acme.com,app.acme.com"></script>
```

After you ship a snippet, click the thing yourself and watch [Realtime](https://clickclacks.io/docs/guides/realtime.md). The event should appear within seconds. Then describe it in [Lexicon](https://clickclacks.io/docs/guides/lexicon.md) so everyone can find it in the pickers.

## Recipes and walkthroughs {#more}

- [Recipes](https://clickclacks.io/docs/guides/recipes.md) start from the reports: activation, attribution, checkout drop-off, a sudden drop. Use them when the events are already there.
- [Walkthroughs](https://clickclacks.io/docs/walkthroughs.md) follow one goal from nothing to an answer, step by step, such as an activation funnel or a tracking plan.