Agent skill

vercel-analytics

Implements privacy-friendly web analytics with Vercel Analytics for traffic insights and Web Vitals. Use when tracking page views and performance metrics in Next.js applications deployed on Vercel.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/vercel-analytics

SKILL.md

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

bash
npm install @vercel/analytics

Next.js App Router

tsx
// 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

tsx
// 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

tsx
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.

tsx
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 onSubmit={handleSubmit}>...</form>;
}

Server-Side Tracking

typescript
// 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.

bash
npm install @vercel/speed-insights
tsx
// 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

tsx
// 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:

typescript
// instrumentation-client.ts
export function register() {
  // Initialize analytics, error tracking, etc.
  console.log('Analytics initialized');
}

React (Non-Next.js)

tsx
import { inject } from '@vercel/analytics';

// Call once on app load
inject();

// Or with options
inject({
  mode: 'production',
  debug: true,
});

React Component

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

function App() {
  return (
    <>
      <YourApp />
      <Analytics />
    </>
  );
}

Event Filtering

tsx
<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:

tsx
<Analytics mode="development" debug={true} />

Or use environment variable:

bash
# .env.local
NEXT_PUBLIC_VERCEL_ANALYTICS_DEBUG=true

Viewing Analytics

Analytics are available in the Vercel Dashboard:

  1. Go to your project on Vercel
  2. Click "Analytics" tab
  3. View page views, unique visitors, referrers, and more

With Other Frameworks

SvelteKit

svelte
<!-- src/routes/+layout.svelte -->
<script>
  import { inject } from '@vercel/analytics';
  import { browser } from '$app/environment';

  if (browser) {
    inject();
  }
</script>

<slot />

Astro

astro
---
// src/layouts/Layout.astro
import { Analytics } from '@vercel/analytics/react';
---

<html>
  <body>
    <slot />
    <Analytics client:only="react" />
  </body>
</html>

Vue/Nuxt

vue
<!-- app.vue -->
<script setup>
import { inject } from '@vercel/analytics'

onMounted(() => {
  inject()
})
</script>

TypeScript

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

  1. Add Analytics component once - In root layout
  2. Use beforeSend for PII - Filter sensitive URLs
  3. Add Speed Insights - For Core Web Vitals
  4. Track meaningful events - Conversions, signups, purchases
  5. Use server-side tracking - For sensitive operations
  6. Enable in production only - Default behavior

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results