Examples

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.

Updated

How each example works

  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: a marketing site on acme.com and a product on app.acme.com.

The examples

What autocapture sees, and what it doesn’t

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-labels 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 and Custom events have every detail.

One-time 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.

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. The event should appear within seconds. Then describe it in Lexicon so everyone can find it in the pickers.

Recipes and walkthroughs

  • Recipes start from the reports: activation, attribution, checkout drop-off, a sudden drop. Use them when the events are already there.
  • Walkthroughs follow one goal from nothing to an answer, step by step, such as an activation funnel or a tracking plan.

Start hearing your clicks.

One script tag. Your first report in minutes.

Start tracking free Sign in

4.3 KB · pageviews, clicks and scroll depth, automatically