How it works

This site demonstrates how to proxy analytics through Vercel using vercel.ts for first-party data collection.

First-party analytics proxy

By proxying PostHog requests through your own domain, analytics data is collected as first-party traffic. This improves data accuracy and ensures consistent tracking across all users.

// vercel.ts
import { routes } from '@vercel/config/v1'

export const config = {
  routes: [
    routes.rewrite('/ph/static/(.*)', 
      'https://us-assets.i.posthog.com/static/$1',
      { requestHeaders: { 'host': 'us-assets.i.posthog.com' } }
    ),
    routes.rewrite('/ph/(.*)', 
      'https://us.i.posthog.com/$1',
      { requestHeaders: { 'host': 'us.i.posthog.com' } }
    ),
  ],
}

How the proxy works

1

Route configuration

The vercel.ts file defines rewrite rules that map /ph/* paths to PostHog's servers.

2

Header rewriting

The host header is rewritten so PostHog's servers correctly route the proxied requests.

3

Client initialization

PostHog is initialized with api_host: '/ph' to send all requests through your proxy endpoint.

Benefits

  • Better data accuracy — First-party requests aren't subject to the same restrictions as third-party tracking
  • No edge function costs — Uses Vercel's built-in reverse proxy layer
  • Framework agnostic — Works with Next.js, Vue, Astro, or any framework
  • Simple setup — Just configure routes and set your API key

Try it yourself

Open your browser's Network tab and look for requests to /ph/. You'll see analytics calls going through your domain instead of directly to PostHog.

View on GitHubPostHog Docs