analytics

Included with Lifetime

$97 forever

Setup Vercel Analytics for Next.js applications with custom event tracking. Use this skill when the user says "setup analytics", "add analytics", "setup vercel analytics", "track events", or "add tracking".

Web Dev

What this skill does


# Vercel Analytics Setup

Complete setup for Vercel Analytics in Next.js applications with custom event tracking for both client and server.

## What Gets Created

| Skill File | Target Project Path | Description |
|------------|---------------------|-------------|
| (embedded) | `src/app/layout.tsx` | Analytics component added |
| (embedded) | `src/components/*.tsx` | Event tracking examples |

## Installation

```bash
bun add @vercel/analytics
```

## Setup

Add the Analytics component to your root layout:

```tsx
// app/layout.tsx
import { Analytics } from "@vercel/analytics/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}
```

## Enable in Dashboard

1. Go to Vercel Dashboard
2. Select your Project
3. Navigate to Analytics tab
4. Click Enable

Analytics auto-detects after your next deployment.

## Custom Events (Client)

```tsx
import { track } from "@vercel/analytics";

// Basic event
track("Signup");

// Event with data
track("Purchase", {
  product: "shirt",
  price: 25,
});
```

## Custom Events (Server)

Use in Server Actions or Route Handlers:

```tsx
import { track } from "@vercel/analytics/server";

// In Server Action or Route Handler
await track("FormSubmit", { type: "contact" });
```

## Analytics Component Props

| Prop | Type | Description |
|------|------|-------------|
| `mode` | `'auto' \| 'production' \| 'development'` | When to track. Default: `'auto'` |
| `debug` | `boolean` | Log events to console |
| `beforeSend` | `(event) => event \| null` | Modify/filter events |

## beforeSend Example

Filter or modify events before sending:

```tsx
<Analytics
  beforeSend={(event) => {
    // Redact sensitive paths
    if (event.url.includes("/private")) {
      return { ...event, url: "/private/[redacted]" };
    }
    // Skip tracking entirely
    if (event.url.includes("/admin")) {
      return null;
    }
    return event;
  }}
/>
```

## Event Tracking Limits

| Constraint | Limit |
|------------|-------|
| Event name | max 255 chars |
| Property key | max 255 chars |
| Property value | max 255 chars |
| Nested objects | Not supported |
| Value types | `string \| number \| boolean \| null` |
| Custom events | Pro/Enterprise plans only |

## Verification

### Local Development

In development mode, Analytics loads but does NOT send requests to Vercel servers. Instead:

1. **Check Network Tab**: Look for `va.vercel-scripts.com/v1/script.debug.js` loading successfully
2. **Check Console**: You should see these debug messages:
   - `[Vercel Web Analytics] Debug mode is enabled by default in development. No requests will be sent to the server.`
   - `[Vercel Web Analytics] Running queued event pageview {"route":"/","path":"/"}`
   - `[Vercel Web Analytics] [pageview] http://localhost:3000/ {...}`

The console messages confirm Analytics is properly initialized and tracking pageviews, even though data isn't sent in dev mode.

### Production Verification

After deployment to Vercel:

1. **Check Network Tab**: Look for requests to:
   - `/_vercel/insights/view` (pageviews)
   - `/_vercel/insights/event` (custom events)
   - Or `va.vercel-scripts.com` endpoints
2. **Check Vercel Dashboard**: Navigate to your project's Analytics tab to see incoming data

### Common Issues

| Issue | Solution |
|-------|----------|
| No network requests in dev | Expected behavior - debug mode logs to console only |
| No console messages | Verify `<Analytics />` is in root layout and page refreshed |
| Script fails to load | Check for ad blockers or network issues |
| No data in dashboard | Ensure Analytics is enabled in Vercel Dashboard and site is deployed |

### Programmatic Verification (Playwright/Testing)

```typescript
// Check Analytics script loaded
const analyticsScript = await page.waitForResponse(
  (response) => response.url().includes("va.vercel-scripts.com") && response.status() === 200
);

// Check console for Analytics messages (development)
page.on("console", (msg) => {
  if (msg.text().includes("[Vercel Web Analytics]")) {
    console.log("Analytics initialized:", msg.text());
  }
});
```

## Usage Examples

### Track Button Clicks

```tsx
"use client";

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

export function CTAButton() {
  return (
    <button
      onClick={() => {
        track("CTA Clicked", { location: "hero" });
      }}
    >
      Get Started
    </button>
  );
}
```

### Track Form Submissions

```tsx
"use client";

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

export function ContactForm() {
  async function handleSubmit(formData: FormData) {
    track("Form Submitted", {
      type: "contact",
      hasMessage: Boolean(formData.get("message")),
    });
    // Submit form...
  }

  return <form action={handleSubmit}>{/* fields */}</form>;
}
```

### Track Server-Side Events

```tsx
// app/api/checkout/route.ts
import { track } from "@vercel/analytics/server";
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const { items, total } = await request.json();

  await track("Checkout Started", {
    itemCount: items.length,
    total,
  });

  // Process checkout...
  return NextResponse.json({ success: true });
}
```

### Track with Server Actions

```tsx
// app/actions.ts
"use server";

import { track } from "@vercel/analytics/server";

export async function subscribeToNewsletter(email: string) {
  await track("Newsletter Signup", { source: "footer" });
  // Save to database...
}
```

## Setup Checklist

- [ ] `@vercel/analytics` installed
- [ ] `<Analytics />` component added to root layout
- [ ] Analytics enabled in Vercel Dashboard
- [ ] Deployed to Vercel
- [ ] Verified requests in Network tab

Files: 1

Size: 6.0 KB

Complexity: 15/100

Category: Web Dev

Source: https://github.com/mattwoodco/skills/tree/main/skills/analytics

Related in Web Dev

generating-lwc-components

Included

Lightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.

Web Devscripts

tanstack-query

Included

Manage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.

Web Devscripts

document-processor-api

Included

Process documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.

Web Devscripts

nutrient-document-processing

Included

Web Devscripts

tanstack-query

Included

Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.

Web Devscripts

accelint-nextjs-best-practices

Included

Next.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.

Web Devscripts