在Vue项目中添加百度统计功能

作者 胡萝虎 日期 2022-03-02
在Vue项目中添加百度统计功能

最近接到一个需求,需要统计公司官网的日常访客情况,以供运营人员进行分析。正好博主自己的博客也做过类似的事情,不过公司官网是Vue开发的,不是静态网站。在跟前端开发简单了解Vue的相关技术后,也完美解决了。

前提准备

  1. 在开始之前,需要先到百度统计官网(https://tongji.baidu.com/)注册一个账号,并且在账号管理中新增一个站点:

image-20220302134854276

  1. 点击新增站点,按照实际情况填写即可:

image-20220302134946191

  1. 新增完成后,点击获取代码,获取到百度统计的js代码,后续会用到

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

注意:代码中的xxxxxxxxxxxxxxxx每个站点都不同,请从百度统计后台复制。

项目配置

  1. 打开项目的index文件,如index.htmlindex.template.ejs等,读者根据自己的项目来

  2. head标签中添加以下代码

    <script>
    var _hmt = _hmt || [];
    </script>
  3. 然后在body标签的最后添加以下代码

    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxx";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
  4. 然后直接将代码发布就可以了,发货后等待一会,即可在百度统计后台看到相关的访问数据了

image-20220302140310838

注意事项

  • 如果你的网站是单页应用(SPA),记得在百度统计后台启用单页应用数据统计

    image-20220302140423693

  • 如果网站发布一段时间后还没有统计信息,可以到统计后台检查下代码是否正确安装

    如果显示代码安装不正确,则需要具体排查原因。

    image-20220302140548640

“扫一扫接着看”