统计配置

约 1033 字大约 3 分钟

2025-01-27

概述

统计配置用于集成网站访问统计功能，目前支持 Umami 统计服务。

文件位置

src/config/umamiConfig.ts

基础配置

启用统计功能

export const umamiConfig = {
  enabled: true, // 启用 Umami 统计
  apiKey: "api_XXXXXXXXXX", // 你的 API 密钥
  baseUrl: "https://api.umami.is", // Umami Cloud API 地址
  scripts: `
<script defer src="https://analytics.umami.is/script.js" data-website-id="your-website-id"></script>
  `.trim(),
} as const;

配置选项详解

选项	类型	说明	默认值
`enabled`	`boolean`	是否启用统计功能	`false`
`apiKey`	`string`	Umami API 密钥	`"api_XXXXXXXXXX"`
`baseUrl`	`string`	Umami API 基础地址	`"https://api.umami.is"`
`scripts`	`string`	统计脚本代码	示例脚本

Umami 统计服务

什么是 Umami

Umami 是一个开源的、注重隐私的网站分析工具，具有以下特点：

隐私友好：不收集个人数据，符合 GDPR
轻量级：脚本文件小，不影响网站性能
开源免费：可以自建或使用云服务
实时数据：提供实时的访问统计

获取 Umami 服务

方法一：使用 Umami Cloud（推荐）

访问 Umami Cloud
注册账户并登录
创建新网站
获取网站 ID 和脚本代码

方法二：自建 Umami 服务

使用 Docker 部署 Umami
配置域名和 SSL
创建网站并获取配置信息

配置示例

使用 Umami Cloud

export const umamiConfig = {
  enabled: true,
  apiKey: "api_your_actual_key_here",
  baseUrl: "https://api.umami.is",
  scripts: `
<script defer src="https://analytics.umami.is/script.js" data-website-id="your-website-id"></script>
  `.trim(),
} as const;

使用自建服务

export const umamiConfig = {
  enabled: true,
  apiKey: "api_your_self_hosted_key",
  baseUrl: "https://analytics.yourdomain.com",
  scripts: `
<script defer src="https://analytics.yourdomain.com/script.js" data-website-id="your-website-id"></script>
  `.trim(),
} as const;

其他统计服务

Google Analytics

export const umamiConfig = {
  enabled: true,
  apiKey: "not_used",
  baseUrl: "not_used",
  scripts: `
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>
  `.trim(),
} as const;

百度统计

export const umamiConfig = {
  enabled: true,
  apiKey: "not_used",
  baseUrl: "not_used",
  scripts: `
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?your-id";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
  `.trim(),
} as const;

51.la 统计

export const umamiConfig = {
  enabled: true,
  apiKey: "not_used",
  baseUrl: "not_used",
  scripts: `
<!-- 51.la 统计 -->
<script type="text/javascript" src="//js.users.51.la/your-id.js"></script>
  `.trim(),
} as const;

隐私保护

Umami 默认符合 GDPR 要求：

不收集个人身份信息
不设置追踪 Cookie
不跨网站追踪用户
提供数据删除功能

数据收集范围

Umami 只收集以下匿名数据：

页面访问量
访问时间
浏览器信息
操作系统信息
地理位置（国家/地区级别）
访问来源

性能优化

脚本加载优化

export const umamiConfig = {
  enabled: true,
  apiKey: "api_your_key",
  baseUrl: "https://api.umami.is",
  scripts: `
<script defer src="https://analytics.umami.is/script.js" data-website-id="your-id" data-do-not-track="true"></script>
  `.trim(),
} as const;

条件加载

// 只在生产环境启用统计
export const umamiConfig = {
  enabled: process.env.NODE_ENV === 'production',
  // ... 其他配置
} as const;

数据分析

查看统计报告

登录 Umami 管理后台
选择对应的网站
查看实时访问数据
分析访问趋势和用户行为

常用指标

页面浏览量：总访问次数
独立访客：不重复的访问者数量
访问时长：用户在网站停留的时间
跳出率：只访问一个页面就离开的比例
访问来源：用户从哪些渠道访问网站

注意事项

隐私合规：确保统计服务符合当地隐私法规
性能影响：统计脚本可能影响页面加载速度
数据准确性：不同统计工具的数据可能有差异
备份数据：定期备份重要的统计数据

常见问题

Q: 如何禁用统计功能？ A: 将 enabled 设置为 false

Q: 统计脚本在哪里加载？ A: 脚本会自动插入到页面的 <head> 部分

Q: 如何更换统计服务？ A: 修改 scripts 字段中的脚本代码

Q: 统计数据如何查看？ A: 登录对应的统计服务管理后台查看

Q: 如何确保隐私合规？ A: 使用 Umami 等隐私友好的统计服务，避免收集个人数据

Q: 统计脚本影响网站性能吗？ A: 现代统计脚本通常很轻量，对性能影响很小

版权所有

版权归属：夏叶

许可证：署名 4.0 国际 (CC-BY-4.0)