From 040b146eadb14278193f6ef8557d8d5a737b1fe7 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Tue, 24 Feb 2026 12:36:24 +0000
Subject: [PATCH] Setup Vercel Web Analytics for Your Project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Implementation Report: Vercel Web Analytics Documentation

## Summary
Successfully created comprehensive documentation for Vercel Web Analytics in both Chinese and English, following the Docusaurus documentation structure and existing project conventions.

## Files Created

### 1. docs/vercel-web-analytics.md (Chinese Version)
- **Purpose**: Main documentation page for Vercel Web Analytics in Chinese
- **Location**: `docs/vercel-web-analytics.md`
- **Content**: Complete guide covering:
  - Prerequisites (Vercel account, project, CLI installation)
  - Enabling Web Analytics in Vercel dashboard
  - Installing @vercel/analytics package
  - Framework-specific integration instructions for:
    - Next.js (Pages Router and App Router)
    - Remix
    - Nuxt
    - SvelteKit
    - Astro
    - Create React App
    - Vue
    - Plain HTML
    - Other frameworks (generic inject function)
  - Deployment instructions
  - Viewing analytics data in dashboard
  - Next steps and additional resources

### 2. i18n/en/docusaurus-plugin-content-docs/current/vercel-web-analytics.md (English Version)
- **Purpose**: English translation of the Vercel Web Analytics documentation
- **Location**: `i18n/en/docusaurus-plugin-content-docs/current/vercel-web-analytics.md`
- **Content**: Same comprehensive guide as Chinese version, fully translated to English

## Implementation Details

### Key Features
1. **Responsive Tabs**: Used Docusaurus `Tabs` and `TabItem` components for:
   - Package manager selection (pnpm, yarn, npm, bun)
   - Language selection (TypeScript, JavaScript)

2. **Framework-Specific Sections**: Organized code examples by framework with proper syntax highlighting and file naming conventions

3. **MDX Compatibility**: Proper import statements for Tabs components at the top of each file

4. **Admonitions**: Used Docusaurus `:::note` syntax for important information and tips

5. **Code Highlighting**: Applied line highlighting using `{lineNumbers}` syntax in code blocks

6. **Consistent Styling**: Followed existing documentation patterns including:
   - Frontmatter with `sidebar_position: 5`
   - Proper heading hierarchy
   - Consistent link formatting
   - Proper Markdown formatting

### Technical Decisions

1. **Sidebar Position**: Set to position 5 to appear after existing documentation pages (intro, getting-started, core-concepts, faq)

2. **Tab Groups**: Used `groupId` attributes to sync tab selections across the page:
   - `package-manager`: For package manager selection
   - `language`: For TypeScript/JavaScript selection

3. **Localization**: Maintained consistent structure between Chinese and English versions for easier maintenance

4. **External Links**: Linked to official Vercel documentation for advanced topics (custom events, filtering, pricing, etc.)

## Verification Steps Completed

1. ✅ Installed dependencies with `npm install`
2. ✅ Built documentation with `npm run build` - Successfully built for both locales (zh-Hans and en)
3. ✅ Ran type checking with `npm run typecheck` - No TypeScript errors
4. ✅ Verified no unintended build artifacts were staged
5. ✅ Confirmed new files are properly tracked in git

## Build Output
- Chinese locale: Successfully compiled in ~18.70s
- English locale: Successfully compiled in ~16.89s
- Generated static files in `build/` directory
- No compilation errors or warnings

## Notes
- The documentation follows Docusaurus best practices for internationalization (i18n)
- All code examples are properly formatted with syntax highlighting
- The guide covers all major JavaScript frameworks commonly used with Vercel
- Links to external Vercel documentation are included for advanced features
- The implementation preserves existing code structure and only adds new documentation files

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 docs/vercel-web-analytics.md                  | 526 ++++++++++++++++++
 .../current/vercel-web-analytics.md           | 526 ++++++++++++++++++
 2 files changed, 1052 insertions(+)
 create mode 100644 docs/vercel-web-analytics.md
 create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/vercel-web-analytics.md

diff --git a/docs/vercel-web-analytics.md b/docs/vercel-web-analytics.md
new file mode 100644
index 0000000..086924f
--- /dev/null
+++ b/docs/vercel-web-analytics.md
@@ -0,0 +1,526 @@
+---
+sidebar_position: 5
+---
+
+# Vercel Web Analytics 入门指南
+
+本指南将帮助您在项目中开始使用 Vercel Web Analytics，展示如何启用它、将包添加到项目中、将应用部署到 Vercel 以及在仪表板中查看数据。
+
+**选择您的框架以查看在项目中使用 Vercel Web Analytics 的说明**。
+
+## 前提条件
+
+- 一个 Vercel 账户。如果您还没有，可以[免费注册](https://vercel.com/signup)。
+- 一个 Vercel 项目。如果您还没有，可以[创建新项目](https://vercel.com/new)。
+- 已安装 Vercel CLI。如果您还没有，可以使用以下命令安装：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs groupId="package-manager">
+  <TabItem value="pnpm" label="pnpm">
+    ```bash
+    pnpm i vercel
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+    ```bash
+    yarn add vercel
+    ```
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    ```bash
+    npm i vercel
+    ```
+  </TabItem>
+  <TabItem value="bun" label="bun">
+    ```bash
+    bun add vercel
+    ```
+  </TabItem>
+</Tabs>
+
+## 启用 Web Analytics
+
+在 [Vercel 仪表板](https://vercel.com/dashboard)上，选择您的项目，然后点击 **Analytics** 标签，从对话框中点击 **Enable**。
+
+:::note
+启用 Web Analytics 将在下次部署后添加新路由（作用域为 `/_vercel/insights/*`）。
+:::
+
+## 添加 `@vercel/analytics` 到您的项目
+
+使用您选择的包管理器，将 `@vercel/analytics` 包添加到您的项目：
+
+<Tabs groupId="package-manager">
+  <TabItem value="pnpm" label="pnpm">
+    ```bash
+    pnpm i @vercel/analytics
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+    ```bash
+    yarn add @vercel/analytics
+    ```
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    ```bash
+    npm i @vercel/analytics
+    ```
+  </TabItem>
+  <TabItem value="bun" label="bun">
+    ```bash
+    bun add @vercel/analytics
+    ```
+  </TabItem>
+</Tabs>
+
+## 集成到您的框架
+
+### Next.js (Pages Router)
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 Next.js 的无缝集成，包括路由支持。
+
+如果您使用 `pages` 目录，请将以下代码添加到主应用文件：
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="pages/_app.tsx" {2,8}
+    import type { AppProps } from "next/app";
+    import { Analytics } from "@vercel/analytics/next";
+
+    function MyApp({ Component, pageProps }: AppProps) {
+      return (
+        <>
+          <Component {...pageProps} />
+          <Analytics />
+        </>
+      );
+    }
+
+    export default MyApp;
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="pages/_app.js" {1,7}
+    import { Analytics } from "@vercel/analytics/next";
+
+    function MyApp({ Component, pageProps }) {
+      return (
+        <>
+          <Component {...pageProps} />
+          <Analytics />
+        </>
+      );
+    }
+
+    export default MyApp;
+    ```
+  </TabItem>
+</Tabs>
+
+### Next.js (App Router)
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 Next.js 的无缝集成，包括路由支持。
+
+将以下代码添加到根布局：
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="app/layout.tsx" {1,15}
+    import { Analytics } from "@vercel/analytics/next";
+
+    export default function RootLayout({
+      children,
+    }: {
+      children: React.ReactNode;
+    }) {
+      return (
+        <html lang="en">
+          <head>
+            <title>Next.js</title>
+          </head>
+          <body>
+            {children}
+            <Analytics />
+          </body>
+        </html>
+      );
+    }
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="app/layout.jsx" {1,11}
+    import { Analytics } from "@vercel/analytics/next";
+
+    export default function RootLayout({ children }) {
+      return (
+        <html lang="en">
+          <head>
+            <title>Next.js</title>
+          </head>
+          <body>
+            {children}
+            <Analytics />
+          </body>
+        </html>
+      );
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+### Remix
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 Remix 的无缝集成，包括路由检测。
+
+将以下代码添加到根文件：
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="app/root.tsx" {9,21}
+    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>
+      );
+    }
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="app/root.jsx" {9,21}
+    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>
+      );
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+### Nuxt
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 Nuxt 的无缝集成，包括路由支持。
+
+将以下代码添加到主组件：
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```vue title="app.vue" {2,6}
+    <script setup lang="ts">
+    import { Analytics } from '@vercel/analytics/nuxt';
+    </script>
+
+    <template>
+      <Analytics />
+      <NuxtPage />
+    </template>
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```vue title="app.vue" {2,6}
+    <script setup>
+    import { Analytics } from '@vercel/analytics/nuxt';
+    </script>
+
+    <template>
+      <Analytics />
+      <NuxtPage />
+    </template>
+    ```
+  </TabItem>
+</Tabs>
+
+### SvelteKit
+
+`injectAnalytics` 函数是跟踪脚本的包装器，提供与 SvelteKit 的无缝集成，包括路由支持。
+
+将以下代码添加到主布局：
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript">
+    ```ts title="src/routes/+layout.ts"
+    import { dev } from "$app/environment";
+    import { injectAnalytics } from "@vercel/analytics/sveltekit";
+
+    injectAnalytics({ mode: dev ? "development" : "production" });
+    ```
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="src/routes/+layout.js"
+    import { dev } from "$app/environment";
+    import { injectAnalytics } from "@vercel/analytics/sveltekit";
+
+    injectAnalytics({ mode: dev ? "development" : "production" });
+    ```
+  </TabItem>
+</Tabs>
+
+### Astro
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 Astro 的无缝集成，包括路由支持。
+
+将以下代码添加到基础布局：
+
+```astro title="src/layouts/Base.astro" {2,10}
+---
+import Analytics from '@vercel/analytics/astro';
+{/* ... */}
+---
+
+<html lang="en">
+	<head>
+    <meta charset="utf-8" />
+    <!-- ... -->
+    <Analytics />
+	</head>
+	<body>
+		<slot />
+  </body>
+</html>
+```
+
+:::note
+`Analytics` 组件在 `@vercel/analytics@1.4.0` 及更高版本中可用。
+如果您使用的是早期版本，则必须在 `astro.config.mjs` 文件中配置 Vercel 适配器的 `webAnalytics` 属性，如下面的代码所示。
+更多信息请参阅 [Astro 适配器文档](https://docs.astro.build/en/guides/integrations-guide/vercel/#webanalytics)。
+:::
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript">
+    ```ts title="astro.config.mjs" {7-9}
+    import { defineConfig } from "astro/config";
+    import vercel from "@astrojs/vercel/serverless";
+
+    export default defineConfig({
+      output: "server",
+      adapter: vercel({
+        webAnalytics: {
+          enabled: true, // 使用 @vercel/analytics@1.4.0 时设置为 false
+        },
+      }),
+    });
+    ```
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="astro.config.mjs" {7-9}
+    import { defineConfig } from "astro/config";
+    import vercel from "@astrojs/vercel/serverless";
+
+    export default defineConfig({
+      output: "server",
+      adapter: vercel({
+        webAnalytics: {
+          enabled: true, // 使用 @vercel/analytics@1.4.0 时设置为 false
+        },
+      }),
+    });
+    ```
+  </TabItem>
+</Tabs>
+
+### Create React App
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 React 的无缝集成。
+
+:::note
+使用纯 React 实现时，没有路由支持。
+:::
+
+将以下代码添加到主应用文件：
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="App.tsx" {1,7}
+    import { Analytics } from "@vercel/analytics/react";
+
+    export default function App() {
+      return (
+        <div>
+          {/* ... */}
+          <Analytics />
+        </div>
+      );
+    }
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="App.jsx" {1,7}
+    import { Analytics } from "@vercel/analytics/react";
+
+    export default function App() {
+      return (
+        <div>
+          {/* ... */}
+          <Analytics />
+        </div>
+      );
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+### Vue
+
+`Analytics` 组件是跟踪脚本的包装器，提供与 Vue 的无缝集成。
+
+:::note
+如果您使用 `vue-router`，路由支持会自动启用。
+:::
+
+将以下代码添加到主组件：
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```vue title="src/App.vue" {2,6}
+    <script setup lang="ts">
+    import { Analytics } from '@vercel/analytics/vue';
+    </script>
+
+    <template>
+      <Analytics />
+      <!-- your content -->
+    </template>
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```vue title="src/App.vue" {2,6}
+    <script setup>
+    import { Analytics } from '@vercel/analytics/vue';
+    </script>
+
+    <template>
+      <Analytics />
+      <!-- your content -->
+    </template>
+    ```
+  </TabItem>
+</Tabs>
+
+### 纯 HTML
+
+对于纯 HTML 网站，您可以将以下脚本添加到您的 `.html` 文件中：
+
+```html title="index.html"
+<script>
+  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+</script>
+<script defer src="/_vercel/insights/script.js"></script>
+```
+
+:::note
+使用 HTML 实现时，无需安装 `@vercel/analytics` 包。但是，没有路由支持。
+:::
+
+### 其他框架
+
+从包中导入 `inject` 函数，它将向您的应用添加跟踪脚本。**这应该只在您的应用中调用一次，并且必须在客户端运行**。
+
+:::note
+`inject` 函数不支持路由。
+:::
+
+将以下代码添加到主应用文件：
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript">
+    ```ts title="main.ts"
+    import { inject } from "@vercel/analytics";
+
+    inject();
+    ```
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="main.js"
+    import { inject } from "@vercel/analytics";
+
+    inject();
+    ```
+  </TabItem>
+</Tabs>
+
+## 部署应用到 Vercel
+
+使用以下命令部署您的应用：
+
+```bash
+vercel deploy
+```
+
+如果您还没有，我们还建议[连接项目的 Git 仓库](https://vercel.com/docs/git#deploying-a-git-repository)，这将使 Vercel 能够在不使用终端命令的情况下部署您对主分支的最新提交。
+
+部署应用后，它将开始跟踪访问者和页面浏览量。
+
+:::note
+如果一切设置正确，当您访问任何页面时，应该能够在浏览器的网络选项卡中看到来自 `/_vercel/insights/view` 的 Fetch/XHR 请求。
+:::
+
+## 在仪表板中查看数据
+
+部署应用并有用户访问您的网站后，您可以在仪表板中查看数据。
+
+为此，请转到您的[仪表板](https://vercel.com/dashboard)，选择您的项目，然后点击 **Analytics** 标签。
+
+几天的访问后，您将能够通过查看和[过滤](https://vercel.com/docs/analytics/filtering)面板来开始探索数据。
+
+Pro 和 Enterprise 计划用户还可以向其数据添加[自定义事件](https://vercel.com/docs/analytics/custom-events)，以跟踪用户交互，如按钮点击、表单提交或购买。
+
+了解更多关于 Vercel 如何支持 [隐私和数据合规标准](https://vercel.com/docs/analytics/privacy-policy) 与 Vercel Web Analytics。
+
+## 下一步
+
+现在您已经设置好 Vercel Web Analytics，可以探索以下主题以了解更多信息：
+
+- [了解如何使用 `@vercel/analytics` 包](https://vercel.com/docs/analytics/package)
+- [了解如何设置自定义事件](https://vercel.com/docs/analytics/custom-events)
+- [了解数据过滤](https://vercel.com/docs/analytics/filtering)
+- [阅读隐私和合规性](https://vercel.com/docs/analytics/privacy-policy)
+- [探索定价](https://vercel.com/docs/analytics/limits-and-pricing)
+- [故障排除](https://vercel.com/docs/analytics/troubleshooting)
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/vercel-web-analytics.md b/i18n/en/docusaurus-plugin-content-docs/current/vercel-web-analytics.md
new file mode 100644
index 0000000..9327118
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current/vercel-web-analytics.md
@@ -0,0 +1,526 @@
+---
+sidebar_position: 5
+---
+
+# 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:
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs groupId="package-manager">
+  <TabItem value="pnpm" label="pnpm">
+    ```bash
+    pnpm i vercel
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+    ```bash
+    yarn add vercel
+    ```
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    ```bash
+    npm i vercel
+    ```
+  </TabItem>
+  <TabItem value="bun" label="bun">
+    ```bash
+    bun add vercel
+    ```
+  </TabItem>
+</Tabs>
+
+## Enable Web Analytics in Vercel
+
+On the [Vercel dashboard](https://vercel.com/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:
+
+<Tabs groupId="package-manager">
+  <TabItem value="pnpm" label="pnpm">
+    ```bash
+    pnpm i @vercel/analytics
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+    ```bash
+    yarn add @vercel/analytics
+    ```
+  </TabItem>
+  <TabItem value="npm" label="npm">
+    ```bash
+    npm i @vercel/analytics
+    ```
+  </TabItem>
+  <TabItem value="bun" label="bun">
+    ```bash
+    bun add @vercel/analytics
+    ```
+  </TabItem>
+</Tabs>
+
+## Integration with Your Framework
+
+### Next.js (Pages Router)
+
+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:
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="pages/_app.tsx" {2,8}
+    import type { AppProps } from "next/app";
+    import { Analytics } from "@vercel/analytics/next";
+
+    function MyApp({ Component, pageProps }: AppProps) {
+      return (
+        <>
+          <Component {...pageProps} />
+          <Analytics />
+        </>
+      );
+    }
+
+    export default MyApp;
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="pages/_app.js" {1,7}
+    import { Analytics } from "@vercel/analytics/next";
+
+    function MyApp({ Component, pageProps }) {
+      return (
+        <>
+          <Component {...pageProps} />
+          <Analytics />
+        </>
+      );
+    }
+
+    export default MyApp;
+    ```
+  </TabItem>
+</Tabs>
+
+### Next.js (App Router)
+
+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:
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="app/layout.tsx" {1,15}
+    import { Analytics } from "@vercel/analytics/next";
+
+    export default function RootLayout({
+      children,
+    }: {
+      children: React.ReactNode;
+    }) {
+      return (
+        <html lang="en">
+          <head>
+            <title>Next.js</title>
+          </head>
+          <body>
+            {children}
+            <Analytics />
+          </body>
+        </html>
+      );
+    }
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="app/layout.jsx" {1,11}
+    import { Analytics } from "@vercel/analytics/next";
+
+    export default function RootLayout({ children }) {
+      return (
+        <html lang="en">
+          <head>
+            <title>Next.js</title>
+          </head>
+          <body>
+            {children}
+            <Analytics />
+          </body>
+        </html>
+      );
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+### 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:
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="app/root.tsx" {9,21}
+    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>
+      );
+    }
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="app/root.jsx" {9,21}
+    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>
+      );
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+### 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:
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```vue title="app.vue" {2,6}
+    <script setup lang="ts">
+    import { Analytics } from '@vercel/analytics/nuxt';
+    </script>
+
+    <template>
+      <Analytics />
+      <NuxtPage />
+    </template>
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```vue title="app.vue" {2,6}
+    <script setup>
+    import { Analytics } from '@vercel/analytics/nuxt';
+    </script>
+
+    <template>
+      <Analytics />
+      <NuxtPage />
+    </template>
+    ```
+  </TabItem>
+</Tabs>
+
+### 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:
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript">
+    ```ts title="src/routes/+layout.ts"
+    import { dev } from "$app/environment";
+    import { injectAnalytics } from "@vercel/analytics/sveltekit";
+
+    injectAnalytics({ mode: dev ? "development" : "production" });
+    ```
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="src/routes/+layout.js"
+    import { dev } from "$app/environment";
+    import { injectAnalytics } from "@vercel/analytics/sveltekit";
+
+    injectAnalytics({ mode: dev ? "development" : "production" });
+    ```
+  </TabItem>
+</Tabs>
+
+### 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 title="src/layouts/Base.astro" {2,10}
+---
+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/analytics@1.4.0` 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 in the code below.
+For further information, see the [Astro adapter documentation](https://docs.astro.build/en/guides/integrations-guide/vercel/#webanalytics).
+:::
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript">
+    ```ts title="astro.config.mjs" {7-9}
+    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/analytics@1.4.0
+        },
+      }),
+    });
+    ```
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="astro.config.mjs" {7-9}
+    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/analytics@1.4.0
+        },
+      }),
+    });
+    ```
+  </TabItem>
+</Tabs>
+
+### 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:
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```tsx title="App.tsx" {1,7}
+    import { Analytics } from "@vercel/analytics/react";
+
+    export default function App() {
+      return (
+        <div>
+          {/* ... */}
+          <Analytics />
+        </div>
+      );
+    }
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```jsx title="App.jsx" {1,7}
+    import { Analytics } from "@vercel/analytics/react";
+
+    export default function App() {
+      return (
+        <div>
+          {/* ... */}
+          <Analytics />
+        </div>
+      );
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+### 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:
+
+<Tabs groupId="language">
+  <TabItem value="tsx" label="TypeScript">
+    ```vue title="src/App.vue" {2,6}
+    <script setup lang="ts">
+    import { Analytics } from '@vercel/analytics/vue';
+    </script>
+
+    <template>
+      <Analytics />
+      <!-- your content -->
+    </template>
+    ```
+  </TabItem>
+  <TabItem value="jsx" label="JavaScript">
+    ```vue title="src/App.vue" {2,6}
+    <script setup>
+    import { Analytics } from '@vercel/analytics/vue';
+    </script>
+
+    <template>
+      <Analytics />
+      <!-- your content -->
+    </template>
+    ```
+  </TabItem>
+</Tabs>
+
+### Plain HTML
+
+For plain HTML sites, you can add the following script to your `.html` files:
+
+```html title="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:
+
+<Tabs groupId="language">
+  <TabItem value="ts" label="TypeScript">
+    ```ts title="main.ts"
+    import { inject } from "@vercel/analytics";
+
+    inject();
+    ```
+  </TabItem>
+  <TabItem value="js" label="JavaScript">
+    ```js title="main.js"
+    import { inject } from "@vercel/analytics";
+
+    inject();
+    ```
+  </TabItem>
+</Tabs>
+
+## 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](https://vercel.com/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](https://vercel.com/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](https://vercel.com/docs/analytics/filtering) the panels.
+
+Users on Pro and Enterprise plans can also add [custom events](https://vercel.com/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](https://vercel.com/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](https://vercel.com/docs/analytics/package)
+- [Learn how to set up custom events](https://vercel.com/docs/analytics/custom-events)
+- [Learn about filtering data](https://vercel.com/docs/analytics/filtering)
+- [Read about privacy and compliance](https://vercel.com/docs/analytics/privacy-policy)
+- [Explore pricing](https://vercel.com/docs/analytics/limits-and-pricing)
+- [Troubleshooting](https://vercel.com/docs/analytics/troubleshooting)