WordPress 网站统计代码部署实战：百度统计、GA4 与 Microsoft Clarity 的完美组合

博客商业化与内容运营体系

(1) 博客广告的权衡：收益 vs 用户体验

(2) 从广告到服务：我用一个「系列类别」重构了博客的内容体系

(3) 我的技术博客 CTA 体系设计：从分类到系列，构建可持续维护的精准转化方案

(4) 博客内容结构与分类标签使用规范（v1.0）

(5) 独立博客的平衡术：重启广告，如何用“半自动”策略兼顾体验与技术服务转化？

(6) 在 WordPress 中使用 MerPress 插件插入 Mermaid 流程图

(7) 告别闪烁与不可复制：从 SyntaxHighlighter 到 Code Block Pro 的平滑迁移

(8) 纠结了好几天，最后还是决定把主题换了

(9) 换主题还是先上CDN？一次操作顺序的权衡与思考

(10) 站点主导航菜单优化复盘｜类目取舍、顺序调整、双语菜单同步全记录

(11) WordPress 网站统计代码部署实战：百度统计、GA4 与 Microsoft Clarity 的完美组合

通过 WPCode 插件优雅地添加多套统计代码，并解决国内访问 Google Analytics 的数据丢失问题

📋 背景与目标

在为 WordPress 网站添加统计代码时，我遇到了一个头疼的难题：如何在不影响网站性能的前提下，同时部署多套统计工具，并确保数据的准确性？特别是对于面向中文用户的网站，Google Analytics (GA4) 在中国大陆的访问稳定性问题，可能导致部分流量数据丢失。
我的诉求很明确：既要用强大的 GA4 分析海外流量，又要照顾到国内用户的访问体验；同时还想加上微软的 Microsoft Clarity 来看看用户到底是怎么浏览页面的。原以为就是简单的“复制-粘贴-保存”三步走，没想到实际操作中踩了不少坑。今天就把我的实践过程和排查思路分享出来，希望能帮到同样在折腾统计代码的朋友。

🎯 核心方案：多工具协同统计

根据网站访客的地域分布和不同分析工具的优势，我设计了以下统计方案：

flowchart LR
    A[网站访客] --> B{访问地域判断}
    B -- 中国大陆用户 --> C[百度统计<br>稳定记录基础流量数据]
    B -- 海外用户 --> D[Google Analytics 4<br>分析国际用户行为]
    C --> E[Microsoft Clarity<br>录制会话与生成热力图]
    D --> E
    E --> F[数据整合分析]
    F --> G[优化网站体验<br>提升转化率]

flowchart LR
    A[网站访客] --> B{访问地域判断}
    B -- 中国大陆用户 --> C[百度统计<br>稳定记录基础流量数据]
    B -- 海外用户 --> D[Google Analytics 4<br>分析国际用户行为]
    C --> E[Microsoft Clarity<br>录制会话与生成热力图]
    D --> E
    E --> F[数据整合分析]
    F --> G[优化网站体验<br>提升转化率]

工具选择理由

🛠️ 部署过程与问题解决

第一步：通过 WPCode 添加百度统计代码

为了不让主题文件变得乱七八糟，我一直习惯用 WPCode 插件来管理各种第三方脚本。首先是部署国内访问最稳定的百度统计。
在 WPCode 中新建代码片段时，我选择了 JavaScript 片段 类型，粘贴代码后，将位置设置为 Site Wide Header（全站页眉），设备类型则选择了 Any device type（桌面端和移动端），这样能确保覆盖所有访问设备。

百度统计代码顺利添加，位置选在 Header 尽早加载
百度统计这边非常顺利。但接下来部署 GA4 时，我却被 WPCode 报了个错。

第二步：添加 Google Analytics 4 代码（遭遇报错）

我照葫芦画瓢，把 GA4 的那段以 <script> 开头的代码粘贴进去，代码类型依然选的是 JavaScript 片段。结果保存时，系统直接报错：Unexpected token <。

GA4 代码选择 JS 片段时触发了语法错误
当时有点懵，仔细一看才反应过来：GA4 的代码是一段完整的 HTML 标签（包含了 <script> 和 </script>），而 JavaScript 片段类型要求里面是纯粹的 JS 逻辑，遇到开头的 < 自然就语法解析错误了。

第三步：解决 GA4 代码添加问题

找到原因后解决就很快了。我把代码类型改选为 HTML 片段，再次粘贴 GA4 代码，这次顺利保存，没有报错。

改选 HTML 片段后，GA4 代码成功保存

💡 关键学习点：在 WPCode 中，包含 HTML 标签的代码（如统计代码）必须选择 HTML 片段类型，而纯 JavaScript 代码才选择 JavaScript 片段类型。这是避免“Unexpected token”错误的关键。

第四步：安装 Microsoft Clarity 插件

按理说，Clarity 的代码也可以用 WPCode 来管理。但考虑到 Clarity 主要功能是会话录制和热力图，脚本相对较重。虽然 WPCode 也可以设置放在 Footer，但我去 Clarity 官网看了一眼，发现他们官方其实提供了专门的 WordPress 插件。
既然有原生插件，就能省去手动管理代码位置的麻烦，插件会自动以最优的方式（通常在页面底部异步加载）注入代码，不用担心影响首屏速度，而且还能在 WP 后台直接看概览，何乐而不为呢。
于是按照官网引导，我选择了 WordPress 平台。

Clarity 官方提供的 WordPress 插件安装引导
直接回到博客后台，搜索“Microsoft Clarity”，一键安装并启用。

后台搜索插件一键安装
启用后，侧边栏会多出一个 Clarity 选项。点击进去，按照提示登录 Microsoft 账号授权。

在后台直接点击登录微软账户
授权完成后，页面会自动关联到我在 Clarity 后台创建的项目，整个部署过程丝滑无比。

插件连接成功后的状态面板

🔍 验证与测试：网络请求分析

代码都部署完了，不代表就万事大吉了。尤其是 GA4，在国内的网络环境下到底能不能正常发送数据，我心里一直有个问号。
为了搞清楚真实情况，我关掉了 VPN，模拟最真实的国内访客环境，打开浏览器的无痕模式，按 F12 呼出开发者工具，切到 Network（网络） 面板，准备“眼见为实”。

Google Analytics 4 请求分析

在 Network 面板里过滤 google，刷新页面，我看到了非常有意思的现象：

Network 面板捕捉到的 GA4 请求状态
如截图所示，GA4 的工作其实分两步：

1. 加载核心脚本：请求 https://www.googletagmanager.com/gtag/js?id=G-89CMTD9395，这个请求状态码是 200 (成功)。说明 GA4 的代码库下载下来了。
2. 回传统计数据：请求 https://www.google-analytics.com/g/collect?...（一长串包含页面地址、标题等信息的请求），但这个请求的状态一直是 Pending（挂起/等待中）。
   这说明什么？说明代码安装得没问题，但因为国内网络对 google-analytics.com 这个数据收集接口的干扰，导致数据根本发不出去。最终这次页面浏览（PV）在 GA4 后台是丢失的。

百度统计请求分析

既然 GA4 在国内指望不上，那百度统计的表现如何呢？我在同一个 Network 面板里，把过滤词换成了 baidu。

百度统计的两个核心请求均成功返回 200
和 GA4 类似，百度统计也有两个关键请求，而且两个都成功了：

1. https://hm.baidu.com/hm.js?...：状态 200，负责加载百度统计的核心 JS 脚本。
2. https://hm.baidu.com/hm.gif?...：状态 200，这是真正用于发送数据的请求。百度统计很聪明，它通过请求一个 1×1 像素的透明 GIF 图片来携带参数，这种古老但跨域兼容性极好的方式，在国内网络下异常稳健。
   看到这两个 200，我就知道国内访客的数据已经被稳稳地记录在百度统计的后台了。

对比结论

百度统计在国内的访问稳定性远高于 GA4，能够可靠地记录所有国内访客的流量数据，作为国内流量统计的基石工具。而 GA4 虽然功能强大，但在国内网络环境下确实存在数据收集不稳定的问题。

📊 最终方案：三工具协同工作

基于测试结果，我确定了三工具协同工作的最终方案：

timeline
    title 网站统计体系工作流程
    section 用户访问网站
        加载统计代码 : 百度统计<br>核心脚本加载
        : GA4<br>核心脚本加载
        : Clarity<br>核心脚本加载
    section 数据收集阶段
        百度统计 : 通过 hm.gif<br>发送PV数据 (国内稳定)
        : GA4 尝试通过 collect<br>发送数据 (国内可能失败)
        : Clarity 后台录制<br>用户会话
    section 数据整合分析
        百度统计后台 : 查看国内流量<br>基础数据
        GA4 后台 : 查看海外流量<br>与转化分析
        Clarity 后台 : 查看热力图<br>与会话回放

timeline
    title 网站统计体系工作流程
    section 用户访问网站
        加载统计代码 : 百度统计<br>核心脚本加载
        : GA4<br>核心脚本加载
        : Clarity<br>核心脚本加载
    section 数据收集阶段
        百度统计 : 通过 hm.gif<br>发送PV数据 (国内稳定)
        : GA4 尝试通过 collect<br>发送数据 (国内可能失败)
        : Clarity 后台录制<br>用户会话
    section 数据整合分析
        百度统计后台 : 查看国内流量<br>基础数据
        GA4 后台 : 查看海外流量<br>与转化分析
        Clarity 后台 : 查看热力图<br>与会话回放

各工具分工与数据价值

💡 最佳实践与建议

1. 代码部署最佳实践

📖 详细的代码部署建议

• 使用 WPCode 插件：避免直接编辑主题文件，方便代码管理和迁移
• 代码类型选择：
• HTML 片段：适用于包含 HTML 标签的代码（如 GA4、Clarity 代码）
• JavaScript 片段：适用于纯 JavaScript 代码
• 位置设置：
• Header：统计代码、验证代码
• Footer：Clarity 等较重的脚本，避免影响页面加载速度（如果通过WPCode部署）
• 设备类型：始终选择 Any device type，确保覆盖所有设备用户
• Clarity 部署：建议使用官方 WordPress 插件，自动优化加载位置
  

2. 网络请求验证方法

🔧 如何验证统计代码是否正常工作

1. 打开开发者工具：在网站页面按 F12 打开开发者工具
2. 切换到 Network 面板：刷新页面，观察网络请求
3. 过滤关键请求：

• 百度统计：过滤 hm.gif（数据上报）和 hm.js（脚本加载）
• GA4：过滤 collect（数据收集）和 gtag/js（脚本加载）
• Clarity：过滤 clarity.ms

1. 检查状态码：确保关键请求状态码为 200，无 pending 或 failed 状态
   

3. 数据分析策略

📊 如何有效利用三套工具的数据

• 国内流量分析：以百度统计为准，重点关注来源、关键词、页面浏览量
• 海外流量分析：以 GA4 为主，分析用户路径、转化漏斗、受众特征
• 行为深度分析：使用 Clarity 的会话录制和热力图，发现页面设计问题
• 整合分析：定期对比三套工具的数据，发现差异并优化统计部署
  

⚠️ 常见问题与解决方案

❓ 常见问题解答

Q1: 为什么 GA4 在国内数据不准确？

A1: GA4 的数据收集请求（google-analytics.com）在国内访问不稳定，经常被干扰或重置，导致数据丢失。核心脚本（googletagmanager.com）可能加载成功，但数据无法发送。

Q2: 百度统计和 GA4 数据为什么差异大？

A2: 主要原因包括：1) GA4 在国内部分请求失败；2) 两套工具的统计机制不同；3) 时区、过滤设置差异。建议以百度统计为准分析国内流量。

Q3: Microsoft Clarity 会影响网站速度吗？

A3: Clarity 采用异步加载，对网站速度影响极小。其脚本加载在后台进行，不会阻塞页面渲染，且免费无流量限制。

Q4: 如何避免 WPCode 中的代码冲突？

A4: 1) 每个统计工具使用独立的代码片段；2) 避免重复部署相同代码；3) 定期检查代码片段状态，确保无错误。

🎉 总结与成果

通过部署百度统计、Google Analytics 4 和 Microsoft Clarity 三套统计工具，我构建了一个完整的网站统计体系：

1. 解决了国内数据丢失问题：百度统计确保国内流量数据完整记录
2. 保留了海外分析能力：GA4 继续分析国际用户行为
3. 获得了深度行为洞察：Clarity 提供会话录制和热力图，优化用户体验

💡 最终建议：对于面向中文用户的 WordPress 网站，百度统计 + Microsoft Clarity 是基础必备组合，GA4 作为补充用于分析海外流量。通过 WPCode 插件统一管理所有统计代码，既方便维护，又避免直接修改主题文件的风险。
通过这套方案，我既解决了 Google Analytics 在中国大陆的数据收集问题，又获得了全面的网站分析能力，为数据驱动的网站优化奠定了坚实基础。