Add Vercel Web Analytics to Astro

vercel[bot] · vercel[bot] · commit 810c883861c7 · 2026-01-14T01:38:16.000Z
## Vercel Web Analytics Implementation for Astro

Successfully implemented Vercel Web Analytics for the clearcut Astro project.

### Changes Made

#### Files Modified:
1. **src/layouts/Layout.astro**
   - Added import: `import Analytics from '@vercel/analytics/astro';`
   - Added `&lt;Analytics /&gt;` component in the `&lt;head&gt;` section
   - Preserves existing code structure and SpeedInsights component

2. **package.json**
   - Added dependency: `@vercel/analytics@^1.6.1` (satisfies requirement of v1.4.0 or later)

3. **package-lock.json**
   - Updated with new dependency and 440 additional transitive packages

### Implementation Details

- **Package Manager**: npm (project uses package-lock.json)
- **Version Installed**: @vercel/analytics@1.6.1 (meets the v1.4.0+ requirement)
- **Installation Method**: `npm install @vercel/analytics`
- **Component Placement**: Added to the `&lt;head&gt;` section of the base layout as recommended
- **Route Support**: Automatically included via the Astro integration

### Verification

- ✓ Build completed successfully with no errors
- ✓ Package version requirement satisfied (v1.6.1 &gt; v1.4.0)
- ✓ No linting issues (project has no lint scripts configured)
- ✓ No test suite to run (project has no test scripts configured)
- ✓ All lock files updated correctly
- ✓ Existing code structure preserved

### Web Analytics Features

The Analytics component now automatically:
- Tracks page views
- Captures web vitals
- Supports route transitions in Astro
- Sends data to Vercel for analysis

No additional configuration is needed - the component works out of the box alongside the existing SpeedInsights integration.

Co-authored-by: Vercel &lt;vercel[bot]@users.noreply.github.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
+    "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "astro": "^5.16.9",
     "astro-icon": "^1.1.5",
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import SpeedInsights from '@vercel/speed-insights/astro';
+import Analytics from '@vercel/analytics/astro';
 
 interface Props {
   title: string;
@@ -25,6 +26,8 @@ const { title, description = 'AI-powered background removal. 100% private, runs
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
+
+    <Analytics />
   </head>
   <body class="min-h-screen bg-white text-gray-900 font-sans antialiased">
     <slot />
