1. 获取 Google Analytics ID#

1. 访问 Google Analytics
2. 创建或选择项目
3. 选择 “网站” 作为媒体资源类型
4. 填写网站信息
5. 复制生成的 G-XXXXXX 格式的跟踪 ID

2. 配置 Google Analytics#

1
alytics: {
2
    googleAnalyticsId: "G-XXXXXXXXXX",
3
},

3. 验证安装#

1. 部署网站
2. 访问网站
3. 在 Google Analytics 后台查看实时数据
4. 确认数据是否正常采集

1. 获取 Clarity 项目 ID#

1. 访问 Microsoft Clarity
2. 创建新项目
3. 填写网站信息
4. 复制生成的项目 ID

2. 配置 Clarity#

1
alytics: {
2
    microsoftClarityId: "XXXXXXXX",
3
},

3. 功能特点#

• 热图：可视化用户点击、滚动行为
• 会话录制：记录用户浏览过程
• 漏斗分析：分析用户转化路径
• 用户行为分析：了解用户如何与网站交互

1. 获取 Umami 配置#

2. 配置 Umami#

1
alytics: {
2
    umamiAnalytics: {
3
        websiteId: "your-website-id",
4
        scriptUrl: "https://your-umami-instance.com/script.js",
5
        trackOutboundLinks: true,  // 跟踪外部链接点击
6
        collectWebVitals: true,    // 收集 Core Web Vitals 数据
7
    },
8
},

3. 高级配置#

1
umamiAnalytics: {
2
    // ... 基本配置 ...
3
    relpays: {
4
        enabled: true,           // 启用会话录制
5
        sampleRate: 0.5,         // 采样率（0-1）
6
        maskLevel: "moderate",   // 隐私保护级别
7
        maxDuration: 300000,     // 最大录制时长（毫秒）
8
        blockSelector: ".privacy-sensitive",  // 排除元素选择器
9
    },
10
},

1. 获取 La51 配置#

1. 访问 La51 Analytics
2. 创建账号和项目
3. 获取 Id、sdkUrl 和 ck 参数

2. 配置 La51#

1
alytics: {
2
    la51Analytics: {
3
        Id: "your-la51-id",
4
        sdkUrl: "https://your-la51-sdk-url.com",
5
        ck: "your-la51-ck",
6
        autoTrack: true,        // 自动跟踪
7
        hashMode: false,        // 是否使用哈希模式
8
        screenRecord: true,      // 启用屏幕录制
9
    },
10
},

1. 隐私合规#

• 添加隐私政策：在网站添加隐私政策页面
• Cookie 同意：实现 Cookie 同意弹窗
• 数据最小化：只收集必要的分析数据
• GDPR 合规：确保符合数据保护法规

2. 性能优化#

• 延迟加载：分析脚本使用 defer 或 async
• 选择轻量工具：优先选择 Umami 等轻量分析工具
• 合理采样：对于会话录制，设置适当的采样率
• 避免过多工具：不要同时使用多个分析工具

3. 数据解读#

• 设置目标：定义关键业务目标
• 定期分析：定期查看分析报告
• A/B 测试：基于数据进行优化
• 用户反馈：结合分析数据和用户反馈

Q: 分析数据不显示？#

1. 检查配置是否正确
2. 确认网站已部署
3. 等待数据采集延迟（通常 24-48 小时）
4. 检查浏览器隐私设置
5. 验证跟踪代码是否正确加载

Q: 分析工具影响网站速度？#

1. 使用 defer 或 async 加载脚本
2. 选择轻量分析工具（如 Umami）
3. 启用浏览器缓存
4. 考虑使用 CDN 加速

Q: 如何排除特定页面？#

1. Google Analytics：使用 gtag('config', 'G-XXXXXX', { 'page_path': '/exclude' });
2. Umami：在页面添加 data-umami-ignore 属性
3. Clarity：在 Clarity 后台设置排除规则

Q: 如何跟踪转化目标？#

1. Google Analytics：设置目标和转化
2. Umami：使用自定义事件
3. Clarity：设置漏斗分析

Q: 移动端数据不准确？#

1. 确保响应式设计正常
2. 检查移动设备网络连接
3. 验证移动端跟踪代码
4. 考虑使用移动应用分析工具

1. 本地测试#

1
# 构建网站
2
npm run build
3

4
# 预览构建结果
5
npm run preview

2. 验证方法#

• 浏览器控制台：检查分析脚本是否加载
• 网络请求：确认分析数据是否发送
• 分析后台：查看实时数据
• 测试事件：触发目标事件验证跟踪

3. 调试技巧#

• 使用浏览器开发者工具
• 检查网络请求和响应
• 查看控制台错误信息
• 测试不同设备和浏览器

通过合理配置站点分析工具，可以深入了解用户行为，优化网站体验，提升博客的整体质量！