install
npm install vue-ba --save
Get started quickly
Reference directly in the page
-
<script src="./node_modules/vue-uweb/dist/index.js">
<script>
-
Or load through es6 module
import ba from 'vue-ba'
Using the Vue Ba plug-in
Vue.use(ba, 'YOUR_SITEID_HERE')
More settings are made by passing the options parameter
Vue.use(uweb,options)
main.js settings
-
...
-
Vue.config.productionTip =
false;
-
-
Vue.
use(ba,
"Baidu Statistics website key");
-
Vue.
use(ba, { siteId:
"Baidu Statistics website key" });
-
new Vue({
-
...
-
})
options
| parameter | must | default | explain | remarks |
| siteId | yes | Bind the statistics code to accept the API request | ||
| debug | no | false | In debug mode, the output of the console will call window_ Parameters passed during HMT | Please do not use it in the production environment to avoid potential safety hazards |
| src | no | https://hm.baidu.com/hm.js?SITEID | Specifies the src attribute of the statistics script tag |
2. ba API
2.1 trackEvent
It is used to send event statistics requests when interactive elements such as buttons on the page are triggered.
usage
this.$ba.trackEvent(category,action,opt_label,opt_value)
parameter
| parameter | must | type | explain |
| category | yes | string | Indicates who the event happened to |
| action | yes | string | Represents the behavior of a visitor interacting with an element |
| opt_label | no | string | Used to describe events in more detail |
| opt_value | no | int | It is used to fill in the scoring value of scoring type events and the duration of loading time type events. If it is filled in other forms, the system will treat it as 0. If it is a floating point decimal, the system will automatically round off and remove the decimal point. |
2.2 trackPageview
It is used to send PV statistics requests for a URL. It is applicable to statistics of AJAX, asynchronously loaded pages, friendship links and download links
usage
-
this.$ba.trackPageview(pageURL)
-
parameter
| parameter | must | type | explain |
| pageURL | yes | string | Customize the URL address of the virtual PV page, fill in the relative path starting with the slash '/', and the system will automatically complete the domain name |
3. ba directive
Vue Ba provides two instructions: track event and track pageview. Developers can directly use them in html templates to count website data
3.1 track-event
Use the instruction v-track-event to listen for events. Specify the event type through modifiers. Event listening will be automatically added for binding elements. When an event triggers, call the statistics code. If no event is specified, the click event will be listened to by default.
Parameters can be passed through comma separated string or object literal. Please pay attention to the parameter order when passing in string. Refer to trackEvent API.
Use v-track-event.com to count custom events someEvent:custom
usage
-
<button v-track-
event.click=
"'category, action''"></button>
// Count click events
-
-
<button v-track-
event=
"'category, action'"></button>
// Statistical click event abbreviation
-
-
<input v-track-
event.keypress=
"'category, action'">
// Count keypress events
-
-
<input v-track-
event.someEvent:custom=
"'category, action'">
// Count someEvent events. someEvent is a custom event
-
-
<button v-track-
event=
"'category, action, opt_label, opt_value'"><button>
// Pass parameters as strings
-
-
<button v-track-
event=
"{category:'event', action:'click'}"></button>
// Passing parameters as object literals
3.2 track-pageview
The instruction track pageview is used to count the virtual PV. Generally, it can be used in conjunction with v-show or v-if to count the PV of the local dynamic view.
Parameters can be passed through comma separated string or object literal. Please pay attention to the parameter order when passing in string. Please refer to the usage of trackPageview API
-
<div v-show="show" v-track-pageview="'/bar'">bar
</div> // Virtual pv that tracks v-show binding elements
-
-
<div v-if="show" v-track-pageview="'/foo'">foo
</div> // Virtual pv that tracks v-if binding elements
-
-
<div v-track-pageview="'/tar'">
</div> // Specify the visited page and source as a string
-
-
<div v-track-pageview="{pageURL:'/zoo''}">
</div> // Specify the visited page and source in object literals