VueJs百度统计插件
vue-ba
vuejs 百度统计埋点插件
转载https://minlingchao1.github.io/2017/07/13/VueJs%E7%99%BE%E5%BA%A6%E7%BB%9F%E8%AE%A1%E6%8F%92%E4%BB%B6/
项目参考:https://github.com/raychenfj/vue-uweb
项目地址
https://github.com/minlingchao1/vue-ba
安装
1
|
npm install vue-ba --save
|
直接在页面中引用
1
|
<script src="./node_modules/vue-ba/dist/index.js"><script>
|
或者通过es6模块加载
1
|
import ba from 'vue-ba'
|
使用vue-ba插件
1
|
Vue.use(ba, 'YOUR_SITEID_HERE')
|
通过传递 options 参数进行更多设置
1
|
Vue.use(ba,options)
|
options
参数 | 必须 | 默认 | 说明 | 备注 |
siteId | 是 | 绑定要接受API请求的统计代码 | ||
debug | 否 | false | 调试模式下将在控制台中输出调用window._hmt时传递的参数 | 请不要在生产环境中使用,避免造成安全隐患 |
src | 否 | https://hm.baidu.com/hm.js?SITEID | 指定统计脚本标签的 src 属性 |
ba API
trackEvent
用于发送页面上按钮等交互元素被触发时的事件统计请求。
用法
1
|
this.$ba.trackEvent(category,action,opt_label,opt_value)
|
参数
参数 | 必须 | 类型 | 说明 |
category | 是 | string | 表示事件发生在谁身上 |
action | 是 | string | 表示访客跟元素交互的行为动作 |
opt_label | 否 | string | 用于更详细的描述事件 |
opt_value | 否 | int | 用于填写打分型事件的分值,加载时间型事件的时长,如果填写为其他形式,系统将按0处理。若填写为浮点小数,系统会自动取整,去掉小数点。 |
2.2 trackPageview
用于发送某个URL的PV统计请求,适用于统计AJAX、异步加载页面,友情链接,下载链接的流量
用法
1
|
this.$ba.trackPageview(pageURL)
|
参数
参数 | 必须 | 类型 | 说明 |
pageURL | 是 | string | 自定义虚拟PV页面的URL地址,填写以斜杠‘/’开头的相对路径,系统会自动补全域名 |
ba 指令
vue-ba 提供 track-event,track-pageview 两个指令,开发者可以直接在 html 模版中使用来统计网站数据
track-event
使用指令 v-track-event 监听事件, 通过 modifiers 指定事件类型,将自动为绑定元素添加事件监听,当事件触发调用统计代码。 如不指定事件,默认监听 click 事件。
可通过逗号分隔的字符串或对象字面量传递参数,以字符串传递时请注意参数顺序,可参考trackEvent API。
用法
1
2
3
4
5
6
7
8
9
|
<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> // 以对象字面量传递参数
|
track-pageview
使用指令 track-pageview 统计虚拟 PV ,一般可以配合 v-show 或 v-if 来统计局部动态视图的 PV。
可通过逗号分隔的字符串或对象字面量传递参数,以字符串传递时请注意参数顺序,可参考trackPageview API 用法
1
2
3
4
5
6
7
|
<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> // 以对象字面量指定受访页面和来源
|
VueJs百度统计插件相关推荐
- 在uniapp 中使用百度统计 【精华版】
一. 百度统计官网 百度统计的地址 二.百度统计添加域名: 三. 安装百度统计的代码: 这是百度统计的核心代码` 在uniapp 中全局使用 获取网址的站点id 站点id 是在二级目录的: 网站概况的 ...
- 发款php蜘蛛统计插件只要有mysql就可用
有时候我们为了看一下蜘蛛爬行的情况,不得不对日志进行大量的分析,由此想做一款插件可以记录蜘蛛的情况.在第一次做的时候,只是记录下蜘蛛的爬行次数,不大好分析. 于是昨天便认真的做了一下,功能多一点,可以 ...
- Nuxt配置百度统计,并公开统计解决
文章优先发布在个人博客,欢迎访问小站 https://www.xdx97.com/article?bamId=643100658550964224 1.Nuxt配置百度统计 1-1:配置插件 /** ...
- php写的代码点击提交没效果,PHP代码实现提交虚假数据给百度统计
重要:本文最后更新于2019-06-12 08:41:56,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗. 勾起我搞这个的兴趣是因为有个卖软件的,老是向我的百度统计后台推送引流软件广 ...
- uniapp H5 百度统计
海豚精灵:https://www.whhtjl.com:优课GO:https://mgo.whhtjl.com 需要使用自定义模板的场景,通常有以下几种情况: 调整页面 head 中的 meta 配置 ...
- 百度统计 渠道分析 渠道名称显示 未知
序 听说历史上美股出现三次熔断 ,本周见证了两次 . 百度统计 SDK 接入是我见过最摩擦智商的文档 ,其摩擦程度仅次于微信家的文档 .(文末给出证明) 百度无埋点统计流程 1. 注册百度账号创建 ...
- Google Ananlytics 与百度统计
近些工作任务,是为我们公司网站添加数据监测,在网上也找了很多资料,大致比较热门的有四种:51la,Google Analytics(简称GA),CNZZ及百度统计. 但具体深入了解就是Google A ...
- HTML分享内容到QQ,微信,微博等平台,百度分享插件的相关参数
百度分享插件的相关参数 一.概述 百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法 二.代码结构 分享代码可以分为三个部分:HTML.设置和js加载,示例如下: 代码结构如下: < ...
- 百度分享插件实现方法以及详细文档介绍
百度分享插件使用方法:复制div到页面对应位置即可 <div class="bdsharebuttonbox"><a href="#" cla ...
最新文章
- 2021年大数据Spark(三十六):SparkStreaming实战案例一 WordCount
- linux wget下载整个ftp目录(含子目录)
- NSIndexPath类
- Hadoop 集群的三种方式
- 移动端 爬虫工具 与 方法 介绍
- python复习-正则表达式
- 类和模块 类和原型 工厂方法 构造函数 constructor
- 轨迹规划实现 tfaar_example2.7
- ps cs3怎样能保存html,ps cs3用消失点清理杂物方法介绍
- bzoj2761 [JLOI2011]不重复数字
- js,vue.js一些方法的总结
- Bootstrap3 表单-输出内联表单
- 牛气!青云QingCloud 进入“混合云市场竞争力领导者象限”
- 《.NET程序员面试秘籍》读书笔记
- 5年Java面试阿里P6经验总结
- 拓维信息鸿蒙服务器,润和软件、常山北明、诚迈科技、拓维信息,谁是华为鸿蒙真龙头?...
- 虚拟路由器冗余协议vrrp原理的理解
- 使用浏览器插件,下载网页中的图片
- c语言大小箱子,基于C语言箱子游戏.doc
- windows搭建Git服务器之Bonobo Git Server