---
url: /guide/analytics.md
description: >-
探索如何使用 @theojs/lumen 插件，在你的 VitePress 站点中无缝集成谷歌分析 (Google Analytics)、百度统计
(Baidu Analytics) 及 Umami Analytics。本指南将帮助你快速配置和管理站点统计，有效追踪和分析网站数据。
---
# 站点统计工具
该插件集成了三种常见的站点统计工具：**谷歌分析 (Google Analytics)**、**百度统计 (Baidu Analytics)** 和 **Umami Analytics**，让你可以轻松地在 VitePress 网站中集成并管理这些分析工具。无论是谷歌分析的强大功能，还是百度统计对中国市场的适配，或者是 Umami 的隐私友好型方案，都可以通过这个插件快速集成并使用。
## 谷歌分析 - googleAnalytics
```ts [.vitepress/theme/index.ts]
import DefaultTheme from 'vitepress/theme'
// [!code ++]
import { googleAnalytics } from '@theojs/lumen'
export default {
extends: DefaultTheme,
// [!code ++]
enhanceApp() {
googleAnalytics({ id: 'G-******' }) // [!code ++]
} // [!code ++]
}
```
`googleAnalytics` 只会在生产构建中加载脚本；开发服务器中不会发送统计数据。
### 获取 Google Analytics ID
1. 访问网站。
2. 登录到你的 Google Analytics 帐号。
3. 创建一个新的 Google Analytics 账户，或者选择已有的账户。
4. 在左下角点击 `Admin`（管理）。
5. 在 `Account`（账户）列下，选择你的账户。
6. 在 `Property`（属性）列下，选择你的站点，或者创建一个新的站点。
7. 在 `Property Settings`（属性设置）中，找到 `Tracking Info`（跟踪信息）。
8. 点击 `Tracking Code`（跟踪代码），你会看到类似 `G-XXXXXXX` 的 ID。
**详细操作见官方文档：**
## 百度统计 - baiduAnalytics
```ts [.vitepress/theme/index.ts]
// [!code ++]
import type { EnhanceAppContext } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
// [!code ++]
import { baiduAnalytics, trackPageview } from '@theojs/lumen'
const baiduId = '******'
export default {
extends: DefaultTheme,
// [!code ++]
enhanceApp: ({ router }: EnhanceAppContext) => {
baiduAnalytics({ baiduId }) // [!code ++]
const previousAfterRouteChange = router.onAfterRouteChange // [!code ++]
// [!code ++]
router.onAfterRouteChange = async (to) => {
await previousAfterRouteChange?.(to) // [!code ++]
trackPageview(baiduId, to) // [!code ++]
} // [!code ++]
} // [!code ++]
}
```
`baiduAnalytics` 会在浏览器环境加载脚本。VitePress 会在首次访问和后续客户端路由切换后调用 `onAfterRouteChange`；示例保留已有处理函数并上报当前路径。
### 获取 Baidu Analytics ID
1. 访问 网站。
2. 使用百度账号登录或注册一个新账号。
3. 登录后，点击页面上方的 `我的报告`-`使用设置`-`网站列表`。
4. 添加你的网站，选择分类并保存
5. 获取统计代码，复制链接中 `hm.js?******` 的 ID 部分。
**详细操作见官方文档：**
## Umami - umamiAnalytics
```ts [.vitepress/theme/index.ts]
import DefaultTheme from 'vitepress/theme'
// [!code ++]
import { umamiAnalytics } from '@theojs/lumen'
export default {
extends: DefaultTheme,
// [!code ++]
enhanceApp() {
// [!code ++]
umamiAnalytics({
id: '***-***-***-***', // [!code ++]
src: 'https://*******', // [!code ++]
domains: 'your.domain.com' // [!code ++] 可选，参考官方配置 https://umami.is/docs/tracker-configuration#data-domains
}) // [!code ++]
} // [!code ++]
}
```
`umamiAnalytics` 只会在生产构建中加载脚本。参数既可以是上面的单个配置对象，也可以是配置对象数组，用于同时加载多个站点追踪器。
### 获取 Umami Analytics ID
#### 自建 Umami
1. 参考 搭建 Umami 服务器。
2. 登录 Umami 仪表盘，创建新站点。
3. 复制该站点的 ID 用于配置。
#### 使用公共 Umami 服务
1. 使用第三方 Umami 公共实例。
2. 获取公共实例分配的站点 ID。
> 你的 Umami ID 应该类似于：`123abc456def`
**官方文档及资源：**