How to enable analytics on Vercel

intermediate 8 min read Updated 2026-03-13

Quick Answer

Log into Vercel Dashboard, select your project, enable Analytics in the sidebar, install <code>@vercel/analytics</code>, add the framework-specific <code><Analytics /></code> component to your root layout, and redeploy. Data appears in the Analytics tab after ~1 hour of traffic, but dashboard enable alone only provides server-side data—client-side requires code integration.

Prerequisites

A deployed project on Vercel (Next.js, Remix, Nuxt, SvelteKit, Astro, or similar)
Vercel account with dashboard access to the project
Node.js project with npm/yarn/pnpm for package installation
Basic knowledge of your framework's root layout or app file
Familiarity with deploying code changes to Vercel

Step-by-Step Instructions

Log in to Vercel Dashboard

Navigate to vercel.com/dashboard and select the specific project where you want to enable Web Analytics. Ensure you have access to a deployed project.

Access Analytics Section

In the project dashboard sidebar, click Analytics to open the Analytics tab. Review any limits or pricing information displayed there.

Enable Web Analytics

In the Analytics header, click the Enable button. This automatically adds routes like /_vercel/insights/* and //* for data collection, which take effect after your next deployment. No code changes are needed for basic server-side setup.

Enabling here alone collects server-side data; client-side tracking requires the next steps.

Install @vercel/analytics Package

In your project root, run

npm install @vercel/analytics

(or use yarn/pnpm). This installs the latest version by default and enables client-side tracking like page views and events when integrated.

Use framework-specific adapters (e.g., <code>@vercel/analytics/next</code>) imported in code.

Integrate for Next.js App Router

In your root layout (e.g., app/layout.tsx), import and add the component before </body>:

import { Analytics } from '@vercel/analytics/next';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Analytics />
    </html>
  );
}

Mode defaults to 'production' in builds.

Avoid placing outside <code><body></code> to prevent errors.

Integrate for Next.js Pages Router

In _app.js or pages/_app.tsx:

import { Analytics } from '@vercel/analytics/next';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

Integrate for Other Frameworks

For Remix, add <Analytics /> before <Outlet /> in App root. For Nuxt, add modules: ['@vercel/analytics'] in nuxt.config.ts. For SvelteKit, use injectAnalytics({ mode: dev ? 'development' : 'production' }) in +layout.js. For Astro (serverless), configure in astro.config.mjs with webAnalytics: { enabled: true }.

Check framework docs for exact placement; auto-detection often handles dev/production modes.

Deploy Your Changes

Commit and push your code changes to trigger a redeploy on Vercel. Visit your site to generate traffic after deployment.

Data may take ~1 hour to appear in the dashboard.

View Analytics Data

Return to your project dashboard, click Analytics in the sidebar, select timeframe/environment (default: Production), and explore panels for visitors, page views, and events.

Common Issues & Troubleshooting

No data appearing in Analytics tab after Enable

Dashboard enable only adds server routes; install <code>@vercel/analytics</code>, add <code><Analytics /></code> to root layout, redeploy, and wait ~1hr for client-side data.

Module not found: Can't resolve '@vercel/analytics'

Run <code>npm i @vercel/analytics</code> in project root and ensure correct framework import (e.g., <code>@vercel/analytics/next</code>).

Analytics not tracking in development

Set <code>mode: 'development'</code> where supported (e.g., SvelteKit), or test in production deploy. Local dev may not send data.

Component errors like hydration mismatch

Place <code><Analytics /></code> correctly inside <code><body></code> (Next.js App Router) or before Outlet/content root.

Data only shows server-side metrics

Client-side requires package install and <code><Analytics /></code> integration—dashboard enable alone is insufficient.

Visit Vercel View Vercel Pricing