Intermediate
How to enable analytics on Vercel
Quick Answer
Log into Vercel Dashboard, select your project, enable Analytics in the sidebar, install
@vercel/analytics, add the framework-specific <Analytics /> 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
1
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.2
Access Analytics Section
In the project dashboard sidebar, click Analytics to open the Analytics tab. Review any limits or pricing information displayed there.
3
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.Tip
Enabling here alone collects server-side data; client-side tracking requires the next steps.
4
Install @vercel/analytics Package
In your project root, run
npm install @vercel/analyticsTip
Use framework-specific adapters (e.g.,
@vercel/analytics/next) imported in code.5
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>
);
}Tip
Avoid placing outside
<body> to prevent errors.6
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 />
</>
);
}7
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 }.Tip
Check framework docs for exact placement; auto-detection often handles dev/production modes.
8
Deploy Your Changes
Commit and push your code changes to trigger a redeploy on Vercel. Visit your site to generate traffic after deployment.
Tip
Data may take ~1 hour to appear in the dashboard.
9
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.
Troubleshooting
No data appearing in Analytics tab after Enable
Dashboard enable only adds server routes; install
@vercel/analytics, add <Analytics /> to root layout, redeploy, and wait ~1hr for client-side data.Module not found: Can't resolve '@vercel/analytics'
Run
npm i @vercel/analytics in project root and ensure correct framework import (e.g., @vercel/analytics/next).Analytics not tracking in development
Set
mode: 'development' where supported (e.g., SvelteKit), or test in production deploy. Local dev may not send data.Component errors like hydration mismatch
Place
<Analytics /> correctly inside <body> (Next.js App Router) or before Outlet/content root.Data only shows server-side metrics
Client-side requires package install and
<Analytics /> integration—dashboard enable alone is insufficient.Ready to get started with Vercel?
Put this tutorial into practice. Visit Vercel and follow the steps above.
Visit Vercel →