@juanjosegongi/vue-mouseflow
Version:
Vue.js plugin to add Mouseflow tracking to your application
78 lines (53 loc) • 1.97 kB
Markdown
# VueMouseflow
[](https://www.npmjs.com/package/vue-mouseflow)
[](https://github.com/prettier/prettier)
> 📈 Vue.js plugin for Mouseflow tracking
## Installation
```bash
npm install --save vue-mouseflow
```
## Plugin Installation
### `VueMouseflow.install(Vue, options)`
- **`Vue`**`<Object>`: a Vue instance
- **`tracking_key`**`<String>`: The Mouseflow tracking key you want to use
Install the plugin using the `Vue.use` method:
```js
import Vue from 'vue';
import VueMouseflow from 'vue-mouseflow';
Vue.use(VueMouseflow, { tracking_key: 'your-tracking-key' });
```
## Methods
### Push
#### `VueMouseflow.push([commandName, argument1, argument2, …]);`
This acts as a wrapper for the `_mfq` object. Check [https://js-api-docs.mouseflow.com/#the-\_mfq-object](https://js-api-docs.mouseflow.com/#the-_mfq-object) for more information.
### Router Hook
#### `VueMouseflow.logRouteChange(route[, options])`
- **`route`**`<Object>`: a VueRouter route object
- **`options`**`<Object>`:
- **`includeRouteParams`**`<Boolean>`: Set to false to remove all user-entered URL params. Useful if there is sensitive data in the URL which you do not want to track. Defaults to `true`.
```js
// router.js
import VueRouter from 'vue-router';
import VueMouseflow from 'vue-mouseflow';
const router = new VueRouter({
routes: [
/* some routes */
]
});
router.afterEach(to => {
VueMouseflow.logRouteChange(to, { includeRouteParams: false });
});
```
### `this.$mf`
`VueMouseflow` is also added to your Vue prototype when installed. The above two methods are exposed on the `this.$mf` namespace.
This can be useful for event logging within components:
```js
const MyApp = new Vue({
...,
methods: {
buttonPressed(evt) {
this.$mf.push('addedToCart', Date.now());
}
}
})
```