-
Notifications
You must be signed in to change notification settings - Fork 0
Enable Vercel Web Analytics Setup #4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
vercel
wants to merge
1
commit into
main
Choose a base branch
from
vercel/enable-vercel-web-analytics-se-7bna7t
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,6 @@ | ||
| # Genesis-Conductor | ||
| An AI-native application scaffolding engine. The official open-source implementation of the "Master Control Program" for transforming business ideas into production-ready code. | ||
|
|
||
| ## Quick Links | ||
|
|
||
| - [Vercel Web Analytics Integration Guide](./docs/vercel-web-analytics-guide.md) - Learn how to add analytics to your generated applications |
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
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,360 @@ | ||||||
| # Getting Started with Vercel Web Analytics | ||||||
|
|
||||||
| This guide will help you get started with using Vercel Web Analytics on your project, showing you how to enable it, add the package to your project, deploy your app to Vercel, and view your data in the dashboard. | ||||||
|
|
||||||
| **Select your framework to view instructions on using the Vercel Web Analytics in your project**. | ||||||
|
|
||||||
| ## Prerequisites | ||||||
|
|
||||||
| - A Vercel account. If you don't have one, you can [sign up for free](https://vercel.com/signup). | ||||||
| - A Vercel project. If you don't have one, you can [create a new project](https://vercel.com/new). | ||||||
| - The Vercel CLI installed. If you don't have it, you can install it using the following command: | ||||||
| ```bash | ||||||
| # Using pnpm | ||||||
| pnpm i vercel | ||||||
|
|
||||||
| # Using yarn | ||||||
| yarn add vercel | ||||||
|
|
||||||
| # Using npm | ||||||
| npm install vercel | ||||||
|
|
||||||
| # Using bun | ||||||
| bun add vercel | ||||||
| ``` | ||||||
|
|
||||||
| ## Enable Web Analytics in Vercel | ||||||
|
|
||||||
| On the [Vercel dashboard](/dashboard), select your Project and then click the **Analytics** tab and click **Enable** from the dialog. | ||||||
|
|
||||||
| > **💡 Note:** Enabling Web Analytics will add new routes (scoped at `/_vercel/insights/*`) | ||||||
| > after your next deployment. | ||||||
|
|
||||||
| ## Add `@vercel/analytics` to your project | ||||||
|
|
||||||
| Using the package manager of your choice, add the `@vercel/analytics` package to your project: | ||||||
|
|
||||||
| ```bash | ||||||
| # Using pnpm | ||||||
| pnpm add @vercel/analytics | ||||||
|
|
||||||
| # Using yarn | ||||||
| yarn add @vercel/analytics | ||||||
|
|
||||||
| # Using npm | ||||||
| npm install @vercel/analytics | ||||||
|
|
||||||
| # Using bun | ||||||
| bun add @vercel/analytics | ||||||
| ``` | ||||||
|
|
||||||
| ## Framework-Specific Integration | ||||||
|
|
||||||
| ### Next.js (Pages Directory) | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support. | ||||||
|
|
||||||
| If you are using the `pages` directory, add the following code to your main app file: | ||||||
|
|
||||||
| ```tsx | ||||||
| // pages/_app.tsx | ||||||
| import type { AppProps } from "next/app"; | ||||||
| import { Analytics } from "@vercel/analytics/next"; | ||||||
|
|
||||||
| function MyApp({ Component, pageProps }: AppProps) { | ||||||
| return ( | ||||||
| <> | ||||||
| <Component {...pageProps} /> | ||||||
| <Analytics /> | ||||||
| </> | ||||||
| ); | ||||||
| } | ||||||
|
|
||||||
| export default MyApp; | ||||||
| ``` | ||||||
|
|
||||||
| ### Next.js (App Directory) | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support. | ||||||
|
|
||||||
| Add the following code to the root layout: | ||||||
|
|
||||||
| ```tsx | ||||||
| // app/layout.tsx | ||||||
| import { Analytics } from "@vercel/analytics/next"; | ||||||
|
|
||||||
| export default function RootLayout({ | ||||||
| children, | ||||||
| }: { | ||||||
| children: React.ReactNode; | ||||||
| }) { | ||||||
| return ( | ||||||
| <html lang="en"> | ||||||
| <head> | ||||||
| <title>Your App</title> | ||||||
| </head> | ||||||
| <body> | ||||||
| {children} | ||||||
| <Analytics /> | ||||||
| </body> | ||||||
| </html> | ||||||
| ); | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| ### Remix | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering a seamless integration with Remix, including route detection. | ||||||
|
|
||||||
| Add the following code to your root file: | ||||||
|
|
||||||
| ```tsx | ||||||
| // app/root.tsx | ||||||
| import { | ||||||
| Links, | ||||||
| LiveReload, | ||||||
| Meta, | ||||||
| Outlet, | ||||||
| Scripts, | ||||||
| ScrollRestoration, | ||||||
| } from "@remix-run/react"; | ||||||
| import { Analytics } from "@vercel/analytics/remix"; | ||||||
|
|
||||||
| export default function App() { | ||||||
| return ( | ||||||
| <html lang="en"> | ||||||
| <head> | ||||||
| <meta charSet="utf-8" /> | ||||||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||||||
| <Meta /> | ||||||
| <Links /> | ||||||
| </head> | ||||||
| <body> | ||||||
| <Analytics /> | ||||||
| <Outlet /> | ||||||
| <ScrollRestoration /> | ||||||
| <Scripts /> | ||||||
| <LiveReload /> | ||||||
| </body> | ||||||
| </html> | ||||||
| ); | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| ### Nuxt | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering more seamless integration with Nuxt, including route support. | ||||||
|
|
||||||
| Add the following code to your main component: | ||||||
|
|
||||||
| ```vue | ||||||
| <!-- app.vue --> | ||||||
| <script setup lang="ts"> | ||||||
| import { Analytics } from '@vercel/analytics/nuxt'; | ||||||
| </script> | ||||||
|
|
||||||
| <template> | ||||||
| <Analytics /> | ||||||
| <NuxtPage /> | ||||||
| </template> | ||||||
| ``` | ||||||
|
|
||||||
| ### SvelteKit | ||||||
|
|
||||||
| The `injectAnalytics` function is a wrapper around the tracking script, offering more seamless integration with SvelteKit, including route support. | ||||||
|
|
||||||
| Add the following code to the main layout: | ||||||
|
|
||||||
| ```ts | ||||||
| // src/routes/+layout.ts | ||||||
| import { dev } from "$app/environment"; | ||||||
| import { injectAnalytics } from "@vercel/analytics/sveltekit"; | ||||||
|
|
||||||
| injectAnalytics({ mode: dev ? "development" : "production" }); | ||||||
| ``` | ||||||
|
|
||||||
| ### Astro | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering more seamless integration with Astro, including route support. | ||||||
|
|
||||||
| Add the following code to your base layout: | ||||||
|
|
||||||
| ```astro | ||||||
| --- | ||||||
| import Analytics from '@vercel/analytics/astro'; | ||||||
| --- | ||||||
|
|
||||||
| <html lang="en"> | ||||||
| <head> | ||||||
| <meta charset="utf-8" /> | ||||||
| <Analytics /> | ||||||
| </head> | ||||||
| <body> | ||||||
| <slot /> | ||||||
| </body> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| > **💡 Note:** The `Analytics` component is available in version `@vercel/[email protected]` and later. | ||||||
| > If you are using an earlier version, you must configure the `webAnalytics` property of the Vercel adapter in your `astro.config.mjs` file as shown below. | ||||||
| > For further information, see the [Astro adapter documentation](https://docs.astro.build/en/guides/integrations-guide/vercel/#webanalytics). | ||||||
|
|
||||||
| ```ts | ||||||
| // astro.config.mjs | ||||||
| import { defineConfig } from "astro/config"; | ||||||
| import vercel from "@astrojs/vercel/serverless"; | ||||||
|
|
||||||
| export default defineConfig({ | ||||||
| output: "server", | ||||||
| adapter: vercel({ | ||||||
| webAnalytics: { | ||||||
| enabled: true, // set to false when using @vercel/[email protected] | ||||||
|
||||||
| }, | ||||||
| }), | ||||||
| }); | ||||||
| ``` | ||||||
|
|
||||||
| ### Plain HTML | ||||||
|
|
||||||
| For plain HTML sites, you can add the following script to your `.html` files: | ||||||
|
|
||||||
| ```html | ||||||
| <!-- index.html --> | ||||||
| <script> | ||||||
| window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); }; | ||||||
| </script> | ||||||
| <script defer src="/_vercel/insights/script.js"></script> | ||||||
| ``` | ||||||
|
|
||||||
| > **💡 Note:** When using the HTML implementation, there is no need to install the | ||||||
| > `@vercel/analytics` package. However, there is no route support. | ||||||
|
|
||||||
| ### Other Frameworks | ||||||
|
|
||||||
| Import the `inject` function from the package, which will add the tracking script to your app. **This should only be called once in your app, and must run in the client**. | ||||||
|
|
||||||
| > **💡 Note:** There is no route support with the `inject` function. | ||||||
|
|
||||||
| Add the following code to your main app file: | ||||||
|
|
||||||
| ```ts | ||||||
| // main.ts | ||||||
| import { inject } from "@vercel/analytics"; | ||||||
|
|
||||||
| inject(); | ||||||
| ``` | ||||||
|
|
||||||
| ### Create React App | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering more seamless integration with React. | ||||||
|
|
||||||
| > **💡 Note:** When using the plain React implementation, there is no route support. | ||||||
|
|
||||||
| Add the following code to the main app file: | ||||||
|
|
||||||
| ```tsx | ||||||
| // App.tsx | ||||||
| import { Analytics } from "@vercel/analytics/react"; | ||||||
|
|
||||||
| export default function App() { | ||||||
| return ( | ||||||
| <div> | ||||||
| {/* ... */} | ||||||
| <Analytics /> | ||||||
| </div> | ||||||
| ); | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| ### Vue | ||||||
|
|
||||||
| The `Analytics` component is a wrapper around the tracking script, offering more seamless integration with Vue. | ||||||
|
|
||||||
| > **💡 Note:** Route support is automatically enabled if you're using `vue-router`. | ||||||
|
|
||||||
| Add the following code to your main component: | ||||||
|
|
||||||
| ```vue | ||||||
| <!-- src/App.vue --> | ||||||
| <script setup lang="ts"> | ||||||
| import { Analytics } from '@vercel/analytics/vue'; | ||||||
| </script> | ||||||
|
|
||||||
| <template> | ||||||
| <Analytics /> | ||||||
| <!-- your content --> | ||||||
| </template> | ||||||
| ``` | ||||||
|
|
||||||
| ## Deploy Your App to Vercel | ||||||
|
|
||||||
| Deploy your app using the following command: | ||||||
|
|
||||||
| ```bash | ||||||
| vercel deploy | ||||||
| ``` | ||||||
|
|
||||||
| If you haven't already, we also recommend [connecting your project's Git repository](/docs/git#deploying-a-git-repository), | ||||||
| which will enable Vercel to deploy your latest commits to main without terminal commands. | ||||||
|
|
||||||
| Once your app is deployed, it will start tracking visitors and page views. | ||||||
|
|
||||||
| > **💡 Note:** If everything is set up properly, you should be able to see a Fetch/XHR | ||||||
| > request in your browser's Network tab from `/_vercel/insights/view` when you | ||||||
| > visit any page. | ||||||
|
|
||||||
| ## View Your Data in the Dashboard | ||||||
|
|
||||||
| Once your app is deployed, and users have visited your site, you can view your data in the dashboard. | ||||||
|
|
||||||
| To do so, go to your [dashboard](/dashboard), select your project, and click the **Analytics** tab. | ||||||
|
|
||||||
| After a few days of visitors, you'll be able to start exploring your data by viewing and [filtering](/docs/analytics/filtering) the panels. | ||||||
|
|
||||||
| Users on Pro and Enterprise plans can also add [custom events](/docs/analytics/custom-events) to their data to track user interactions such as button clicks, form submissions, or purchases. | ||||||
|
|
||||||
| Learn more about how Vercel supports [privacy and data compliance standards](/docs/analytics/privacy-policy) with Vercel Web Analytics. | ||||||
|
|
||||||
| ## Next Steps | ||||||
|
|
||||||
| Now that you have Vercel Web Analytics set up, you can explore the following topics to learn more: | ||||||
|
|
||||||
| - [Learn how to use the `@vercel/analytics` package](/docs/analytics/package) | ||||||
| - [Learn how to set custom events](/docs/analytics/custom-events) | ||||||
| - [Learn about filtering data](/docs/analytics/filtering) | ||||||
| - [Read about privacy and compliance](/docs/analytics/privacy-policy) | ||||||
| - [Explore pricing](/docs/analytics/limits-and-pricing) | ||||||
| - [Troubleshooting](/docs/analytics/troubleshooting) | ||||||
|
|
||||||
| ## Troubleshooting | ||||||
|
|
||||||
| ### Script Not Loading | ||||||
|
|
||||||
| If you're not seeing the analytics script in your Network tab: | ||||||
|
|
||||||
| 1. Ensure you've enabled Web Analytics in the Vercel dashboard | ||||||
| 2. Check that the `@vercel/analytics` package is properly installed | ||||||
| 3. Verify that the Analytics component/function is called in your app | ||||||
| 4. Make sure your app is deployed to Vercel (not running locally) | ||||||
|
|
||||||
| ### Missing Events | ||||||
|
|
||||||
| If you're not seeing any data in your dashboard: | ||||||
|
|
||||||
| 1. Wait a few minutes for data to appear after deployment | ||||||
| 2. Check that you've had actual visitors to your site | ||||||
| 3. Open your site in an incognito window to ensure tracking is not blocked | ||||||
| 4. Check your browser's privacy settings | ||||||
|
|
||||||
| ### Performance Impact | ||||||
|
|
||||||
| The Vercel Web Analytics script is designed to be lightweight and have minimal performance impact on your application. The script is loaded asynchronously and does not block page rendering. | ||||||
|
|
||||||
| ## Integration with Genesis-Conductor | ||||||
|
|
||||||
| When using Genesis-Conductor to scaffold your application, you can include Vercel Web Analytics by: | ||||||
|
|
||||||
| 1. Specifying `vercel-analytics` as a dependency during project generation | ||||||
| 2. Genesis-Conductor will automatically add the appropriate Analytics component to your chosen framework | ||||||
|
||||||
| 2. Genesis-Conductor will automatically add the appropriate Analytics component to your chosen framework | |
| 2. After generation, add the appropriate Analytics component to your chosen framework following the instructions above |
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The charset attribute value should use double quotes for consistency with HTML attribute quoting conventions in the rest of the document.