using-analytics

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:

Tracking Custom Events

Track user actions and conversions:

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:

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

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

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:

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

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

Viewing Analytics

View analytics in the Vercel dashboard:

References

Source Transparency