单页面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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
图文详解vue框架安装步骤
Feb 12 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上传、管理照片示例
2006/10/09 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python实现汉诺塔算法
2021/03/01 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
服务宗旨标语
2014/07/01 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python