vue项目加入百度统计代码-统计网站浏览数据

程序员文章站 2024-02-11 12:49:28

...

申请百度统计账号，地址：https://tongji.baidu.com/sc-web/

在vue项目的index.html文件中，加入两块js代码

  <script>
    var _hmt = _hmt || [];
  </script>

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

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="author" content="by xinfu-dyh" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <script>
    var _hmt = _hmt || [];
  </script>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- 统计 -->
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d267feb82f639de25d9516c4458319c4";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    
</body>

</html>

在vue项目中的main.js中，加入路由跳转监听代码

// 加入百度统计
router.beforeEach((to, from, next) => {
  if (to.path) {
    if (window._hmt) {
      window._hmt.push(['_trackPageview', '/#' + to.fullPath])
    }
  }
  next()
})

当代码都改完后，部署到自己的网站上，然后点击菜单，百度统计可以手动检查代码是否生效

当代码状态不正确时，可以点击“代码检查”选项，进入检查页，点击“开始检查”按钮，进行检测