Skip to content

Add Vercel Web Analytics setup guide#3

Merged
TehseenTech merged 1 commit into
mainfrom
vercel/vercel-web-analytics-setup-gui-9gz2jn
Mar 7, 2026
Merged

Add Vercel Web Analytics setup guide#3
TehseenTech merged 1 commit into
mainfrom
vercel/vercel-web-analytics-setup-gui-9gz2jn

Conversation

@vercel

@vercel vercel Bot commented Mar 7, 2026

Copy link
Copy Markdown

Vercel Web Analytics Implementation

Summary

Successfully implemented Vercel Web Analytics for the static HTML website tehseenraza.net.

Changes Made

Modified Files:

  • index.html - Added Vercel Web Analytics tracking scripts

Implementation Details

Since this is a plain HTML website (no framework like Next.js, React, Vue, etc.), I followed the HTML-specific instructions from the Vercel Web Analytics documentation.

What was added:

  1. Analytics initialization script - Added the window.va function that queues analytics events
  2. Vercel Insights script tag - Added deferred loading of the /_vercel/insights/script.js file

Both scripts were added to the <head> section of index.html, right after the closing </style> tag and before the closing </head> tag.

Code Added

<script>
    window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>

Next Steps

To complete the setup:

  1. Enable Web Analytics in Vercel Dashboard:

    • Go to your Vercel project dashboard
    • Click the "Analytics" tab
    • Click "Enable" to activate Web Analytics
    • This will add the required routes at /_vercel/insights/* on your next deployment

  2. Deploy to Vercel:

    • Run vercel deploy or push to your connected Git repository
    • Vercel will automatically deploy your changes

  3. Verify Installation:

    • After deployment, visit your website
    • Open browser DevTools > Network tab
    • Look for a Fetch/XHR request to /_vercel/insights/view
    • If present, analytics is working correctly

  4. View Analytics Data:

    • After users visit your site, go to your Vercel dashboard
    • Select your project
    • Click the "Analytics" tab to view visitor data

Notes

  • No package installation required for HTML sites
  • No route support available for plain HTML (unlike framework integrations)
  • The implementation uses the deferred loading pattern to avoid blocking page rendering
  • Analytics will only start tracking after Web Analytics is enabled in the Vercel dashboard and the site is deployed

View Project · Web Analytics

Created by tehseenraza955-1929 with Vercel Agent

@vercel
Add Vercel Web Analytics setup guide
902ffb3 
# Vercel Web Analytics Implementation

## Summary
Successfully implemented Vercel Web Analytics for the static HTML website tehseenraza.net.

## Changes Made

### Modified Files:
- **index.html** - Added Vercel Web Analytics tracking scripts

## Implementation Details

Since this is a plain HTML website (no framework like Next.js, React, Vue, etc.), I followed the HTML-specific instructions from the Vercel Web Analytics documentation.

### What was added:
1. **Analytics initialization script** - Added the window.va function that queues analytics events
2. **Vercel Insights script tag** - Added deferred loading of the `/_vercel/insights/script.js` file

Both scripts were added to the `<head>` section of index.html, right after the closing `</style>` tag and before the closing `</head>` tag.

## Code Added
```html
<script>
    window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
```

## Next Steps
To complete the setup:

1. **Enable Web Analytics in Vercel Dashboard:**
   - Go to your Vercel project dashboard
   - Click the "Analytics" tab
   - Click "Enable" to activate Web Analytics
   - This will add the required routes at `/_vercel/insights/*` on your next deployment

2. **Deploy to Vercel:**
   - Run `vercel deploy` or push to your connected Git repository
   - Vercel will automatically deploy your changes

3. **Verify Installation:**
   - After deployment, visit your website
   - Open browser DevTools > Network tab
   - Look for a Fetch/XHR request to `/_vercel/insights/view`
   - If present, analytics is working correctly

4. **View Analytics Data:**
   - After users visit your site, go to your Vercel dashboard
   - Select your project
   - Click the "Analytics" tab to view visitor data

## Notes
- No package installation required for HTML sites
- No route support available for plain HTML (unlike framework integrations)
- The implementation uses the deferred loading pattern to avoid blocking page rendering
- Analytics will only start tracking after Web Analytics is enabled in the Vercel dashboard and the site is deployed

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

vercel Bot commented Mar 7, 2026

Copy link
Copy Markdown
Author

Deployment failed with the following error:

There is no GitHub account connected to this Vercel account.

@vercel vercel Bot temporarily deployed to Preview – tehseenraza-net-scfq March 7, 2026 22:57 Inactive
@vercel

vercel Bot commented Mar 7, 2026

Copy link
Copy Markdown
Author

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tehseenraza-net-scfq Canceled Canceled Mar 7, 2026 10:57pm

@TehseenTech TehseenTech self-requested a review March 7, 2026 22:57
@TehseenTech TehseenTech marked this pull request as ready for review March 7, 2026 22:58
@qodo-code-review

qodo-code-review Bot commented Mar 7, 2026

Copy link
Copy Markdown

Review Summary by Qodo

Add Vercel Web Analytics tracking to website

✨ Enhancement

Grey Divider

Walkthroughs

Description 
• Added Vercel Web Analytics tracking scripts to HTML head
• Implemented analytics initialization and deferred script loading
• Enables visitor tracking without blocking page rendering
Diagram 
flowchart LR
  A["index.html"] -->|"Add analytics scripts"| B["Vercel Web Analytics"]
  B -->|"Track visitors"| C["Vercel Dashboard"]
Loading

Grey Divider

File Changes

1. index.html ✨ Enhancement +4/-0

Add Vercel Web Analytics tracking scripts

• Added window.va initialization function to queue analytics events
• Added deferred loading of /_vercel/insights/script.js script
• Both scripts inserted in <head> section after </style> tag
• Enables Web Analytics tracking without framework dependencies

index.html

Grey Divider

Qodo Logo

@qodo-code-review

qodo-code-review Bot commented Mar 7, 2026 •
edited
Loading

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (1) 📎 Requirement gaps (0)

Grey Divider


Remediation recommended

1. Ambiguous global window.va 📘 Rule violation ✓ Correctness
Description 
The PR adds globally accessible identifiers window.va and window.vaq that are short/ambiguous
and do not clearly express intent in the site’s public interface. This conflicts with the guideline
to avoid ambiguous identifiers in public APIs and can reduce maintainability/clarity for future
changes.
Code

index.html[R60-62]

+    <script>
+        window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+    </script>
Evidence 
Compliance ID 46173 requires descriptive names for public API elements; this change introduces a new
global function/queue on window named va/vaq, which is not self-descriptive in this codebase
and is part of the globally accessible interface.

Rule 46173: Avoid ambiguous or single-letter identifiers in public APIs
index.html[60-62]

Agent prompt 
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The PR introduces short/ambiguous global identifiers `window.va` and `window.vaq` which are part of the page’s public (global) interface.

## Issue Context
This snippet may be required by Vercel, so renaming `window.va` could break analytics. However, we can still improve compliance by documenting the intent and optionally exposing a descriptive alias for maintainability.

## Fix Focus Areas
- index.html[60-63]র্ত

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

2. Vercel script 404 risk 🐞 Bug ⛯ Reliability
Description 
index.html now unconditionally loads /_vercel/insights/script.js, which will 404 (and produce
console/network noise) when the site is served outside Vercel or before Web Analytics is enabled for
the project. This doesn’t break page rendering, but it can confuse local/dev workflows and any
non-Vercel hosting path.
Code

index.html[63]

+    <script defer src="/_vercel/insights/script.js"></script>
Evidence 
The page always requests a Vercel-reserved route (/_vercel/insights/...). If the site is not
served by Vercel (or Analytics isn’t enabled yet), that route won’t exist and the browser will fetch
a missing script (404). The repo also includes a Jekyll build workflow, suggesting contributors may
run/build the site outside Vercel, increasing the chance they’ll see this failure locally/elsewhere.

index.html[60-64]
.github/workflows/jekyll-docker.yml[1-20]

Agent prompt 
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`index.html` unconditionally loads a Vercel-specific script (`/_vercel/insights/script.js`). When served outside Vercel (or before Web Analytics is enabled), this will 404 and create confusing console/network noise.

## Issue Context
This repository includes workflows that imply contributors may build/run the site without Vercel, so the 404 is likely to be encountered during development.

## Fix Focus Areas
- index.html[60-64]
- .github/workflows/jekyll-docker.yml[1-20]
- README.md[1-1] (add a short hosting/dev note)

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

@TehseenTech TehseenTech merged commit 3d910b5 into main Mar 7, 2026
3 of 6 checks passed
@TehseenTech TehseenTech self-requested a review March 7, 2026 23:00
@TehseenTech TehseenTech self-requested a review March 7, 2026 23:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@TehseenTech TehseenTech TehseenTech approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@TehseenTech