README
v-stat
A vue directive for front-end user behaviour tracking.
Install
npm install v-stat -S
Docs
Directive Format
v-stat:[event]="{target:[my_target], page:[my_page], info:[my_info]}"
Supported Events
event | fired when | html tag examples |
---|---|---|
ready | directive is bounded | div |
click | dom click event | el-button |
enter | ENTER key is down | el-input |
select | vnode is changed | el-select |
typing | vnode is changed | el-input |
check | vnode is changed | el-table selection |
exit | directive is unbounded | div |
Modifiers
modifier | example | meaning |
---|---|---|
target | 'submit_button' | the name of html element that produces events |
page | 'home_page' | the name of current page |
info | 'current_title' | the name of data from VueComponent, accessible by this.current_title |
Usage
declare v-stat directive in main.js
// import module
import stat from 'v-stat'
// consumer function
const send = msg => $http.post('/stat', msg).then(res => res.data)
// auxiliary values that are carried with msg
const aux = {userid:'wzy816'}
// register custom directive
Vue.directive('stat', stat(send,aux))
examples
- capture page reload
<template>
<div
v-stat:ready="{target:'my_page', page:'my_page'}">
...
</div>
</template>
- capture simple button click event
<el-button
v-stat:click="{target:'my_button', page: 'my_btn_page'}"
@click="my_click()">
</el-button>
- capture dropdown list selection and its value
<!--
After selection is done, will call like
send({
event: 'select'
target: 'my_select',
info: this.my_select_page
page: 'my_select_page',
timestamp: Date.now(),
userid:'wzy816'
})
-->
<el-select
v-stat:select="{target:'my_select', info:'current_selection', page: 'my_select_page'}"
v-model="current_selection"
@change="onChangeHandler">
...
</el-select>
- capture input value when hit ENTER key
<el-input
v-stat:enter="{target:'my_input', info:'my_input_value', page: 'my_input_page'}"
v-model="my_input_value"
@change="onChangeHandler"
placeholder="DEFAULT">
...
</el-input>
- capture input change and its value while typing
<el-input
v-stat:typing="{target:'my_input', info:'current_input', page: 'my_input_page'}"
v-model="current_input"
@change="onChangeHandler"
placeholder="DEFAULT">
...
</el-input>
- capture page exit
<template>
<div v-stat:exit="{target:'my_page', page:'my_page'}">
...
</div>
</template>
- capture both ready and exit events
<template>
<div v-stat:ready&exit="{target:'my_page', page:'my_page'}">
...
</div>
</template>