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


Posted in Javascript onOctober 13, 2018

前言

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

方法如下

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

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

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

npm install --save vue-ba

然后在main.js中引入:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ba from 'vue-ba'
import './assets/css/normalize.css'
Vue.config.productionTip = false;
Vue.use(ba, "175015a6227dca437e13abb9a6e845ac");
Vue.use(ba, { siteId: "175015a6227dca437e13abb9a6e845ac" });


/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 track-event 

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

用法:

<button v-track-event.click="'category, action''"></button> // 统计click事件

<button v-track-event="'category, action'"></button> // 统计click事件简写

<input v-track-event.keypress="'category, action'"> // 统计keypress事件

<button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串传递参数

<button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数

3.2 track-pageview

使用指令 track-pageview 统计虚拟 PV ,一般可以配合 v-show 或 v-if 来统计局部动态视图的 PV。可通过逗号分隔的字符串或对象字面量传递参数,以字符串传递时请注意参数顺序,可参考trackPageview API 用法

<div v-show="show" v-track-pageview="'/bar'">bar</div> // 跟踪 v-show 绑定元素的虚拟pv

<div v-if="show" v-track-pageview="'/foo'">foo</div> // 跟踪 v-if 绑定元素的虚拟pv

<div v-track-pageview="'/tar'"></div> // 以字符串指定受访页面和来源

<div v-track-pageview="{pageURL:'/zoo''}"></div> // 以对象字面量指定受访页面和来源

我在app.vue中的使用:

<div class="swiper-container swiper-container1">
  <swiper class="swiper-wrapper" :options="bannerOptions" ref="bannerSwiper">
   <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
    <a class="swiper-link" :href="item.link" v-track-event="{category:'download', action:'click',opt_label: item.link}" >
     <img class="container1-img" :src="item.icon" :alt="item.desc"/>
    </a>
   </swiper-slide>
  </swiper>
 </div>
<div class="list-download">
 <a :href="item.packagename" v-track-event="{category:'download', action:'click',opt_label: item.packagename}">下载</a>
 </div>

通过这种方法,就可以让你在百度统计里面看到你想要统计的数据。但是这种统计的结果不会很快就出来,需要过一段时间,两三个小时是需要的。我也等了将近3个小时,才看到统计的结果。

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

4、总算是大功告成了,虽然百度统计里面可能还是还有蛮多没有吃透,但是先把项目完成才是最重要的,接下来的就是慢慢去搞。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
基于angular实现树形二级表格
Oct 16 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
详解webpack loader和plugin编写
Oct 12 #Javascript
深入理解Angularjs 脏值检测
Oct 12 #Javascript
vue中render函数的使用详解
Oct 12 #Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 #Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 #Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 #Javascript
You might like
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python list格式数据excel导出方法
2018/10/31 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
对python中list的五种查找方法说明
2020/07/13 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
高中军训感言600字
2014/03/11 职场文书
销售经理岗位职责
2014/03/16 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
团队精神的演讲稿
2014/05/14 职场文书
供应链金融服务方案
2014/05/25 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
社区好人好事材料
2014/12/26 职场文书
新生开学寄语大全
2015/05/28 职场文书
外出培训学习心得体会
2016/01/18 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技