LLM Best Practices

Vercel: Analytics

5 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), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), First Contentful Paint (FCP), and Time to First Byte (TTFB) per URL. INP replaced First Input Delay (FID) as the Core Web Vital for responsiveness in March 2024; FID is retired and no longer reported. 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

Web Analytics and Speed Insights are priced and metered separately, and both moved off the old shared “data points” model to per-event billing.

Web Analytics (current pricing):

  • Hobby: 50,000 events per month included, free. Collection pauses after a 3-day grace period past the limit and resumes the next cycle (or on upgrade).
  • Pro: no included allotment; billed per collected event against the plan’s usage credit, roughly 30 per million). A paid “Web Analytics Plus” add-on ($10/month per team) extends the reporting window and unlocks more custom-event properties and UTM tracking.
  • An event is a pageview or a custom track() call; both count toward the same monthly total, shared across every project in the team.

Speed Insights (current pricing):

  • Hobby: one project, 10,000 events per month included, 7-day reporting window.
  • Pro: a 0.65 per 10,000 events beyond the base allotment, 30-day reporting window.

At high traffic (100k+ monthly visits), the per-event cost on Pro becomes non-trivial, especially with Speed Insights’ per-project base fee. Reduce cost with the sample rate on @vercel/speed-insights before reaching for a different tool. Compare against dedicated analytics platforms (Plausible, Fathom, PostHog) before committing long-term. 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.

Backlinks