Install Vercel Web Analytics#21
Draft
vercel[bot] wants to merge 1 commit into
Draft
Conversation
Implemented Vercel Web Analytics for this project following the official documentation. ## Changes Made: ### 1. Package Installation - Added `@vercel/[email protected]` to dependencies using pnpm - Package installed successfully and lock file updated ### 2. Analytics Initialization (src/main.js) - Imported `inject` function from `@vercel/analytics` - Added analytics initialization call before other app initialization - The `inject()` function automatically detects the environment and starts tracking page views ### 3. Content Security Policy Update (index.html) - Updated CSP `script-src` directive to allow Vercel Analytics scripts - Added `https://cdn.vercel-insights.com` and `https://vercel-insights.com` to script sources - This enables the analytics scripts to load and execute properly while maintaining security ## Implementation Details: For this vanilla JavaScript + Vite project, I used the `inject()` method from `@vercel/analytics` as recommended in the official documentation for non-framework projects. This is the appropriate approach for: - Vanilla JS projects - Vite-based applications without React/Vue/etc. - Projects that bundle their JavaScript The analytics will: - Automatically track page views - Work in production mode when deployed to Vercel - Respect the existing CSP configuration - Not interfere with existing functionality ## Verification: ✅ Build completed successfully (no errors) ✅ All tests pass (4/4 tests passing) ✅ Lock file properly updated (pnpm-lock.yaml) ✅ CSP configuration allows analytics scripts while maintaining security ## Next Steps: To enable Web Analytics on Vercel: 1. Deploy this project to Vercel 2. Go to your project dashboard on Vercel 3. Navigate to Analytics tab 4. Enable Web Analytics 5. Data will start appearing after deployment and user visits The analytics will automatically begin collecting data once the project is deployed and analytics is enabled in the Vercel dashboard. 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.
Implemented Vercel Web Analytics for this project following the official documentation.
Changes Made:
1. Package Installation
@vercel/[email protected]to dependencies using pnpm2. Analytics Initialization (src/main.js)
injectfunction from@vercel/analyticsinject()function automatically detects the environment and starts tracking page views3. Content Security Policy Update (index.html)
script-srcdirective to allow Vercel Analytics scriptshttps://cdn.vercel-insights.comandhttps://vercel-insights.comto script sourcesImplementation Details:
For this vanilla JavaScript + Vite project, I used the
inject()method from@vercel/analyticsas recommended in the official documentation for non-framework projects. This is the appropriate approach for:The analytics will:
Verification:
✅ Build completed successfully (no errors)
✅ All tests pass (4/4 tests passing)
✅ Lock file properly updated (pnpm-lock.yaml)
✅ CSP configuration allows analytics scripts while maintaining security
Next Steps:
To enable Web Analytics on Vercel:
The analytics will automatically begin collecting data once the project is deployed and analytics is enabled in the Vercel dashboard.
View Project · Web Analytics
Created by ikerperez12 with Vercel Agent