Vercel Analytics

Learn how to use Vercel Analytics for real-time traffic data.

The starter kit is pre-configured with Vercel Analytics to provide real-time traffic data when deployed on Vercel.

Overview

Vercel Analytics provides:

Web Analytics - Page views, unique visitors, top pages
Referrers - Where visitors come from
Countries - Geographic distribution of visitors

Setup

1. Install Packages

The required packages are already installed:

package.json

{
  "dependencies": {
    "@vercel/analytics": "1.6.1",
    "@vercel/speed-insights": "1.3.1"
  }
}

2. Add Components to Layout

The components are already added to your 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>
  );
}

3. Deploy to Vercel

Analytics automatically works when deployed to Vercel. No additional configuration is needed.

Vercel Only Vercel Analytics only works when deployed on Vercel. It won't collect data in local development or when deployed elsewhere.

Web Analytics

Vercel Analytics automatically tracks:

Page Views - Every page navigation
Unique Visitors - Distinct users visiting your site
Top Pages - Most visited pages
Referrers - Where visitors come from
Countries - Geographic distribution of visitors

Viewing Analytics

Go to your Vercel Dashboard
Select your project
Navigate to the Analytics tab

You'll see:

Real-time visitor count
Page view trends
Top pages
Geographic data
Referrer information

Custom Events

Track custom events with the track function:

components/button.tsx

'use client';

import { track } from '@vercel/analytics';

export function Button() {
  const handleClick = () => {
    track('button_clicked', {
      button_name: 'signup',
      location: 'hero'
    });
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

Event Properties

Add custom properties to events:

lib/analytics.ts

import { track } from '@vercel/analytics';

export function trackPurchase(amount: number, productId: string) {
  track('purchase', {
    amount,
    product_id: productId,
    currency: 'USD'
  });
}

Privacy

Vercel Analytics is privacy-focused:

No cookies - Doesn't use cookies for tracking
GDPR compliant - Complies with GDPR requirements
IP anonymization - IP addresses are anonymized
No personal data - Doesn't collect personally identifiable information

Configuration

Disable Analytics in Development

Analytics are automatically disabled in development, but you can explicitly disable them:

app/layout.tsx

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === 'production' && <Analytics />}
      </body>
    </html>
  );
}

Custom Mode

Use custom mode for more control:

app/layout.tsx

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

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

Best Practices

Monitor regularly - Check analytics weekly
Track important events - Use custom events for key user actions
Analyze traffic patterns - Use the data to understand user behavior
Set up alerts - Configure alerts for traffic anomalies

Limitations

Vercel only - Only works when deployed on Vercel
No historical data - Data is only available after deployment
Limited customization - Less customizable than third-party analytics
No user identification - Can't track individual users across sessions

For more advanced analytics needs, consider integrating additional analytics providers like Google Analytics or PostHog.