Docs
Install the tracker
ClickClacks is one script tag. Put it in your document head and pageviews, clicks and scroll depth start arriving without any other code.
When you create a source in the app, the install step gives you a script tag with the source’s browser key and allowed domains already filled in. Copy that one. The tag below uses example values so you can see its shape.
The script tag
<script async src="https://app.clickclacks.io/c.js" data-key="ck_live_8f3a2c" data-domains="acme.com,app.acme.com"></script> It loads c.js from app.clickclacks.io with async, so it never blocks your page from rendering. There is no npm package, Tag Manager template or backend SDK today: the script tag is the whole install.
What the attributes mean
| Attribute | What it does |
|---|---|
data-key | The source’s browser key. It tells ClickClacks which source, and so which project, an event belongs to. Without it the tracker does nothing. |
data-domains | A comma-separated list of hostnames the tracker may run on. The app fills it in from the domains you listed for the source and the other domains in the same project. |
data-query (optional) | Set to off to send page paths without any query string. Leave it out to keep query parameters, minus the sensitive ones described in Privacy. |
data-capture (optional) | Set to off to stop this page load from taking heatmap page captures. Events are still sent. |
The key is public; the domain list is the lock
The browser key sits in your page source for anyone to read, so it isn’t what protects your data. The allowed domains do that, in two places:
- In the browser, the tracker only starts when the page’s hostname exactly matches one of the entries in
data-domains. - On the server, ClickClacks checks each request’s origin against the domains saved for the source and rejects anything else. A copy of your snippet on another site can’t add events to your project, even with the attribute edited.
Matching is exact, so acme.com and www.acme.com are separate entries. See Domains and identity for how to list domains and follow one person across them.
Where it goes
Put the tag in the shared document head, so it loads on every page. Keep data-key and data-domains exactly as the app gave them to you. The tracker also records page changes in single-page apps, so one load per visit is enough.
Plain HTML
Add it inside the shared <head>, before </head>.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Acme</title>
<script async src="https://app.clickclacks.io/c.js" data-key="ck_live_8f3a2c" data-domains="acme.com,app.acme.com"></script>
</head>
<body>
…
</body>
</html>Nuxt
Add it with app.head.script in nuxt.config, as below, or with useHead in app.vue or your root layout.
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://app.clickclacks.io/c.js',
async: true,
'data-key': 'ck_live_8f3a2c',
'data-domains': 'acme.com,app.acme.com',
},
],
},
},
})Next.js
Add it to app/layout.tsx (or pages/_document.tsx in the Pages Router, or your project’s shared document head). Load it afterInteractive or as a normal async script.
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://app.clickclacks.io/c.js"
data-key="ck_live_8f3a2c"
data-domains="acme.com,app.acme.com"
strategy="afterInteractive"
/>
</body>
</html>
)
}Hand it to your coding agent
On the install step there’s a Copy agent prompt link next to the snippet. It copies a prompt for your coding agent with your exact script tag, your allowed domains, the placement rules above, and two guard rails: don’t add a package or backend SDK, and don’t invent events during installation. With the example values, it reads:
Install the ClickClacks browser tracker in this codebase.
Use this exact script tag (the browser key and allowed domains are specific to this source):
<script async src="https://app.clickclacks.io/c.js" data-key="ck_live_8f3a2c" data-domains="acme.com,app.acme.com"></script>
Allowed domains: acme.com,app.acme.com
Put it in the document head so it loads on every page:
- Plain HTML: add it inside the shared <head> element before </head>.
- Nuxt: add the script with useHead in app.vue or the root layout, or with the app.head.script setting in nuxt.config. Preserve the data-key and data-domains attributes exactly.
- Next.js: add it to app/layout.tsx (or app/head.tsx), pages/_document.tsx, or the project's equivalent shared document head. Load it afterInteractive or as a normal async script.
Do not add a package or backend SDK. This script captures browser pageviews, clicks and scroll depth automatically. Existing calls to window.clickclacks('event', name, properties) and window.clickclacks('identify', id, properties) may use the same tracker, but do not invent new events as part of installation.
Verify the installation by loading or opening a page on one of the allowed domains in a private window, then return to this onboarding screen and check that the first event is received.Check the first event
- Deploy the change, or open a build that runs on one of your allowed domains.
- Keep the app’s install step open. It shows Listening for your first event… and checks for you, so there’s no need to refresh.
- Load a page on your site in another tab.
- The install step switches to First event received, showing the event, the page path, the browser and the country it came from.
Next, send your own events and identify signed-in users: Events and identify.