vue-mouseflow

Vue.js plugin to add Mouseflow tracking to your application

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-mouseflow
1.1.15 years ago6 years agoMinified + gzip package size for vue-mouseflow in KB

Readme

VueMouseflow
npm prettier
📈 Vue.js plugin for Mouseflow tracking

Installation

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:
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 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.
// 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:
const MyApp = new Vue({
  ...,
  methods: {
    buttonPressed(evt) {
      this.$mf.push('addedToCart', Date.now());
    }
  }
})