应将统计脚本置于index.html的末尾，禁用defer/async和domcontentloaded包装，确保首屏行为采集；ga4需用g-开头id并先执行gtag('config')；百度统计须防hmt.js重复加载；本地开发需通过hostname判断屏蔽上报。

直接在 index.html 的 里插入统计脚本

绝大多数主流统计服务（如 Google Analytics、百度统计、腾讯分析）都提供一段标准的 JS 脚本，要求你把它放在页面 的末尾（ 前）。这样能确保脚本尽早加载、尽早采集首屏行为。

常见错误是插在 底部或用 defer/async 加载——这会导致部分用户跳转太快，统计漏掉「进入即跳出」的访问。

• 不要包裹在 document.addEventListener('DOMContentLoaded', ...) 里
• 不要用动态 import() 或 fetch + eval 加载统计代码
• 如果用了 CSP（Content-Security-Policy），需在 script-src 中显式允许统计域名，例如：script-src 'self' https://www.google-analytics.com https://hm.baidu.com

使用 gtag.js（Google Analytics 4）时注意 ID 格式和初始化顺序

GA4 不再用 UA-XXXXX-Y，而是 G-XXXXXXXXXX 这类 ID。如果填错，控制台会报 gtag is not defined 或埋点完全无数据。

必须先执行 gtag('config', 'G-XXXXXXXXXX')，再调用 gtag('event', ...)，否则自定义事件会被丢弃。

 <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script><script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX'); // ← 这行不能少，也不能写错
</script>

百度统计要避免重复加载 hmt.js

百度统计代码里有一段 document.write 动态插入 https://bdimg.share.baidu.com/.../hmt.js 的逻辑。如果页面已通过其他方式（如构建工具注入、CDN 预加载）提前加载了同名脚本，会导致 hmt.js 执行两次，出现「pv 翻倍」「访客数虚高」。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

验证方法：打开开发者工具 → Network → 刷新页面 → 搜索 hmt.js，只应出现 1 个请求且状态为 200。

• 检查是否有多个百度统计代码块（比如旧版 GA 和新版混用）
• 检查构建流程（如 Vite 插件、Webpack DefinePlugin）是否悄悄注入了另一份统计脚本
• 若用单页应用（SPA），需额外调用 _hmt.push(['_trackPageview', location.pathname + location.hash]) 手动上报路由变化

本地开发时屏蔽统计，防止污染真实数据

直接把统计代码扔进 index.html 后，本地 file:// 协议或 localhost:5173 下也会触发上报，导致测试流量混入生产报表。

最稳妥的做法是加一层环境判断，而不是靠注释开关——人总会忘记取消注释。

<script>
  if (location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
    // 这里放百度/GA/其他统计代码
  }
</script>

更严谨的项目会把统计开关抽成构建时变量（如 import.meta.env.VUE_APP_ENABLE_ANALYTICS），但对纯静态 index.html 来说，手动判断域名已足够可靠。

别忽略这点：统计代码一旦上线，漏掉环境判断，轻则多出几百条无效会话，重则让运营误判渠道效果——而这种问题往往要等周报出来才被发现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！