# Quickstart > Go from a new ClickClacks project to your first event and your first insight in about five minutes: create a project, add a website source, paste one script tag, watch the first event land, and chart it. - Canonical URL: https://clickclacks.io/docs/quickstart - Section: Get started - Last updated: 2026-09-26 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. No account yet? [Request early access](https://clickclacks.io/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 {#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](https://clickclacks.io/docs/data.md#retention)). 4. Select **Continue**. ## 2. Add a website source {#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**. > **Sending from a backend instead?** > > Choose **Server**. You get a secret key and snippets for the Node SDK and plain HTTP. The [server-side overview](https://clickclacks.io/docs/server-side.md) explains how server events join the same people as browser events. ## 3. Paste the snippet {#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 `` of every page. It looks like this: ```html ``` 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](https://clickclacks.io/docs/install.md#frameworks). There’s also a **Copy agent prompt** link if you’d rather hand the job to your coding agent. ## 4. See your first event {#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](https://clickclacks.io/docs/autocapture.md) lists exactly what each one carries. > **Nothing after a minute?** > > An ad blocker in your own browser is the usual cause. Try a private window with extensions off, and check the page’s hostname is in `data-domains` exactly as it appears in the address bar. [Debugging](https://clickclacks.io/docs/debugging.md) covers the rest. ## 5. Build your first insight {#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: ```js title="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 {#next} - [Custom events](https://clickclacks.io/docs/events.md): names, properties and conventions that keep reports readable. - [Identify people](https://clickclacks.io/docs/identify.md): join anonymous visits to signed-in users, and reset on sign-out. - [Domains and identity](https://clickclacks.io/docs/domains.md): follow one person from your marketing site into your app. - [Server-side](https://clickclacks.io/docs/server-side.md): send subscriptions, invoices and jobs from your backend. - [MCP server](https://clickclacks.io/docs/mcp.md): ask your analytics from Claude, Codex or Cursor.