单页面vue引入百度统计的使用方法示例详解

　　

　　

最近组长安排着做一个项目,仅有的应用下载项目,想着做起来还是比较容易,可是看到提出的需求,我就有点懵逼了!需要对应用的下载进行统计! ! !我当时就想着我前端怎么对页面点击按钮就行数据统计啊!我以前的项目也有对应用的下载量就行数据统计的,可是那些项目都是后台人员编写进行数据统计的。我当时就有点不知所措了。想着怎么进行统计,怎么搞定这个!百度得知,百度统计可以帮着解决这个问题,可是没有用过啊!硬着头皮,进入自己的踩坑之旅!

　　

　　

1,首先还是先在百度统计注册账号,并且新增网站,设置网站域名。如下:

　　

单页面vue引入百度统计的使用方法示例详解

　　

2,在自己构建的vue项目中,引入vue-ba

　　 　　 　　npm安装,节省vue-ba 　　 　　

然后在main.js中引入:

　　 　　//加载Vue构建版本的“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。 　　从“Vue”进口Vue 　　导入应用程序从“/App。” 　　从“vue-ba”进口英航 　　进口的。/资产/css/normalize.css” 　　Vue.config。productionTip=false; 　　Vue。使用(ba、“175015 a6227dca437e13abb9a6e845ac”); 　　Vue。使用(ba, {siteId:“175015 a6227dca437e13abb9a6e845ac "});/* eslint-disable没有新*/新Vue ({ 　　埃尔:“#应用”, 　　组件:{应用}, 　　模板:“& lt; App/祝辞;” 　　}) 　　 　　

siteId让我找了蛮久,刚开始有误操作:

　　

单页面vue引入百度统计的使用方法示例详解

　　

刚开始以为这个就是siteId=12603119,可是使用这个siteId没有效果,后来才得知,siteId是在这里:管理→获取代码

　　

单页面vue引入百度统计的使用方法示例详解

　　

单页面vue引入百度统计的使用方法示例详解

　　

在上图的红线框内,才是这个域名下的siteId,使用正确的siteId之后,就验证是否正确引入,就进行代码检查:管理→代码检查

　　

单页面vue引入百度统计的使用方法示例详解

　　

单页面vue引入百度统计的使用方法示例详解

　　

点击开始检查,如果你的网址就是此处的网站首页,就会出来检查结果,如果你的网址与这里的网站首页地址不一样,你就把你的网址输入在“其他网页”这一栏,点击开始检查,就会出现以下结果

　　

单页面vue引入百度统计的使用方法示例详解

　　

这样就证明你的引入成功!

　　

还有一种手动检查的方法,就是在chrome浏览器中输入你的网址,按F12,调试模式,按网络,如果找到了hm.js& # 63; xxxxxx这个文件,也说明你的代码引入成功,如下:

　　

单页面vue引入百度统计的使用方法示例详解

　　

3, siteId配置成功之后,就需要在你的html内对点击事件等进行监测了.vue-ba这款插件有详细的使用方法,我就不介绍使用了,我就写我使用到的。详细的使用地址:https://github.com/minlingchao1/vue-ba

　　

我就只用到了trackEvent这个api, vue-ba提供径赛项目,track-pageview两个指令,我们可以直接在html模版中使用来统计网站数据。

　　

3.1径赛项目 　　

使用指令v-track-event监听事件,通过修饰符指定事件类型,将自动为绑定元素添加事件监听,当事件触发调用统计代码。如不指定事件,默认监听点事件。可通过逗号分隔的字符串或对象字面量传递参数,以字符串传递时请注意参数顺序,可参考trackEvent API。

　　

用法: 　　 　　 　　v-track-event & lt;按钮。点击="”类别,行动”“祝辞& lt;/button>//统计点击事件 　　 　　& lt;按钮v-track-event="范畴,行动”在& lt;/button>//统计点击事件简写 　　 　　v-track-event & lt;输入。键盘按键="范畴,行动”在//统计键盘按键事件 　　 　　& lt;按钮v-track-event="范畴,行动,opt_label, opt_value”祝辞& lt; button>//以字符串传递参数 　　 　　& lt;按钮v-track-event="{类别:“事件”,行动:“点击“}”祝辞& lt;/button>//以对象字面量传递参数

单页面vue引入百度统计的使用方法示例详解