0.0.3 • Published 5 years ago

vue-hmt v0.0.3

Weekly downloads
14
License
-
Repository
github
Last release
5 years ago

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 })

插件注册说明

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

options 参数说明

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

使用

实例方法

trackPageview

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

用法
this.$hmt.trackPageview(pageURL)
举个栗子
this.$hmt.trackPageview('/login')
参数
参数是否必填类型说明备注
pageURLString指定要统计PV的页面URL必须是以"/"(斜杠)开头的相对路径

trackEvent

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

用法
this.$hmt.trackEvent('category', 'action', 'opt_label', 'opt_value')
举个栗子
this.$hmt.trackEvent('musicFile', 'download', 'Rolling In The Deep - Adele')
参数
参数是否必填类型说明备注
categoryString要监控的目标的类型名称不填或填"-"的事件会被抛弃
actionString用户跟网页进行交互的动作名称不填或填"-"的事件会被抛弃
opt_labelString事件的一些额外信息不填或填"-"代表此项为空
opt_valueNumber跟事件相关的数值-

指令

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>