Goals

Goals are a module. Settings → Modules, and it is on for a new site. It adds 185 bytes to the browser script.

A page is the goal

The quickest goal needs nothing on your site at all. On the dashboard, open Goals → + Track a goal → When a page is visited, give it a name and a page:

Saw pricing = /pricing
Read the docs = /docs/*

Any visit that sees the page reaches the goal, once per visit however many matching pages it reads. A path ending in * covers everything under it. It is counted from the pageviews trckable already has, so a goal added today shows last month too. Page goals appear among the others, filter the dashboard the same way, and one page view can reach several of them.

Form submissions

Turn on Form submissions in Settings → Modules (114 bytes) and every form people send becomes a goal, with no code:

• The goal is form_submit, with a form property: the form's id, or where it posts, or the page it is on. Name a form yourself with data-trckable-form="newsletter".
• It counts only forms the browser accepted: the submit event fires after the browser's own validation, so a form refused on the spot is not a goal. A form your server rejects afterwards still counts; for that, send the goal from your code when the signup really succeeded.
• Search forms (role="search") and forms marked data-trckable-ignore are left out.

Without code

Put an attribute on the element:

<button data-trckable-goal="signup">Start free trial</button>

Properties come from extra attributes:

<button data-trckable-goal="signup" data-trckable-goal-plan="pro" data-trckable-goal-seats="3">
  Start free trial
</button>

That records the goal signup with plan=pro and seats=3.

Scroll goals

Count a section as read when it has actually been on screen:

<section data-trckable-scroll="saw_pricing">…</section>
<section data-trckable-scroll="read_faq" data-trckable-threshold="0.75">…</section>

The threshold is how much of the element has to be visible, and it defaults to half. Each element counts once per pageview.

From your code

import { track } from 'trckable'

track('signup', { plan: 'pro' })

Or with the script tag:

trckable('goal', 'signup', { plan: 'pro' })

Outbound links and downloads

A separate module, 156 bytes. With it on, every click that leaves your site is counted, and so is every link to a file — pdf, zip, dmg, exe, csv, xls, xlsx, doc, docx, mp3, mp4. You mark nothing.

Naming them

A goal name is a short, stable string. signup, trial_started, newsletter, checkout_started. Keep the name the same across your site — a goal is a thing that happened, not a sentence describing where it happened.

Properties, and what not to put in them

Properties are yours to choose and trckable stores exactly what you send. That means:

:::note Never put a name, an email address, a user id, an IP address or anything else personal in a goal property. trckable will not scrub it for you, and the privacy paragraph the dashboard writes says so in plain words. :::

Use plan=pro, not user=ada@example.com.

What you get

• The goal in the Goals card, with its count and its conversion rate.
• A breakdown by property, in Full.
• Every goal is a dimension: click it to filter the whole dashboard to the visits that completed it, then look at where those people came from.
• Funnels: an ordered set of goals or pages, with the drop-off at each step.

Funnels

Funnels are their own module and read data you already have — turning it on costs nothing in the browser and changes no recording. A funnel needs the goals it names, and trckable says so rather than quietly drawing a row of zeroes.

Trials and purchases

Purchases are never sent from the browser at all — a client-side "payment" call could be forged, so money only ever comes from a signed webhook. See Revenue.