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 // consumer functionconst send = $http // auxiliary values that are carried with msgconst aux = userid:'wzy816' // register custom directiveVue
examples
- capture page reload
...
- capture simple button click event
- 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' })--> ...
- capture input value when hit ENTER key
...
- capture input change and its value while typing
...
- capture page exit
...
- capture both ready and exit events
...