# Add Vercel Web Analytics integration \(\#50\) · screen/col

[View on GitCafe](https://git.cafe/screen/col/commit/8f997d90f5cc208f34ba35aee0dfc4e5b805eca2)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

Requested revision: 8f997d90f5cc208f34ba35aee0dfc4e5b805eca2

Requested commit: 8f997d90f5cc208f34ba35aee0dfc4e5b805eca2

Commit: 8f997d90f5cc208f34ba35aee0dfc4e5b805eca2

Tree: 51baa3c43b36259c7eefcc6571a1bb814337cc74

Author: vercel\[bot\]

Committer: GitHub

## Message

```
Add Vercel Web Analytics integration (#50)

## Vercel Web Analytics Integration

Successfully installed and configured Vercel Web Analytics for the Col project following the latest official documentation from https://vercel.com/docs/analytics/quickstart.

### Changes Made

**Modified Files:**

1. **app/layout.tsx**
   - Added import: `import { Analytics } from "@vercel/analytics/next";`
   - Added `<Analytics />` component inside the `<body>` tag, after `<SiteNotice />`
   - Follows Next.js App Router best practices by placing the component at the root layout level

2. **package.json**
   - Added `@vercel/analytics` version `^2.0.1` to dependencies

3. **pnpm-lock.yaml**
   - Updated with the new dependency and its resolved version

### Implementation Details

- **Framework**: Next.js 16.3.5 with App Router
- **Package Manager**: pnpm
- **Analytics Package Version**: @vercel/analytics@2.0.1

The implementation follows Vercel's official documentation for Next.js App Router, where the `<Analytics />` component is added to the root layout file (`app/layout.tsx`) inside the `<body>` tag. This ensures analytics tracking is available across all pages of the application.

### Verification Steps Completed

✓ TypeScript type checking passed (`pnpm run typecheck`)
✓ Build completed successfully (`pnpm run build`)
✓ All 45 tests passed (`pnpm test`)
✓ No linting errors introduced
✓ Lock file properly updated with new dependency

### Next Steps

To enable analytics data collection:
1. Deploy this application to Vercel
2. Navigate to the Vercel dashboard
3. Select the project and go to Analytics in the sidebar
4. Click "Enable" to activate Web Analytics
5. After deployment, verify analytics are working by checking the browser Network tab for requests to `/_vercel/insights/*`

The analytics component will automatically start collecting page view data once enabled in the Vercel dashboard.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
```

## Parents

- [89e2fe7cc6a0021981fa3c7ab1655f8b2f98baaa](https://git.cafe/screen/col/commit/89e2fe7cc6a0021981fa3c7ab1655f8b2f98baaa?format=markdown)

[Source at this commit](https://git.cafe/screen/col/tree/8f997d90f5cc208f34ba35aee0dfc4e5b805eca2?format=markdown)