Quickstart

From a new project to a chart of real traffic in about five minutes. You need a ClickClacks account and a site you can add one line to.

Updated

No account yet? Request early access. Already signed in? The app walks you through the same steps on its welcome screen, so you can follow along there.

1. Create a project

A project is one product. Its marketing site, web app and servers all report into it, which is what lets a funnel run from a landing page all the way to activation.

  1. Open the app. If this is your first project, the welcome screen opens on Create your first project.
  2. Give it a name. The time zone comes from Settings › General; every member sees reports in it.
  3. Pick how long to keep raw events: 3, 12 or 24 months. Your plan sets the most you can choose (see Retention).
  4. Select Continue.

2. Add a website source

A source is one place events come from. On What are you tracking?, choose Website (or Web app: it’s the same script, and you’ll call event and identify from your code).

  1. Enter the Domain your site runs on, such as acme.com.
  2. Under Anywhere else your product runs, add every other hostname visitors see, such as www.acme.com and app.acme.com. Events from a domain you haven’t listed are rejected, so a copied snippet can’t pollute your data.
  3. Name the source, for example “Marketing site”, and select Continue.

3. Paste the snippet

The next step, Add ClickClacks to acme.com, shows your script tag with the source’s browser key and allowed domains filled in. Copy it into the <head> of every page. It looks like this:

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

That’s the whole install: no package, no build step. The script loads with async, so it never blocks your page. For Next.js, Nuxt, React, Vue, SvelteKit, WordPress, Webflow, Shopify and Google Tag Manager, see where it goes in each framework. There’s also a Copy agent prompt link if you’d rather hand the job to your coding agent.

4. See your first event

  1. Deploy the change, or open a build that runs on one of your listed domains.
  2. Leave the app on the install step. It shows Listening for your first event… and updates the moment something lands, so there’s no need to refresh.
  3. Open your site in another tab.
  4. The step switches to First event received, with the event, the page path, the browser and the country. Then a screen titled with your project’s name, such as Acme is receiving events, confirms it.

From there, Inspect live events opens Realtime: who is on your site now and every event as it arrives, over the last 30 minutes. Pageviews, clicks and scroll depth are already arriving; Autocapture lists exactly what each one carries.

5. Build your first insight

An insight is a saved chart of events over time.

  1. Open Insights and select New insight.
  2. Pick an event, such as $pageview, and a measure: Total events, Unique people, Per-person average or Sessions.
  3. Optionally split it by a property, such as the country or the page path.
  4. Give it a name and select Save.
  5. To keep it in view, use Add to board. A board is a page of tiles you arrange yourself; a linked tile follows the saved insight when you edit it.

Pageviews tell you where people go. The next thing most teams add is one or two events for the moments that matter, and an identify call at sign-in:

app.js
// Anywhere in your app, after the script tag has loaded
window.clickclacks('event', 'Signed up', { plan: 'pro' })

// When someone signs in, with your own user ID
window.clickclacks('identify', 'user_4821')

Next steps

  • Custom events: names, properties and conventions that keep reports readable.
  • Identify people: join anonymous visits to signed-in users, and reset on sign-out.
  • Domains and identity: follow one person from your marketing site into your app.
  • Server-side: send subscriptions, invoices and jobs from your backend.
  • MCP server: ask your analytics from Claude, Codex or Cursor.