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

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

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

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

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)

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 for a deeper walkthrough.

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

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.
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 →

1. Grab the snippet​

2. Paste it into <head>​

Framework-specific install​

3. Verify​

4. Custom events (optional but powerful)​

5. What the script sends​

Privacy & compliance​