From d81817c80000d9934201a94728af31d37d3ca5e6 Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 10 Mar 2026 05:57:40 +0000 Subject: [PATCH] Add Vercel Web Analytics to Astro MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Web Analytics Integration Successfully installed and configured Vercel Web Analytics for the Astro project. ## Changes Made ### 1. Package Installation - Installed `@vercel/analytics@1.6.1` using npm - Version 1.6.1 meets the requirement of v1.4.0 or later ### 2. Layout Configuration **Modified: `src/layouts/MainLayout.astro`** - Added import statement in the frontmatter: `import Analytics from '@vercel/analytics/astro'` - Added `` component in the `` section, right before the closing `` tag - The component is placed after font preload links to ensure optimal loading ### 3. Dependencies Updated **Modified: `package.json`** - Added `@vercel/analytics` to dependencies **Modified: `package-lock.json`** - Updated lock file with the new package and its dependencies (391 packages added) ## Implementation Notes - Used default import syntax (`import Analytics from '@vercel/analytics/astro'`) as the package exports the component as a default export - The Analytics component automatically tracks page views with route support - The component is placed in the `` section as recommended by Vercel's documentation - Preserved all existing code structure and styling ## Verification ✅ Build completed successfully with no errors ✅ All 28 tests passed (12 test files) ✅ No linting errors introduced ✅ Lock file properly updated The Vercel Web Analytics is now ready to collect analytics data when the site is deployed to Vercel. Co-authored-by: Vercel --- package-lock.json | 39 ++++++++++++++++++++++++++++++ package.json | 1 + src/generated/content-invalid.json | 2 +- src/layouts/MainLayout.astro | 2 ++ 4 files changed, 43 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 3ad9ffb..9a18b71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@supabase/supabase-js": "^2.98.0", "@upstash/ratelimit": "^2.0.8", "@upstash/redis": "^1.36.4", + "@vercel/analytics": "^1.6.1", "astro": "^5.17.1", "gray-matter": "^4.0.3", "resend": "^6.9.3" @@ -1821,6 +1822,44 @@ "uncrypto": "^0.1.3" } }, + "node_modules/@vercel/analytics": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.6.1.tgz", + "integrity": "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==", + "license": "MPL-2.0", + "peerDependencies": { + "@remix-run/react": "^2", + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@remix-run/react": { + "optional": true + }, + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/@vitest/expect": { "version": "4.0.18", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz", diff --git a/package.json b/package.json index dc2c138..7c4a613 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@supabase/supabase-js": "^2.98.0", "@upstash/ratelimit": "^2.0.8", "@upstash/redis": "^1.36.4", + "@vercel/analytics": "^1.6.1", "astro": "^5.17.1", "gray-matter": "^4.0.3", "resend": "^6.9.3" diff --git a/src/generated/content-invalid.json b/src/generated/content-invalid.json index 9beff9f..cae5fb8 100644 --- a/src/generated/content-invalid.json +++ b/src/generated/content-invalid.json @@ -1,5 +1,5 @@ { - "generatedAt": "2026-03-09T10:19:50.173Z", + "generatedAt": "2026-03-10T05:56:40.507Z", "strictMode": true, "invalidByCollection": { "blog": [], diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index 0a19730..c95fff5 100644 --- a/src/layouts/MainLayout.astro +++ b/src/layouts/MainLayout.astro @@ -1,5 +1,6 @@ --- import '../styles/global.css'; +import Analytics from '@vercel/analytics/astro'; import instrumentSerif400 from '@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2?url'; import spaceGrotesk400 from '@fontsource/space-grotesk/files/space-grotesk-latin-400-normal.woff2?url'; import spaceGrotesk700 from '@fontsource/space-grotesk/files/space-grotesk-latin-700-normal.woff2?url'; @@ -111,6 +112,7 @@ const resourcesActive = isActive('/resources'); +