统计代码必须放在</body>闭合标签之前，紧贴其上方；放<head>中易致gtag或_hmt未定义，放</body>后则脚本不执行。
统计代码该插在 index.html 的哪个位置
必须放在 </body> 闭合标签之前，紧贴它上方。放太早（比如 <head> 里）可能导致 window.dataLayer 或 gtag 未定义；放太晚（比如在 </body> 之后）浏览器已结束解析，脚本根本不会执行。
常见错误是把统计代码塞进 <head> 顶部，结果页面加载时反复报 ReferenceError: gtag is not defined；也有用户误加在 <footer> 组件里，但该组件未被所有路由加载，导致部分页面漏统计。
- Google Analytics 4 推荐写法：
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXX'); </script> - 百度统计用
_hmt，也必须在</body>前，且不能和 GA4 的gtag冲突（二者可共存，但初始化顺序不影响）
怎么验证统计代码是否生效
别等第二天看后台数据——那会错过埋点失败的黄金排查窗口。打开 Chrome DevTools → Network 标签页，刷新页面，过滤 collect（GA4）或 hm.gif（百度），看到 200 响应就说明请求发出去了。
更直接的方式是控制台执行 gtag 或 _hmt，看是否返回函数；执行 gtag('event', 'page_view') 手动触发一次，再查 Network 是否新增一条 collect? 请求。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 如果控制台报
gtag is not defined：检查脚本是否被广告拦截插件屏蔽，或 CDN 地址被墙（国内访问 GA4 需代理或换用 GTM 容器） - 如果 Network 有请求但状态是
failed或canceled：大概率是 CSP 策略限制了外域请求，需在<meta http-equiv="Content-Security-Policy">中添加connect-src https://www.google-analytics.com https://www.googletagmanager.com;
访客来源分析依赖哪些字段，index.html 本身不决定来源
index.html 是静态入口，它不生成来源信息；真实来源（如 utm_source=weibo、自然搜索、直接访问）由浏览器地址栏的 URL 参数或 referrer 头决定。统计工具自动采集 document.referrer 和 location.search，你不需要在 HTML 里手动传参。
但要注意：如果你用 Nginx 或 Cloudflare 做了跳转（比如 example.com → www.example.com），默认会清空 referrer，导致所有来源变成 “direct”。这时得配 Referrer-Policy: strict-origin-when-cross-origin 响应头。
- UTM 参数必须拼在首次访问的链接里，例如：
https://yoursite.com/index.html?utm_source=newsletter&utm_medium=email - 单页应用（SPA）切换路由时，
gtag('config', ...)不会自动触发新 page_view，需监听路由变化后手动调用gtag('event', 'page_view', {page_path: location.pathname}) - 本地预览
file:///协议下，所有统计请求都会因跨协议被浏览器拦截，必须走http://localhost或部署后验证
多个统计工具共存时的冲突风险
GA4 + 百度统计 + 自研埋点脚本同时存在，容易因重复初始化 dataLayer 或覆盖全局函数出问题。最稳妥的做法是只让一个工具管理 window.dataLayer，其余改用独立命名空间。
比如百度统计的 _hmt 是安全的，但如果你自己写了个 track() 函数，又引入了第三方 SDK 也叫 track()，就可能互相覆盖。
- 避免在
index.html中直接写业务逻辑代码（如“用户停留超10秒就上报”），这类行为应由 JS 模块统一管理，HTML 只负责加载 - 使用
async属性的脚本不保证执行顺序，若 A 依赖 B，B 必须用defer或动态插入方式确保先加载 - CDN 加速统计脚本时，注意版本锁定（如
gtag/js?id=...&l=dataLayer后缀不能省），否则某天接口变更会导致整站统计失效
真正麻烦的不是加一行代码，而是后续每次改版都得确认统计链路没断——尤其是重写路由、接入微前端、加 PWA 缓存之后，index.html 可能不再是唯一入口，访客来源数据就容易出现断层。
