home / skills / andrelandgraf / fullstackrecipes / using-analytics

using-analytics skill

safe

This skill helps you implement and test Vercel Web Analytics, track custom events, and monitor conversions across components and forms.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill using-analytics

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.5 KB

---
name: using-analytics
description: Track custom events and conversions with Vercel Web Analytics. Covers common events, form tracking, and development testing.
---

# Working with Analytics

Track custom events and conversions with Vercel Web Analytics. Covers common events, form tracking, and development testing.

## Implement Working with Analytics

Track custom events and conversions with Vercel Web Analytics. Covers common events, form tracking, and development testing.

**See:**

- Resource: `using-analytics` in Fullstack Recipes
- URL: https://fullstackrecipes.com/recipes/using-analytics

---

### Tracking Custom Events

Track user actions and conversions:

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

// Basic event
track("signup_clicked");

// Event with properties
track("purchase_completed", {
  plan: "pro",
  price: 29,
  currency: "USD",
});
```

### Common Events to Track

Track meaningful user actions:

```typescript
// Authentication
track("signup_completed", { method: "email" });
track("signin_completed", { method: "google" });

// Feature usage
track("chat_started");
track("chat_completed", { messageCount: 5 });
track("file_uploaded", { type: "pdf", size: 1024 });

// Conversions
track("trial_started");
track("subscription_created", { plan: "pro" });
track("upgrade_completed", { from: "free", to: "pro" });
```

### Tracking in Components

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

function UpgradeButton() {
  const handleClick = () => {
    track("upgrade_button_clicked", { location: "header" });
    // Navigate to upgrade page...
  };

  return <button onClick={handleClick}>Upgrade</button>;
}
```

### Tracking Form Submissions

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

function ContactForm() {
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    track("contact_form_submitted", { source: "footer" });

    // Submit form...
  };

  return <form onSubmit={handleSubmit}>...</form>;
}
```

### Testing in Development

Analytics only send in production by default. For development testing:

```tsx
// In layout.tsx
<Analytics mode="development" />

// Or just log to console
<Analytics debug />
```

### Viewing Analytics

View analytics in the Vercel dashboard:

1. Go to your project in [Vercel Dashboard](https://vercel.com/dashboard)
2. Click "Analytics" in the sidebar
3. View page views, visitors, and custom events

---

## References

- [Vercel Web Analytics](https://vercel.com/docs/analytics)
- [Custom Events](https://vercel.com/docs/analytics/custom-events)

Overview

This skill shows how to track custom events and conversions with Vercel Web Analytics, including common event patterns, form submission tracking, and techniques for development testing. It provides practical TypeScript/React examples and guidance for viewing analytics in the Vercel dashboard. The goal is to make event tracking predictable and useful for product and growth metrics.

How this skill works

The skill uses the @vercel/analytics SDK to emit named events and optional property objects from components, handlers, and form submit callbacks. Events are sent in production by default; the Analytics component supports development and debug modes for local testing. Events are then visible in the Vercel dashboard alongside page views and visitor data.

When to use it

Record user actions that signal intent or value (signups, purchases, upgrades).
Track feature usage to understand engagement (chat starts, file uploads).
Instrument form submissions to measure lead flow and conversion sources.
Test event firing locally before deploying using development or debug mode.
Capture conversion funnels for A/B testing and growth experiments.

Best practices

Standardize event names and property keys to keep analytics consistent.
Send only meaningful properties (plan, price, source, counts) to avoid noise.
Fire events at the point of user intent (button click) and at completion (purchase_confirmed).
Use development or debug mode to validate events without polluting production data.
Keep event payloads small and avoid sending PII or sensitive user data.

Example use cases

Track signup flows: track('signup_clicked') on CTA and track('signup_completed', { method }) on success.
Measure pricing conversions: track('purchase_completed', { plan, price, currency }) after checkout.
Monitor feature adoption: track('chat_started') when chat opens and track('chat_completed', { messageCount }) on end.
Form analytics: track('contact_form_submitted', { source: 'footer' }) in the submit handler before sending data.
Local QA: enable <Analytics mode="development" /> or <Analytics debug /> to see events while developing.

FAQ

Do events send in development by default?

No. Events are only sent in production by default. Enable development mode or debug to test locally.

What should I include in event properties?

Include contextual, non-sensitive fields that help analyze behavior (plan, price, source, counts). Avoid personal data.