majiayu000 Vercel Analytics
Privacy-friendly, real-time traffic insights and Web Vitals for Vercel-deployed applications. Zero configuration with automatic Core Web Vitals tracking.
Quick Start
npm install @vercel/analytics
Next.js App Router
// 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>
);
}
Next.js Pages Router
// pages/_app.tsx
import { Analytics } from '@vercel/analytics/react';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
Configuration Options
import { Analytics } from '@vercel/analytics/react';
<Analytics
mode="production" // 'production' | 'development' | 'auto'
debug={false} // Enable debug mode
beforeSend={(event) => {
// Modify or filter events before sending
if (event.url.includes('/private')) {
return null; // Don't track
}
return event;
}}
/>
Custom Events
Track custom events beyond page views.
import { track } from '@vercel/analytics';
// Basic event
track('signup_clicked');
// Event with properties
track('item_purchased', {
productId: 'prod_123',
price: 29.99,
currency: 'USD',
});
// Form submission
function ContactForm() {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
track('contact_form_submitted', {
source: 'footer',
});
// Submit form...
};
return <form
}
Server-Side Tracking
// app/api/checkout/route.ts
import { track } from '@vercel/analytics/server';
import { NextRequest, NextResponse } from 'next/server';
export async function POST(request: NextRequest) {
const { orderId, amount } = await request.json();
await track('purchase_completed', {
orderId,
amount,
});
return NextResponse.json({ success: true });
}
Web Vitals (Speed Insights)
Track Core Web Vitals with Vercel Speed Insights.
npm install @vercel/speed-insights
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
);
}
Custom Web Vitals Reporting
// app/layout.tsx
'use client';
import { useReportWebVitals } from 'next/web-vitals';
export function WebVitals() {
useReportWebVitals((metric) => {
console.log(metric);
// {
// id: 'v3-1234567890',
// name: 'LCP',
// value: 2500,
// rating: 'good',
// delta: 2500,
// entries: [...],
// navigationType: 'navigate',
// }
// Send to your analytics
// gtag('event', metric.name, { value: metric.value });
});
return null;
}
Instrumentation Client
For advanced analytics setup:
// instrumentation-client.ts
export function register() {
// Initialize analytics, error tracking, etc.
console.log('Analytics initialized');
}
React (Non-Next.js)
import { inject } from '@vercel/analytics';
// Call once on app load
inject();
// Or with options
inject({
mode: 'production',
debug: true,
});
React Component
import { Analytics } from '@vercel/analytics/react';
function App() {
return (
<>
<YourApp />
<Analytics />
</>
);
}
Event Filtering
<Analytics
beforeSend={(event) => {
// Remove query params from URLs
const url = new URL(event.url);
url.search = '';
event.url = url.toString();
// Filter specific paths
if (event.url.includes('/admin')) {
return null;
}
return event;
}}
/>
Development Mode
Analytics are disabled by default in development. Override:
<Analytics mode="development" debug={true} />
Or use environment variable:
# .env.local
NEXT_PUBLIC_VERCEL_ANALYTICS_DEBUG=true
Viewing Analytics
Analytics are available in the Vercel Dashboard:
- Go to your project on Vercel
- Click "Analytics" tab
- View page views, unique visitors, referrers, and more
With Other Frameworks
SvelteKit
<!-- src/routes/+layout.svelte -->
<script>
import { inject } from '@vercel/analytics';
import { browser } from '$app/environment';
if (browser) {
inject();
}
</script>
<slot />
Astro
---
// src/layouts/Layout.astro
import { Analytics } from '@vercel/analytics/react';
---
<html>
<body>
<slot />
<Analytics client:only="react" />
</body>
</html>
Vue/Nuxt
<!-- app.vue -->
<script setup>
import { inject } from '@vercel/analytics'
onMounted(() => {
inject()
})
</script>
TypeScript
import { track } from '@vercel/analytics';
interface PurchaseEvent {
productId: string;
price: number;
quantity: number;
}
function trackPurchase(event: PurchaseEvent) {
track('purchase', event);
}
Privacy Features
- No cookies used
- GDPR compliant
- No personal data collected
- IP addresses are anonymized
- Data stored in EU or US (your choice)
Best Practices
- Add Analytics component once - In root layout
- Use beforeSend for PII - Filter sensitive URLs
- Add Speed Insights - For Core Web Vitals
- Track meaningful events - Conversions, signups, purchases
- Use server-side tracking - For sensitive operations
- Enable in production only - Default behavior