feat(vuex): add vuex middleware

the middleware will make possible to call the tracking system from the vuex store action by passing the meta.analytics array inside the payload

close #89

Author: MatteoGabriele

README.md

@@ -47,6 +47,7 @@ npm install vue-analytics
 * [Custom methods](/docs/custom-methods.md)
 * [Ecommerce](/docs/ecommerce.md)
 * [Untracked hits](/docs/untracked-hits.md)
+* [Vuex](/docs/vuex.md)
 * [Debug](/docs/debug.md)
 
 # Issues and features requests

SUMMARY.md

@@ -17,4 +17,5 @@
 * [Custom methods](/docs/custom-methods.md)
 * [Ecommerce](/docs/ecommerce.md)
 * [Untracked hits](/docs/untracked-hits.md)
+* [Vuex](/docs/vuex.md)
 * [Debug](/docs/debug.md)

__tests__/create-trackers.spec.js

@@ -15,7 +15,7 @@ it ('should initialize single tracker', () => {
 
   createTrackers()
   expect(window.ga).toBeCalledWith('create', config.id, 'auto', {})
-  expect(window.ga).not.toBeCalledWith('set', 'sendHitTask', null)
+  expect(window.ga).toBeCalledWith('set', 'sendHitTask', null)
 })
 
 it ('should initialize multiple trackers', () => {

config/scripts/build.js

@@ -32,7 +32,7 @@ const webpackConfig = merge.smart({}, base, {
       asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: /\.js$/,
-      threshold: 10240,
+      threshold: 0,
       minRatio: 0.8
     }),
     new webpack.optimize.ModuleConcatenationPlugin()

docs/debug.md

@@ -4,13 +4,15 @@ Implements Google Analaytics debug library.
 
 **Please remember that it is for debug only. The file size of analytics\_debug.js is way larger than analytics.js**
 
+Example:
+
 ```js
 Vue.use(VueAnalytics, {
   id: 'UA-XXX-X',
   debug: {
-    enabled: true,
-    trace: false,
-    sendHitTask: true
+    enabled: false, // default: enabled only if NODE_ENV !== 'production'
+    trace: false, // default: false
+    sendHitTask: false // default: enabled only if NODE_ENV === 'production'
   }
 })
 ```

docs/vuex.md

@@ -0,0 +1,166 @@
+## Vuex and Google Analytics
+
+Google Analytics it is now supported also using the Vuex store, by installing the `analyticsMiddleware` plugin
+
+### Install
+
+```js
+// store.js
+import Vuex from 'vuex'
+import Vue from 'vue'
+import { analyticsMiddleware } from 'vue-analytics'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {},
+  actions: {},
+  mutations: {},
+  plugins: [
+    analyticsMiddleware
+  ]
+})
+
+export default store
+```
+
+```js
+// main.js
+import Vue from 'vue'
+import VueAnalytics from 'vue-analytics'
+import store from './store.js'
+
+Vue.use(VueAnalytics, {
+  id: 'UA-1234-5'
+})
+
+new Vue({
+  ...
+})
+```
+
+### Usage
+
+In the action, when sending a payload, we need to specify a `meta` object with an `analytics` property that will help us send all the data we need to the trackers
+
+Example of a store action
+
+```js
+const store = Vuex.Store({
+  state: {
+    counter: 0
+  },
+  actions: {
+    increase ({ commit }) {
+      commit('increaseCounter', {
+        // Here some extra parameters to pass to the mutation
+        amount: 1,
+
+        // The meta tag will be read by the plugin and fire
+        // the corresponding events
+        meta: {
+          analytics: [
+            ['event', {
+              eventCategory: 'counter',
+              eventAction: 'increase',
+              eventLabel: 'counter experiment',
+              eventValue: 1
+            }]
+          ]
+        }
+
+      })
+    }
+  }
+})
+```
+
+The way we can construct the track method is just by creating an array and the first argument will be one of the methods available in `vue-analytics` API
+
+* event
+* exception
+* page
+* query
+* require
+* set
+* social
+* time
+* untracked
+* ecommerce
+* commands
+
+the second parameter will be our data as usual constructed in a normal call, so if in a component we will have
+
+```js
+export default {
+  name: 'MyComponent',
+  methods: {
+    clickMe () {
+      this.$ga.event({
+        eventCategory: 'counter',
+        eventAction: 'increase',
+        eventLabel: 'counter experiment',
+        eventValue: 1
+      })
+    }
+  }
+}
+```
+
+or
+
+```js
+export default {
+  name: 'MyComponent',
+  methods: {
+    clickMe () {
+      this.$ga.event('counter', 'increase', 'counter experiment', 1)
+    }
+  }
+}
+```
+
+then in our Vuex action we will write
+
+```js
+commit('increaseCounter', {
+  meta: {
+    analytics: [
+      ['event', {
+        eventCategory: 'counter',
+        eventAction: 'increase',
+        eventLabel: 'counter experiment',
+        eventValue: 1
+      }]
+    ]
+  }
+})
+```
+
+or
+
+```js
+commit('increaseCounter', {
+  meta: {
+    analytics: [
+      ['event', 'counter', 'increase', 'counter experiment', 1]
+    ]
+  }
+})
+```
+
+### Multiple events
+
+The `analytics` property inside the `meta` object is an array, so it is possible to fire multiple events with one action
+
+```js
+commit('someAction', {
+  meta: {
+    analytics: [
+      ['event', 'counter', 'increase', 'counter experiment', 1],
+      ['page', '/about'],
+      ['set', 'userId', 12345]
+    ]
+  }
+})
+```

src/config.js

@@ -1,5 +1,7 @@
 import { merge, noop } from './helpers'
 
+const isProduction = process.env.NODE_ENV === 'production'
+
 const defaultConfig = {
   id: null,
   router: null,
@@ -31,9 +33,9 @@ const defaultConfig = {
   },
 
   debug: {
-    enabled: false,
+    enabled: !isProduction,
     trace: false,
-    sendHitTask: true
+    sendHitTask: isProduction
   },
 
   checkDuplicatedScript: false,

src/index.js

@@ -4,6 +4,7 @@ import { errorHandler } from 'lib/exception'
 import config, { update } from './config'
 import { onAnalyticsReady } from './helpers'
 import ga from 'directives/ga'
+import analyticsMiddleware from './vuex/analyticsMiddleware'
 
 export default function install (Vue, options = {}) {
   update(options)
@@ -20,5 +21,6 @@ export default function install (Vue, options = {}) {
 }
 
 export {
-  onAnalyticsReady
+  onAnalyticsReady,
+  analyticsMiddleware
 }

src/vuex/analyticsMiddleware.js

@@ -0,0 +1,27 @@
+import query from '../lib/query'
+import lib from '../lib'
+
+export default store => {
+  store.subscribe((mutation, state) => {
+    if (!mutation.payload || !mutation.payload.meta) {
+      return
+    }
+
+    const { analytics } = mutation.payload.meta
+
+    if (!Array.isArray(analytics)) {
+      throw new Error('The "analytics" property needs to be an array')
+    }
+
+    analytics.forEach(event => {
+      const type = event.shift()
+      const props = event
+
+      if (!(type in lib)) {
+        throw new Error(`The type "${type}" doesn't exist.`)
+      }
+
+      lib[type](...props)
+    })
+  })
+}