nuxt中添加百度统计代码

众所周知 typescript中无法直接加入js代码

所以需要在plugins下新建一个插件 比如baidu-analytics.client.ts 使用.client.ts后缀直接限制了插件在客户端执行而不在服务端执行

内容如下

// 声明全局类型
declare global {
  interface Window {
    _hmt?: any[]
  }
}

export default defineNuxtPlugin(() => {
  // 只在客户端运行
  if (import.meta.server) return

  // 初始化百度统计对象
  window._hmt = window._hmt || []

  // 动态加载百度统计脚本
  ;(function() {
    const hm = document.createElement('script')
    hm.src = 'https://hm.baidu.com/hm.js?xxxx'//你的代码中的id
    hm.async = true
    const s = document.getElementsByTagName('script')[0]
    if (s && s.parentNode) {
      s.parentNode.insertBefore(hm, s)
    }
  })()

  // 等待路由就绪后再监听路由变化
  const router = useRouter()
  
  // 监听路由变化,每次路由变更时进行 PV 统计
  router.afterEach((to, from) => {
    // 确保百度统计脚本已加载
    if (typeof window._hmt !== 'undefined' && window._hmt) {
      try {
        // 告诉百度统计增加一个 PV
        // 使用 to.fullPath 包含查询参数和 hash
        window._hmt.push(['_trackPageview', to.fullPath])
      } catch (e) {
        // 静默处理错误,避免影响页面正常功能
        console.warn('百度统计跟踪失败:', e)
      }
    }
  })
})

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注