How to add analytics to a Cloudflare Pages site

Cloudflare Pages has a feature most hosts don't: middleware that runs at the edge on every request. That gives you a no-template-edit install option, and it's also the right place to report AI crawlers for a static site, because the edge is the only layer that sees them. (Cloudflare also steers new projects toward Workers with static assets; the same tag-in-HTML approach applies there, and the AI crawler docs have a Workers snippet.)

How to install VisitTrack on Cloudflare Pages

1. 1

   Step 1: Copy your site id

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

2. 2

   Step 2: Add the tag to your HTML (recommended)

   In your static index.html, base template or framework layout, inside <head>. The data-cfasync="false" attribute is only needed if Rocket Loader is enabled on your zone, and must come before src.

   <head>Copy

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

3. 3

   Step 3: Or: inject it with Pages Functions

   No access to templates (for example a pre-built export)? This middleware appends the tag to the <head> of every HTML response and passes everything else through unchanged.

   functions/_middleware.jsCopy

   // functions/_middleware.js — injects the tag into every HTML response
   export async function onRequest(context) {
     const response = await context.next();
     const type = response.headers.get("content-type") || "";
     if (!type.includes("text/html")) return response;
   
     return new HTMLRewriter()
       .on("head", {
         element(head) {
           head.append(
             '<script defer data-site="SITE_ID" src="https://visitrack.app/tracker.js"></script>',
             { html: true },
           );
         },
       })
       .transform(response);
   }

4. 4

   Step 4: Keep preview deployments out

   Branch and preview deployments get *.pages.dev URLs. In VisitTrack, save your production domain under Settings → General → Allowed hostnames so those hits are dropped.

How to check VisitTrack is working on Cloudflare Pages

1. Open the production domain and view source: the tag is in <head> (with the middleware option, view source shows the rewritten HTML).
2. Browse two pages; VisitTrack's live view shows you within seconds.
3. If the tag's type was rewritten (for example to text/rocketscript) in the delivered HTML, Rocket Loader is handling it — add data-cfasync="false".

Does VisitTrack track Cloudflare Pages page navigation?

Static pages count one pageview per load; framework sites with client-side routing (SvelteKit, Astro with view transitions, React Router, Nuxt) are followed through the History API. Cloudflare's caching doesn't affect counting — the script runs in the visitor's browser.

How to track custom events and goals in Cloudflare Pages

Use data-vt-goal on elements and window.visitrack("name") in your client code. For signups or payments handled in a Pages Function, POST /api/track with a secret API key stored as an encrypted environment variable in the Pages project settings (bound to context.env).

// functions/api/signup.js
export async function onRequestPost({ request, env }) {
  const { email, visitorId } = await request.json();
  // …create the account…
  await fetch("https://visitrack.app/api/track", {
    method: "POST",
    headers: { Authorization: `Bearer ${env.VISITRACK_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({ type: "event", visitorId, name: "signup" }),
  });
  return Response.json({ ok: true });
}

// functions/_middleware.js — from /docs/ai-crawler-tracking
export async function onRequest(context) {
  const { request, next, waitUntil } = context;
  const url = new URL(request.url);

  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: request.headers.get("cf-connecting-ip"),
      }),
    }).catch(() => {}),
  );

  return next();
}

Script options you might need on Cloudflare Pages

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

Cloudflare Pages troubleshooting

Not on Cloudflare Pages? See all 29 integration guides.