提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

百度、Google 埋点统计（Vue篇）

Vue 代码
2023-04-18 14:45:09 时间

参考资料：资料

一、Vue 使用百度统计

在Vue单页面开发中接入百度统计代码时，如果直接按照官网的走会出现错误，就是_hmt找不到，这是因为在一个js文件里声明的变量在另一个js文件里是找不到的，所以需要把_hmt挂载到window对象下,这样_hmt成为了全局变量，就可以在任何地方访问了。

1、在index.html或者main.js下百度统计代码添加
var _hmt = _hmt || [];
window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
 (function () {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?"+ 百度站点id;
       var s = document.getElementsByTagName("script")[0];
       s.parentNode.insertBefore(hm, s);
  })();
2、创建vuerouter后，调用beforeEach方法，每个路由跳转时都将其跳转的路由推给百度。
router.beforeEach((to, from, next) => {
    if (_hmt) {
        if (to.path) {
            _hmt.push(['_trackPageview', '/#' + to.fullPath]);
        }
    }
    next();
});

注意事项：

百度统计代码每次更新时间约5分钟，添加或修改后要等待。

易出现的错误：
1、百度统计：页面代码安装状态：代码未生效

说明：一般安装完百度统计后20分钟左右就生效了，如果时间过长说明安装有问题 页面代码安装状态:代码未生效 检查一下页面代码中是否包含以下代码，需要去掉 

//去除掉
<meta name="referrer" content="no-referrer"/>

二、Vue 使用 Google 统计

单页面应用切换时要手动发送页面统计，首先在 index.html或者 main.js 里引入谷歌统计代码：

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-yourID', 'auto')
ga('send', 'pageview') // 是否要统计着陆页面访问，取决于你的需求，这个不一定需要，会和`router`统计有重复


// main.js 里，如果你使用了 vue-router
router.afterEach(function (to) {
  if (window.ga) {
    window.ga('set', 'page', to.fullPath) // 你可能想根据请求参数添加其他参数，可以修改这里的 to.fullPath
    window.ga('send', 'pageview')
  }
})

相关文章