Install Vercel Web Analytics

Implemented Vercel Web Analytics for this static HTML project.

## What was implemented:

### 1. Installed @vercel/analytics package
- Added `@vercel/analytics` version ^2.0.1 to the project dependencies
- Used npm to install the package as specified in package.json

### 2. Added Web Analytics script to public/index.html
- Fetched the latest installation instructions from https://vercel.com/docs/analytics/quickstart
- Identified this as a vanilla HTML/JavaScript static site (not using any framework)
- Added the appropriate analytics script tags according to Vercel's documentation for HTML sites:
  - Added initialization script: `window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };`
  - Added deferred script tag: `<script defer src="/_vercel/insights/script.js"></script>`
- Placed the analytics scripts at the end of the body tag, right after the existing Speed Insights scripts

### 3. Updated dependencies and lock files
- package.json now includes @vercel/analytics in dependencies
- package-lock.json was automatically updated by npm install
- Both files are staged for the pull request

## Implementation choices:

- **Framework detection**: Examined the project structure and confirmed it's a static HTML site with no build framework
- **Script placement**: Added Web Analytics scripts at the end of the body tag to avoid blocking page load, following the same pattern as the existing Speed Insights implementation
- **Documentation source**: Used official Vercel documentation (fetched fresh from https://vercel.com/docs/analytics/quickstart) to ensure the most up-to-date installation method
- **Vanilla HTML approach**: Used the HTML/JavaScript implementation method as specified in the docs for static sites

## Testing:

- Verified build script runs successfully (static site, no compilation needed)
- Verified lint script runs successfully (no linting configured, but script executes)
- Confirmed package.json and package-lock.json were properly updated with the new dependency
- Verified the HTML structure remains valid with the new script tags

## Next steps:

After this PR is merged and deployed to Vercel:
1. Enable Web Analytics in the Vercel dashboard by navigating to the Analytics section and clicking the Enable button
2. Verify analytics are working by checking browser Network tab for `/_vercel/insights/view` requests
3. Monitor the analytics dashboard to see visitor data

The project already had Speed Insights configured, and Web Analytics has been added following the same pattern for consistency.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
This commit is contained in:
Vercel committed 2026-08-31 23:26:06 +00:00
1 parent 450234b85f
commit c973da26b3
3 files changed
+50

No files matched your search

+43
View File
@@ -9,9 +9,52 @@
"version": "1.0.0",
"license": "CC0-1.0",
"dependencies": {
"@vercel/analytics": "^2.0.1",
"@vercel/speed-insights": "^1.0.15"
}
},
"node_modules/@vercel/analytics": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
"integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==",
"license": "MIT",
"peerDependencies": {
"@remix-run/react": "^2",
"@sveltejs/kit": "^1 || ^2",
"next": ">= 13",
"nuxt": ">= 3",
"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
},
"nuxt": {
"optional": true
},
"react": {
"optional": true
},
"svelte": {
"optional": true
},
"vue": {
"optional": true
},
"vue-router": {
"optional": true
}
}
},
"node_modules/@vercel/speed-insights": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.3.1.tgz",
+1
View File
@@ -14,6 +14,7 @@
},
"license": "CC0-1.0",
"dependencies": {
"@vercel/analytics": "^2.0.1",
"@vercel/speed-insights": "^1.0.15"
}
}
+6
View File
@@ -100,5 +100,11 @@
window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>
<!-- Vercel Web Analytics -->
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
</body>
</html>