Step 1: Install the package
bash
bun add @vercel/analyticsbun add @vercel/analyticsStep 2: Add the Analytics component
Add the Analytics component to your root layout:
tsx
import { Analytics } from "@vercel/analytics/next";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
);
}import { Analytics } from "@vercel/analytics/next";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
);
}That's it! Page views are now tracked automatically.
Custom Events
Track custom events to measure user actions:
typescript
import { track } from "@vercel/analytics";
// Track a button click
function SignupButton() {
return (
<button onClick={() => track("signup_clicked")}>
Sign Up
</button>
);
}
// Track with properties
track("purchase_completed", {
plan: "pro",
price: 29,
currency: "USD",
});
// Track form submissions
function ContactForm() {
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
track("contact_form_submitted", { source: "footer" });
// ... submit form
};
return <form onSubmit={handleSubmit}>...</form>;
}import { track } from "@vercel/analytics";
// Track a button click
function SignupButton() {
return (
<button onClick={() => track("signup_clicked")}>
Sign Up
</button>
);
}
// Track with properties
track("purchase_completed", {
plan: "pro",
price: 29,
currency: "USD",
});
// Track form submissions
function ContactForm() {
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
track("contact_form_submitted", { source: "footer" });
// ... submit form
};
return <form onSubmit={handleSubmit}>...</form>;
}Development
Analytics are only sent in production by default. To test in development, set the mode prop:
typescript
<Analytics mode="development" /><Analytics mode="development" />Or use the debug prop to log events to the console:
typescript
<Analytics debug /><Analytics debug />