From b614df62a61046df0b72044b6276c018ad22db7b Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 26 Mar 2026 19:40:24 +0000 Subject: [PATCH] Install Vercel Web Analytics # Vercel Web Analytics Installation Report ## Summary Successfully installed and configured Vercel Web Analytics for this Eleventy-based project following the latest official documentation from https://vercel.com/docs/analytics/quickstart. ## Changes Made ### Modified Files - **src/_layouts/main.webc** - Added Vercel Web Analytics initialization scripts ### What Was Implemented 1. **Clarified Existing Analytics Setup** - The project already had Vercel Speed Insights installed (script: `https://cdn.vercel-insights.com/v1/script.js`) - Updated the comment to clearly label it as "Speed Insights" to avoid confusion 2. **Added Vercel Web Analytics** - Added the analytics queue initialization: `window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };` - Added the Web Analytics script loader: `` - Both scripts are added to the `` section of the main layout template 3. **Package Installation** - The `@vercel/analytics` package (v2.0.1) was already present in package.json - Ran `npm install` to ensure all dependencies are properly installed - No changes to package.json or package-lock.json were needed ## Implementation Details The implementation follows the recommended approach for static HTML sites from the Vercel documentation: - Uses the inline script initialization method which creates a queue system (`window.vaq`) to buffer analytics calls - The deferred script loads asynchronously from `/_vercel/insights/script.js` (this path is automatically configured by Vercel when Web Analytics is enabled in the dashboard) - Both scripts use `webc:keep` attribute to ensure they're included in the final HTML output ## Differences: Web Analytics vs Speed Insights - **Speed Insights** (already installed): Tracks performance metrics like Core Web Vitals and page load times - **Web Analytics** (newly added): Tracks visitor behavior including page views, unique visitors, referrers, demographics, and custom events Both products work together to provide comprehensive site monitoring and are now properly configured in this project. ## Testing - Build completed successfully: `npm run build` - Verified that analytics scripts are present in the generated HTML output at `dist/index.html` - Both Speed Insights and Web Analytics scripts are properly included in production builds ## Next Steps To activate Web Analytics: 1. Enable Web Analytics in the Vercel dashboard (Analytics section of your project) 2. Deploy the site using `vercel deploy` 3. Verify analytics are working by checking the Network tab in browser DevTools for requests to `/_vercel/insights/view` ## Notes - The implementation is framework-agnostic and works with Eleventy's WebC template system - Analytics scripts are only minimal overhead (~2KB gzipped) - Both analytics products respect user privacy and don't use cookies - The `/_vercel/insights/script.js` path is automatically configured by Vercel upon deployment Co-authored-by: Vercel --- src/_layouts/main.webc | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/_layouts/main.webc b/src/_layouts/main.webc index eed4632..cb7866f 100644 --- a/src/_layouts/main.webc +++ b/src/_layouts/main.webc @@ -57,8 +57,14 @@ - + + + + +