{"content":"# Vercel Web Analytics\n\nAdd privacy-focused web analytics with Vercel Web Analytics. Track page views, visitors, and custom events with zero configuration.\n\n### Step 1: Install the package\n\n```bash\nbun add @vercel/analytics\n```\n\n### Step 2: Add the Analytics component\n\nAdd the `Analytics` component to your root layout:\n\n```typescript\n// src/app/layout.tsx\nimport { Analytics } from \"@vercel/analytics/next\";\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n {children}\n \n \n \n );\n}\n```\n\nThat's it! Page views are now tracked automatically.\n\n---\n\n## Custom Events\n\nTrack custom events to measure user actions:\n\n```typescript\nimport { track } from \"@vercel/analytics\";\n\n// Track a button click\nfunction SignupButton() {\n return (\n \n );\n}\n\n// Track with properties\ntrack(\"purchase_completed\", {\n plan: \"pro\",\n price: 29,\n currency: \"USD\",\n});\n\n// Track form submissions\nfunction ContactForm() {\n const handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n track(\"contact_form_submitted\", { source: \"footer\" });\n // ... submit form\n };\n\n return
...
;\n}\n```\n\n---\n\n## Development\n\nAnalytics are only sent in production by default. To test in development, set the `mode` prop:\n\n```typescript\n\n```\n\nOr use the `debug` prop to log events to the console:\n\n```typescript\n\n```\n\n---\n\n## References\n\n- [Vercel Web Analytics](https://vercel.com/docs/analytics)\n- [@vercel/analytics Package](https://www.npmjs.com/package/@vercel/analytics)"}