Copy as markdown[View .md](https://docs.funnelfizz.com/quickstart/install-tracking "View the raw markdown for this page")[Open in Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fdocs.funnelfizz.com%2Fquickstart%2Finstall-tracking.md%20and%20help%20me%20with%20this%20FunnelFizz%20topic%3A%20Install%20tracking "Open this page in Claude with context")[Open in ChatGPT](https://chat.openai.com/?q=Read%20https%3A%2F%2Fdocs.funnelfizz.com%2Fquickstart%2Finstall-tracking.md%20and%20help%20me%20with%20this%20FunnelFizz%20topic%3A%20Install%20tracking "Open this page in ChatGPT with context")

# Install tracking

The tracking snippet is a small JavaScript file that reports pageviews, custom events, form submissions, scroll depth, and time-on-page back to FunnelFizz. Everything downstream — your CONSIDERATION stage counts, split-by-UTM, email identity — depends on it being installed.

## 1. Grab the snippet[​](#1-grab-the-snippet "Direct link to 1. Grab the snippet")

When you hit step 2 of onboarding, the wizard shows you a code block that looks like this:

```
<!-- FunnelFizz tracking -->

<meta name="funnelfizz-verify" content="YOUR_TOKEN" />

<script>

(function(w,d,t){

  w._fn = w._fn || [];

  w.funnelfizz = function(){ w._fn.push(arguments) };

  var s = d.createElement('script');

  s.async = 1;

  s.src = 'https://funnelfizz.com/track.js?t=' + t;

  d.head.appendChild(s);

})(window, document, 'YOUR_TOKEN');

</script>
```

`YOUR_TOKEN` is unique to your site. Don't share it publicly — it identifies where events get attributed.

## 2. Paste it into `<head>`[​](#2-paste-it-into-head "Direct link to 2-paste-it-into-head")

Paste the two tags as high as possible inside your `<head>` — ideally before any other scripts so page-load events aren't missed.

### Framework-specific install[​](#framework-specific-install "Direct link to Framework-specific install")

Next.js (App Router)

In `app/layout.tsx`, add the snippet inside `<head>` using `next/script`:

```
import Script from 'next/script';



export default function RootLayout({ children }) {

  return (

    <html>

      <head>

        <meta name="funnelfizz-verify" content="YOUR_TOKEN" />

      </head>

      <body>

        <Script id="funnelfizz" strategy="afterInteractive">

          {`(function(w,d,t){w._fn=w._fn||[];w.funnelfizz=function(){w._fn.push(arguments)};var s=d.createElement('script');s.async=1;s.src='https://funnelfizz.com/track.js?t='+t;d.head.appendChild(s)})(window,document,'YOUR_TOKEN');`}

        </Script>

        {children}

      </body>

    </html>

  );

}
```

Next.js (Pages Router)

In `pages/_document.tsx`:

```
import { Html, Head, Main, NextScript } from 'next/document';



export default function Document() {

  return (

    <Html>

      <Head>

        <meta name="funnelfizz-verify" content="YOUR_TOKEN" />

        <script dangerouslySetInnerHTML={{ __html: `

          (function(w,d,t){w._fn=w._fn||[];w.funnelfizz=function(){w._fn.push(arguments)};var s=d.createElement('script');s.async=1;s.src='https://funnelfizz.com/track.js?t='+t;d.head.appendChild(s)})(window,document,'YOUR_TOKEN');

        ` }} />

      </Head>

      <body><Main /><NextScript /></body>

    </Html>

  );

}
```

Astro

In your layout:

```
<head>

  <meta name="funnelfizz-verify" content="YOUR_TOKEN" />

  <script is:inline define:vars={{ token: 'YOUR_TOKEN' }}>

    (function(w,d,t){w._fn=w._fn||[];w.funnelfizz=function(){w._fn.push(arguments)};var s=d.createElement('script');s.async=1;s.src='https://funnelfizz.com/track.js?t='+t;d.head.appendChild(s)})(window,document,token);

  </script>

</head>
```

WordPress

Install any "Insert Headers and Footers" plugin, then paste the snippet into the **Scripts in Header** box. Or add it directly to your theme's `header.php` inside `<head>`.

Webflow / Framer / Squarespace

Site-wide **Custom Code → Head** area. Paste both the `<meta>` and `<script>` tags. Publish.

Shopify

Online Store → Themes → Actions → Edit code → `layout/theme.liquid`. Paste inside `<head>`.

Plain HTML

Just paste it into `<head>` in every HTML file. Or put it in a shared include.

## 3. Verify[​](#3-verify "Direct link to 3. Verify")

Back in the wizard, visit your live site once (in a new tab). FunnelFizz polls the server every \~4 seconds and auto-advances as soon as the first pageview arrives with a matching verify meta tag. You'll see a green checkmark.

If nothing happens after 30 seconds:

* Make sure the snippet is actually on the page — **View Source** and search for `funnelfizz`.
* Make sure the domain you entered matches where you're visiting from (subdomain mismatches count — `www.example.com` vs `example.com` are different).
* Open browser devtools → Network tab → filter by `tracking` — you should see a POST to `funnelfizz.com/api/tracking/...`.
* Ad-blockers and strict privacy extensions may block tracking scripts. Test in a clean browser profile.

## 4. Custom events (optional but powerful)[​](#4-custom-events-optional-but-powerful "Direct link to 4. Custom events (optional but powerful)")

Once `track.js` is loaded, `window.funnelfizz()` is available globally. Fire a custom event from anywhere in your JS:

```
// Simple event

funnelfizz('event', 'signup');



// Event with properties

funnelfizz('event', 'form_submit', { formId: 'pricing-contact' });



// Identify a user (connects their future events to their account)

funnelfizz('identify', { userId: 'user_123', email: 'sam@example.com' });
```

You can also mark any HTML element as a goal:

```
<a href="/signup" data-fn-goal="signup_click">Start free trial</a>
```

FunnelFizz will record a `goal` event every time it's clicked. You can then split or filter by that goal name. See [Tutorials → Tracking & custom events](https://docs.funnelfizz.com/tutorials/tracking-custom-events.md) for a deeper walkthrough.

## 5. What the script sends[​](#5-what-the-script-sends "Direct link to 5. What the script sends")

* **`pageview`** on every page load.
* **`pageview`** on client-side route changes (SPA routers — pushState/popState).
* **`leave`** when the user leaves a page (with `timeOnPage` and `scrollDepth`).
* **`scroll`** at 25 / 50 / 75 / 90% milestones.
* **`goal`** when a `[data-fn-goal]` element is clicked.
* **`identify`** when you call `funnelfizz('identify', { userId })`.
* **`custom`** for anything else you fire.

Events are batched every 3 seconds and sent via `sendBeacon` on unload so nothing gets dropped.

## Privacy & compliance[​](#privacy--compliance "Direct link to Privacy & compliance")

* Tracking respects `navigator.doNotTrack`. If a visitor sets DNT, nothing is sent.
* No cross-site tracking, no fingerprinting, no selling data. See [funnelfizz.com/privacy](https://funnelfizz.com/privacy).
* GDPR-friendly: you can enable a cookie-consent gate by not loading the snippet until consent is granted. If you use a CMP (OneTrust, Cookiebot), wire the FunnelFizz loader into the "analytics" consent category.

***

**Next:** [Connect Stripe →](https://docs.funnelfizz.com/quickstart/connect-stripe.md)
