How to use VisitTrack analytics on Vercel

Vercel hosts whatever framework you deploy — Next.js, SvelteKit, Nuxt, Astro, Remix or a static site — so the install itself follows that framework's guide. What's Vercel-specific is environments: every pull request gets a preview deployment on its own *.vercel.app URL, and you don't want reviewers' clicks in your production numbers.

VisitTrack works the same on any host, which is the main difference from Vercel Web Analytics; for a detailed comparison see VisitTrack vs Vercel Analytics.

How to install VisitTrack on Vercel

1. 1

   Step 1: Install the tag in your framework

   Follow your framework's guide: Next.js, SvelteKit, Nuxt, Astro, Remix, or the plain snippet in your static index.html.

   <head>Copy

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

2. 2

   Step 2: Render it in production only

   Vercel sets VERCEL_ENV to production, preview or development. Server-rendered layouts can read it directly; this is the Next.js App Router version.

   app/layout.tsxCopy

   import Script from "next/script";
   
   const isProd = process.env.VERCEL_ENV === "production";
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <body>
           {children}
           {isProd && <Script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js" />}
         </body>
       </html>
     );
   }

3. 3

   Step 3: Save your allowed hostnames

   In VisitTrack, open Settings → General → Allowed hostnames and save your production domain (and *.yourdomain.com for subdomains). Hits from any other host — *.vercel.app previews included — are dropped before they're stored. Blocked hosts are listed for 7 days with an Allow button, so nothing disappears silently.

4. 4

   Step 4: Allow VisitTrack in your CSP headers

   If you send a Content-Security-Policy from vercel.json, add the origin to script-src and connect-src. Merge it into your existing policy rather than replacing it.

   vercel.jsonCopy

   {
     "headers": [
       {
         "source": "/(.*)",
         "headers": [
           {
             "key": "Content-Security-Policy",
             "value": "default-src 'self'; script-src 'self' https://visitrack.app; connect-src 'self' https://visitrack.app;"
           }
         ]
       }
     ]
   }

How to check VisitTrack is working on Vercel

1. Open a preview deployment — nothing should arrive (no tag, or the host is dropped).
2. Open the production domain and browse two pages; VisitTrack's live view shows you within seconds.
3. If a host was dropped by mistake, it appears under Blocked hostnames in Settings → General.

Does VisitTrack track Vercel page navigation?

Navigation tracking depends on your framework, not on Vercel: client-side routers (Next.js, SvelteKit, Nuxt, Remix) are followed through the History API, and static sites count one pageview per page load. Vercel's edge caching and ISR don't affect it — the script runs in the visitor's browser.

How to track custom events and goals in Vercel

Custom events are framework code: window.visitrack("signup") in the browser, or POST /api/track from a Vercel Function or server action with a secret API key stored in your Vercel project's environment variables (never with a NEXT_PUBLIC_ prefix).

// A Vercel Function / route handler
await fetch("https://visitrack.app/api/track", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.VISITRACK_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ type: "event", visitorId, name: "signup" }),
});

See custom events and server-side events.

Script options you might need on Vercel

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

Vercel troubleshooting

Not on Vercel? See all 29 integration guides.