# Install on Vercel (sites that aren't Next.js)

For sites on Vercel built without Next.js: static HTML, Vite, Astro and similar. One file runs as Vercel Routing Middleware in front of your pages and, for each page load, sends a privacy-reduced event to Punchline Analytics after the response has gone out. Next.js sites use the [Next.js package](https://www.punchlineanalytics.com/docs/install-nextjs) instead.

- **Nothing changes for your visitors.** No cookies, and pages pass through untouched.
- **It sees what Google Analytics can't:** crawlers, AI fetchers and coding agents that never run JavaScript.
- **Never breaks your site.** Without a DSN, or if Punchline is unreachable, requests continue normally.
- **Works with the browser snippet.** If you also use the [snippet](https://www.punchlineanalytics.com/docs/install-snippet), each page load is counted once.

## Install

You'll need your `PUNCHLINE_DSN` value (we send it when your site is set up).

1. **Add the file.** Download [`punchline-vercel-middleware.ts`](https://www.punchlineanalytics.com/downloads/punchline-vercel-middleware.ts) and save it at the root of your project as `middleware.ts` (next to `index.html` or `package.json`). It has no dependencies.
2. **Add your DSN.** In Vercel, open the project's **Settings → Environment Variables** and add `PUNCHLINE_DSN` for Production.
3. **Deploy.** Push to your repository as usual. In the deployment's details, **Functions** now lists `middleware`.
4. **Check it's working.** Visit a few pages. They appear in your Punchline dashboard within about a minute.

**Why `.ts`?** Vercel compiles a TypeScript middleware file itself, so it works whatever your project's module settings are. A `middleware.js` would need `"type": "module"` in `package.json`, which can break existing serverless functions written with `module.exports`, and `middleware.mjs` isn't picked up.

## What runs, and what doesn't

The middleware runs on pages and on the text files agents fetch (`robots.txt`, `llms.txt`, `sitemap.xml`). It skips `/api/` routes and assets (images, scripts, styles, fonts, video, PDFs), so they cost nothing extra. Vercel bills Routing Middleware as [fluid compute](https://vercel.com/docs/routing-middleware#pricing).

What's sent is the same as the other installs: the host, the path and `utm_*` values (every other query parameter is removed), the referrer's host, the `Accept` header, and, in memory only, the IP address and user agent, which the collector uses for classification and a daily visitor code and then discards.

[Serving AI agents markdown](https://www.punchlineanalytics.com/docs/edge-markdown) isn't available in this install yet; use the Next.js package or the Cloudflare Worker for that.