【HAVENT原创】百度埋点统计和 SPA 页面的那些事儿

最近使用百度埋点的时候发现 SPA 的项目无法统计 hash 路由后的路径，永远都是首页路径，经过一番查询资料和调研，总结了两套实现方式。

方式一（注意：这个方法会每次先统计一次首页路径，然后再统计每个路由）：

// 首先在模版页面的 <head> 或者 <body> 标签中加入百度统计的引用

  <!-- 百度埋点 -->
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script")
      hm.src = "https://hm.baidu.com/hm.js?9843875bfddf7f60876feae4c662753a"
      var s = document.getElementsByTagName("script")[0]
      s.parentNode.insertBefore(hm, s)
    })()
  </script>


// 然后在路由中增加统计操作
// 百度埋点 SPA 页面支持
router.beforeEach((to, from, next) => {
  if (window._hmt) {
    if (to.path) window._hmt.push(['_trackPageview', window.location.pathname + '#' + to.fullPath])

    next()
  }
})

方式二（路由完成后统计）：

// HH: 百度埋点 SPA 页面特殊处理
router.afterEach((to, from, next) => {
  setTimeout(() => {
    // 百度统计
    window._hmt = window._hmt || [];
    (function () {
      // 每次执行前，先移除上次插入的代码
      document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove()
      let hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?自己网站的识别码'
      hm.id = 'baidu_tj'
      let s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  }, 0)
})

使用方法二不会统计首页根路径，会比较清爽一点。方法二还可以再优化一下：首次请求创建统计脚本，再次请求的话参考方法一 push 一个 _trackPageview 事件即可（如果使用的是同一个统计标识的话）

来源：oschina

链接：https://my.oschina.net/u/943746/blog/3224553

标签

spa