LLM Best Practices

Vercel: Analytics

4 min read

View markdown source

Overview

Vercel offers two analytics products: Web Analytics (privacy-first traffic data) and Speed Insights (Core Web Vitals per page). Both are opt-in, instrument with a small package, and cost nothing beyond the Vercel plan. This page covers setup, what each product measures, cost considerations, and the ceiling at which you should move to a dedicated analytics platform.

Enable Web Analytics in the project settings before installing the package

Web Analytics must be enabled per project in the Vercel dashboard before the package reports any data. The package installed without the setting enabled sends no-op requests.

In the Vercel dashboard: Project settings > Analytics > Enable Web Analytics.

Then install the package:

npm install @vercel/analytics

Add the Web Analytics component to the app entry

For Next.js App Router, add the <Analytics /> component to the root layout:

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

For Astro, use the Astro integration:

// astro.config.mjs
import vercel from "@astrojs/vercel";
export default { adapter: vercel() };

The <Analytics /> component injects a small script that fires a pageview on each route change. It works with client-side navigation in Next.js and Astro view transitions without additional configuration. See astro for the Astro-specific setup and nextjs for the App Router layout.

Understand what Web Analytics collects and what it does not

Vercel Web Analytics is cookieless and fingerprint-free. It collects:

  • Page views and unique visitors (hashed, not individually identified).
  • Referrer, country, OS, browser, and device type.
  • Route-level breakdown for SPA navigation.

It does not collect: individual user journeys across sessions, user IDs, form inputs, click events, custom event properties (without explicit track() calls), or any server-side API call data.

For custom events, call track() from the @vercel/analytics package:

import { track } from "@vercel/analytics";
 
track("upgrade_clicked", { plan: "pro" });

Custom events appear in the dashboard under “Events.” Each event costs one data point against the monthly quota. See the cost section below.

Add Speed Insights for Core Web Vitals per route

Speed Insights reports Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), and Time to First Byte (TTFB) per URL. Unlike Lighthouse (which measures a single synthetic test), Speed Insights aggregates real user data.

npm install @vercel/speed-insights
// app/layout.tsx
import { SpeedInsights } from "@vercel/speed-insights/next";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Speed Insights data appears in the Vercel dashboard under “Speed Insights” with a per-page breakdown and percentile distribution. Use the p75 value, not the average, when diagnosing performance issues. The p75 represents the experience for users in the slower quartile. See technical for the CWV thresholds and their SEO impact.

Know the cost model before scaling traffic

Vercel Web Analytics and Speed Insights have free tiers that cover most small projects:

  • Hobby plan: 2,500 data points per month (Web Analytics pageviews + Speed Insights events combined).
  • Pro plan: 25,000 data points per month included; additional points billed per 100k.

A data point is one pageview or one Web Vitals measurement. A page with 1,000 unique visits and Speed Insights enabled uses roughly 2,000 data points (one pageview + one vitals report per visit).

At high traffic (100k+ monthly visits), the data point cost becomes non-trivial. Compare against dedicated analytics tools (Plausible, Fathom, PostHog) before committing. Vercel Analytics is a low-friction starting point, not a long-term analytics platform. See cloudflare for Cloudflare Web Analytics, which is free and also cookieless.

Disable analytics in preview deployments if the quota is limited

Preview deployments fire Web Analytics pageviews like production. If QA or load testing runs on previews, those hits consume quota. Conditionally disable analytics on non-production environments:

<Analytics mode={process.env.VERCEL_ENV === "production" ? "auto" : "disabled"} />

VERCEL_ENV is a system environment variable set by Vercel to production, preview, or development. No manual setup is needed; it is injected automatically. See vercel-env-vars for the distinction between system variables and user-defined variables.

Graph View

Backlinks