index.html引入第三方统计工具的方法

要想正确使用百度统计，核心只需做好两件事：第一，将统计脚本放置在正确的位置；第二，单页应用（SPA）需手动追踪路由变化。许多看似玄学的“数据不准”问题，根源往往就在这两个环节。

最稳妥的方案：将统计脚本放入 标签

无论静态 HTML 页面，还是 Vue、React 构建后的 index.html，最通用且可靠的做法都是将百度统计脚本直接插入 标签内。这种方法兼容性最高，能确保统计代码在页面渲染前初始化。

为何不能依赖 JS 动态追加？

网上许多教程会教你在组件的 mounted 或生命周期钩子中通过 document.createElement("script") 动态加载脚本。这种方法看似灵活，实则容易引起首次访问页面浏览量（PV）遗漏统计。

根本原因在于：百度统计的核心对象 _hmt 必须在页面开始渲染时就完成初始化。动态插入脚本属于异步行为，存在执行延迟，且可能被浏览器的广告拦截器（尤其是 Safari 或开启了严格隐私模式的浏览器）拦截。

• 同步与异步差异： 中的脚本会同步解析并初始化，而 JS 动态插入则为异步。很可能 _hmt.push 已执行，但 _hmt 对象还未定义，导致控制台报错 ReferenceError: _hmt is not defined。
• 兼容性问题： 部分统计服务（包括百度统计的某些实现）依赖 document.write 或对早期 DOM 的访问。如果脚本加载晚于 DOMContentLoaded 事件，这些操作可能失效。

百度统计的标准插入位置与写法

操作步骤十分标准：登录百度统计后台，添加站点后复制生成的代码块，然后将其粘贴到 index.html 的 标签内，放在任何已有 标签之前（顺序影响不大，但建议靠前放置）。

需注意以下三个细节：

1. 将 your-tracking-id-here 替换为后台实际显示的 32 位十六进制字符串 ID。
2. hm.js 后面不要出现多余空格或换行，确保 URL 完整。
3. 整个代码块不要额外添加 async 或 defer 属性，其内部已处理异步加载逻辑。

Vue 单页应用（SPA）必须补充路由追踪

脚本放置正确，只解决了“进门”问题。对于 Vue、React 等单页应用，页面切换时 DOM 并不刷新，因此必须手动推送新的路由路径给统计脚本。

避免在组件的 mounted 钩子里直接调用 _hmt.push。这种方法遇到嵌套路由或被 keep-alive 缓存的组件反复激活时，会产生重复统计，导致数据混乱。

正确的做法是在全局路由守卫中统一处理：

• 位置： 在 router.beforeEach 中调用，确保每次有效导航都触发一次页面追踪。
• 路径： 必须传递 to.fullPath（包含查询参数 query 和哈希 hash），而非 to.path。否则，类似 /user/123 和 /user/456 会被统计为同一页面。
• 防护： 调用前检查 window._hmt 是否存在，避免在本地开发环境（未引入统计脚本）时控制台报错。

具体代码示例如下（放置在 router/index.js 中）：

router.beforeEach((to, from, next) => {
  if (window._hmt && to.fullPath) {
    window._hmt.push(['_trackPageview', to.fullPath]);
  }
  next();
});

验证生效的三个关键点

代码部署后，不要仅依赖后台“实时数据”更新。建议自行从以下三点验证：

• 查看网络请求： 打开浏览器开发者工具，切换到 Network（网络）面板，过滤 XHR 或 Img 请求。刷新页面，搜索 hm.gif。如果能看到携带 si、u、v 等参数的请求发出，说明数据上报通道已打通。
• 检查控制台： 观察 Console（控制台）是否出现 Uncaught ReferenceError: _hmt is not defined 等错误。若有，说明脚本未成功加载。
• 确认页面标签： 核查页面的 中是否包含 标签。它会阻止统计请求携带来源信息，导致流量来源等数据丢失。

最后提醒：百度统计后台的数据本身存在延迟，通常为 5 到 20 分钟。首次安装统计代码后，可能需要等待约 2 小时，“今日活跃”等数据才会开始显示。因此，刚部署后短时间内未看到数据，不必焦虑，不一定是代码未生效。