百度、Google 埋点统计(Vue篇) 秒速五厘米 2023-03-01 09:50 96阅读 0赞 参考资料[:资料][Link 1] ##### 一、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') } }) [Link 1]: https://blog.csdn.net/mouday/article/details/106874288
还没有评论,来说两句吧...