How to add analytics to a Netlify site

Snippet injection rewrites static HTML on its way out, which makes it ideal for static sites and site generators — no rebuild, no commit. It doesn't apply to proxied routes or responses generated by Netlify Functions, so server-rendered pages (SSR Next.js, Astro, Remix and similar on Netlify) need the tag in the framework's layout instead.

How to install VisitTrack on Netlify

1. 1

   Step 1: Copy your site id

   Add your Netlify site's domain in VisitTrack and copy the snippet from the install step. Replace SITE_ID below.

2. 2

   Step 2: Open Snippet injection

   In the Netlify UI, open your project → Project configuration → Build & deploy → Post processing → Snippet injection, and click Add snippet. (Netlify occasionally moves this page; search the project configuration for "Snippet injection".)

3. 3

   Step 3: Insert the tag before </head>

   Choose to insert before </head>, name it "VisitTrack", paste the tag and save. It applies to pages served from then on, without a redeploy.

   Snippet injection → before </head>Copy

   <script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js"></script>

4. 4

   Step 4: Or: add it in code

   For SSR frameworks, or if you prefer it version-controlled, add the tag in your framework's layout instead — see the Next.js, Astro, Hugo or Gatsby guides. Don't do both, or every page counts twice.

5. 5

   Step 5: Keep deploy previews out

   Deploy previews and branch deploys live on URLs like deploy-preview-12--yoursite.netlify.app. Save your production domain under VisitTrack's Settings → General → Allowed hostnames and those hits are dropped.

How to check VisitTrack is working on Netlify

1. Open the production site and view source — the tag sits right before </head>.
2. Browse two pages; VisitTrack's live view shows you, and the Pages tab lists both paths.
3. Open an SSR route too: if its source has no tag, that route is function-rendered and needs the in-code install.

Does VisitTrack track Netlify page navigation?

Netlify serves your build output; navigation tracking depends on your site. Static pages count one pageview per load, and client-side routers (React, Vue, SvelteKit, Gatsby, Docusaurus) are followed through the History API. Netlify redirects and rewrites happen before the page loads, so the path recorded is the one in the browser's address bar.

How to track custom events and goals in Netlify

Netlify Forms are standard HTML forms (<form data-netlify="true">), so with automatic events on, each submission records a form_submit event. For a clean conversion, give the form an action pointing at a thank-you page and create a page goal for that exact path in Settings → Goals.

<form name="contact" method="POST" data-netlify="true" action="/thanks/">
  <input type="hidden" name="form-name" value="contact" />
  <input name="email" type="email" required />
  <button data-vt-goal="contact_submit_click">Send</button>
</form>

Anywhere else, data-vt-goal on an element or window.visitrack("name") in your own JavaScript records custom events.

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self' https://visitrack.app; connect-src 'self' https://visitrack.app;"

// netlify/edge-functions/visitrack-crawlers.js
export default async (request, context) => {
  const url = new URL(request.url);
  context.waitUntil(
    fetch("https://visitrack.app/api/collect-bot", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        siteId: "SITE_ID",
        path: url.pathname,
        userAgent: request.headers.get("user-agent"),
        ip: context.ip,
      }),
    }).catch(() => {}),
  );
  return context.next();
};

export const config = { path: "/*" };

Script options you might need on Netlify

All optional — add them to the same tag. Full reference: script configuration.

Netlify troubleshooting

Not on Netlify? See all 29 integration guides.