Install Vercel Web Analytics - #2
Draft
vercel[bot] wants to merge 1 commit into
Draft
Conversation
# 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: `<script defer src="/_vercel/insights/script.js"></script>` - Both scripts are added to the `<head>` 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 <vercel[bot]@users.noreply.github.com>
Author
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
What Was Implemented
Clarified Existing Analytics Setup
https://cdn.vercel-insights.com/v1/script.js)Added Vercel Web Analytics
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };<script defer src="/_vercel/insights/script.js"></script><head>section of the main layout templatePackage Installation
@vercel/analyticspackage (v2.0.1) was already present in package.jsonnpm installto ensure all dependencies are properly installedImplementation Details
The implementation follows the recommended approach for static HTML sites from the Vercel documentation:
window.vaq) to buffer analytics calls/_vercel/insights/script.js(this path is automatically configured by Vercel when Web Analytics is enabled in the dashboard)webc:keepattribute to ensure they're included in the final HTML outputDifferences: Web Analytics vs Speed Insights
Both products work together to provide comprehensive site monitoring and are now properly configured in this project.
Testing
npm run builddist/index.htmlNext Steps
To activate Web Analytics:
vercel deploy/_vercel/insights/viewNotes
/_vercel/insights/script.jspath is automatically configured by Vercel upon deploymentView Project · Web Analytics
Created by swanson-2669 with Vercel Agent