vue-hmt

vue-hmt

VUE百度统计插件

项目参考：https://github.com/raychenfj/vue-uweb

安装

npm install --save vue-hmt

引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import router from './router' // vue-router 实例
import hmt from 'vue-hmt'

const options = {
  siteId: 'siteId',
  debug: true,
  autoPageview: false
}

Vue.use(hmt, { options, router })

插件注册说明

参数	是否必填	说明
hmt	是	vue-hmt 实例
options	是	详见options 参数说明
router	否	vue-router 实例，不填则路由变换不会自动trackPageview

options 参数说明

参数	是否必填	类型	说明	备注
siteId	是	String	统计网站唯一ID
debug	否	Boolean	默认 false,开启后会在控制台打印统计传递的参数	请勿在生产环境中使用
autoPageview	否	Boolean	默认 true,开启后会自动统计当前页面的PV	可配合trackPageview自定义要统计页面的URL

使用

实例方法

trackPageview

用于发送某个指定URL的PV统计请求,通常用于AJAX页面的PV统计。

用法

this.$hmt.trackPageview(pageURL)

举个栗子

this.$hmt.trackPageview('/login')

参数

参数	是否必填	类型	说明	备注
pageURL	是	String	指定要统计PV的页面URL	必须是以"/"（斜杠）开头的相对路径

trackEvent

用于触发某个事件，如某个按钮的点击，或播放器的播放/停止，以及游戏的开始/暂停等。

用法

this.$hmt.trackEvent('category', 'action', 'opt_label', 'opt_value')

举个栗子

this.$hmt.trackEvent('musicFile', 'download', 'Rolling In The Deep - Adele')

参数

参数	是否必填	类型	说明	备注
category	是	String	要监控的目标的类型名称	不填或填"-"的事件会被抛弃
action	是	String	用户跟网页进行交互的动作名称	不填或填"-"的事件会被抛弃
opt_label	否	String	事件的一些额外信息	不填或填"-"代表此项为空
opt_value	否	Number	跟事件相关的数值	-

指令

track-event

使用指令 v-track-event 监听事件， 通过 argument 指定事件类型，将自动为绑定元素添加事件监听，当事件触发调用统计代码。 如不指定事件，默认监听 click 事件。

用法

<button v-track-event:click="'category, action, opt_label, opt_value''"></button>

举个栗子

<button v-track-event:click="'musicFile, download, Rolling In The Deep - Adele''"></button>