mcpField
A
analytics-best-practices

analytics-best-practices

github.com/andrelandgrafMarketing & growth2390 installsUpdated 20w ago
Repository

About analytics-best-practices

A Vercel Web Analytics recipe for developers who want to record custom events and conversions. It shows how to track events in client code and components, and how to test tracking during development.

Key features

  1. 01Track named custom events
  2. 02Attach event properties
  3. 03Track events in components
  4. 04Enable development testing
  5. 05Review analytics in Vercel

Use cases

  1. 01Measure sign-up and purchase conversions
  2. 02Record feature usage events
  3. 03Test event tracking locally

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill analytics-best-practices

After installing, type/analytics-best-practicesin Claude Code to confirm it loaded.

Details

From the project README

Analytics Best Practices

Track custom events and conversions with Vercel Web Analytics.

Prerequisites

Complete these setup recipes first:

  • Vercel Web Analytics
Tracking Events

Call track(name) or track(name, properties) from client code.

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

track("signup_clicked");

track("purchase_completed", { plan: "pro", price: 29, currency: "USD" });

Name events consistently around auth, feature usage, and conversions.

track("signup_completed", { method: "email" });
track("chat_completed", { messageCount: 5 });
track("subscription_created", { plan: "pro" });
track("upgrade_completed", { from: "free", to: "pro" });
In Components

Track inside event handlers.

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

function UpgradeButton() {
  return (
    <button
      onClick={() => track("upgrade_button_clicked", { location: "header" })}
    >
      Upgrade
    </button>
  );
}

function ContactForm() {
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    track("contact_form_submitted", { source: "footer" });
    // submit...
  };

  return <form onSubmit={handleSubmit}>...</form>;
}
Testing in Development

Events only send in production by default. Enable locally on the <Analytics /> component in layout.tsx.

<Analytics mode="development" />  // sends events
<Analytics debug />               // logs events to console

View page views, visitors, and custom events under Analytics in the Vercel dashboard.

References

Comments

Markdown supported