Install Vercel Web Analytics - #4
Merged
Merged
Conversation
# Vercel Web Analytics Implementation Report ## Summary Successfully installed and configured Vercel Web Analytics for the leetcode-visualiser project. ## Changes Made ### Modified Files: - **app/templates/base.html** - Added Vercel Web Analytics script tags ## Implementation Details ### Framework Analysis This project is a FastAPI Python application that serves HTML templates using Jinja2. All pages extend from `base.html`, making it the ideal location for analytics integration. ### Analytics Integration Approach Following the official Vercel Analytics documentation (https://vercel.com/docs/analytics/quickstart), I implemented the vanilla JavaScript approach recommended for HTML/non-framework applications: 1. **Analytics Initialization Script**: Added the `window.va` function initialization that queues analytics events before the main script loads 2. **Analytics Script Import**: Added the deferred script tag pointing to `/_vercel/insights/script.js`, which is the Vercel-managed analytics endpoint ### Code Added to base.html ```html <!-- Vercel Web Analytics --> <script> window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); }; </script> <script defer src="/_vercel/insights/script.js"></script> ``` The script was placed in the `<head>` section after Google Analytics and before the theme initialization script, ensuring proper load order. ## Key Points 1. **No npm package installation needed**: For Python/FastAPI applications serving HTML templates, the vanilla JavaScript approach with CDN script is the correct implementation method. No `@vercel/analytics` npm package is required. 2. **Placement**: The analytics code is in `base.html`, which is extended by all other templates (`index.html`, `compare.html`), ensuring analytics tracking across all pages. 3. **Performance**: The `defer` attribute ensures the analytics script doesn't block page rendering. 4. **Compatibility**: This implementation is framework-agnostic and works with the existing FastAPI/Jinja2 setup without any additional dependencies. ## Next Steps for Deployment After deploying to Vercel: 1. Enable Web Analytics in the Vercel dashboard for this project 2. Visit the deployed site and check browser Network tab for requests to `/_vercel/insights/` endpoints 3. Analytics data will appear in the Vercel dashboard after the feature is enabled ## Verification The HTML structure remains valid with proper closing tags, and the analytics script follows Vercel's official documentation for non-framework HTML applications. Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Contributor
Author
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds Vercel Web Analytics tracking to the FastAPI/Jinja2 app by injecting the Vercel Insights snippet into the shared base.html template so it loads on all pages.
Changes:
- Add
window.vaqueue initializer to support early event buffering - Load the Vercel-managed Insights script via
/_vercel/insights/script.jswithdefer
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+96
to
+100
| <!-- Vercel Web Analytics --> | ||
| <script> | ||
| window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); }; | ||
| </script> | ||
| <script defer src="/_vercel/insights/script.js"></script> |
This branch was successfully deployed
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 Implementation Report
Summary
Successfully installed and configured Vercel Web Analytics for the leetcode-visualiser project.
Changes Made
Modified Files:
Implementation Details
Framework Analysis
This project is a FastAPI Python application that serves HTML templates using Jinja2. All pages extend from
base.html, making it the ideal location for analytics integration.Analytics Integration Approach
Following the official Vercel Analytics documentation (https://vercel.com/docs/analytics/quickstart), I implemented the vanilla JavaScript approach recommended for HTML/non-framework applications:
window.vafunction initialization that queues analytics events before the main script loads/_vercel/insights/script.js, which is the Vercel-managed analytics endpointCode Added to base.html
The script was placed in the
<head>section after Google Analytics and before the theme initialization script, ensuring proper load order.Key Points
No npm package installation needed: For Python/FastAPI applications serving HTML templates, the vanilla JavaScript approach with CDN script is the correct implementation method. No
@vercel/analyticsnpm package is required.Placement: The analytics code is in
base.html, which is extended by all other templates (index.html,compare.html), ensuring analytics tracking across all pages.Performance: The
deferattribute ensures the analytics script doesn't block page rendering.Compatibility: This implementation is framework-agnostic and works with the existing FastAPI/Jinja2 setup without any additional dependencies.
Next Steps for Deployment
After deploying to Vercel:
/_vercel/insights/endpointsVerification
The HTML structure remains valid with proper closing tags, and the analytics script follows Vercel's official documentation for non-framework HTML applications.
View Project · Web Analytics
Created by shubhamlohan99-1076 with Vercel Agent