vue-mouseflow

VueMouseflow

📈 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());
    }
  }
})