index.html中怎么引入第三方统计工具

作者：袖梨 2026-06-13

最稳妥做法是将百度统计脚本直接插入HTML的<head>中；动态插入会导致首屏PV漏统计、执行延迟、被广告拦截器阻断及_hmt未定义报错，SPA还需在router.beforeEach中手动推送to.fullPath以确保路由变化被追踪。

直接在 <head> 里插入统计脚本是最稳妥、最通用的做法，适用于所有静态 HTML 或构建产物（如 Vue/React 的 index.html）。

为什么不能只靠 JS 动态 append？

很多教程提到用 document.createElement("script") 在 mounted 或生命周期里动态加载——这会导致首次访问漏统计。百度统计的 _hmt 初始化必须在页面开始渲染时就存在，否则首屏 PV（Page View）不会上报。动态插入脚本有执行延迟，且可能被广告拦截器阻断（尤其在 Safari 或启用严格隐私策略的浏览器中）。

首屏加载时，<head> 中的脚本会同步解析并触发初始化
JS 动态插入属于异步行为，_hmt.push 可能执行时 _hmt 还未定义，报 ReferenceError: _hmt is not defined
部分 CDN（如百度统计）依赖 document.write 或早期 DOM 访问，晚于 DOMContentLoaded 就失效

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

登录百度统计后台，添加站点后复制生成的代码，**粘贴到 index.html 的 <head> 标签内、任意已有 <script> 之前**（顺序不敏感，但建议靠前）：

<script>var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  hm.src = "https://hm.baidu.com/hm.js?your-tracking-id-here";  var s = document.getElementsByTagName("script")[0];  s.parentNode.insertBefore(hm, s);})();</script>

注意：your-tracking-id-here 要替换成你后台看到的真实 ID（32 位十六进制字符串），不能保留字面量；hm.js? 后面不能多空格或换行；整个块不要包裹在 async 或 defer 属性里——它自己已处理异步加载。

立即学习“前端免费学习笔记（深入）”；

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

静态插入只管首屏，Vue Router 切换页面不刷新 DOM，所以必须手动推送新路径。别只在组件 mounted 里调用 _hmt.push，那会重复统计（比如嵌套路由、keep-alive 组件反复激活）。

统一在 router.beforeEach 中处理：确保每次有效导航都触发一次 _trackPageview
路径要传 to.fullPath（含 query 和 hash），不是 to.path，否则带参数的页面会被归为同一 PV
加防护：检查 window._hmt 是否存在，避免开发环境报错（如本地没连统计服务）

示例代码（router/index.js）：

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

验证是否生效的三个关键点

上线后别等后台“实时数据”——先看浏览器能不能发出去请求：

打开 DevTools → Network → 切换到 XHR / Img 标签页，刷新页面，搜 hm.gif，应有至少一个请求（含 si、u、v 等参数）
检查 Console 是否报 Uncaught ReferenceError: _hmt is not defined ——说明脚本没加载或执行失败
确认页面没有 <meta name="referrer" content="no-referrer">，这个标签会阻止百度统计携带来源信息，导致部分数据丢失

真正容易被忽略的是：统计代码部署后，百度后台的数据延迟通常为 5–20 分钟，且首次安装需等待约 2 小时才显示“今日活跃”，期间无数据≠没生效。