Merge branch 'develop'

Author: MatteoGabriele

docs/installation.md

@@ -1,6 +1,6 @@
 ## Get started
 
-Install the package
+### Installation
 ```bash
 npm install vue-analytics
 ```
@@ -17,14 +17,63 @@ Vue.use(VueAnalytics, {
 
 **Important**
 
-For all the ES5 users out there, this package uses a default export so if you want to use `require` instead of `import` you should import the plugin like this 
+For all the ES5 users out there, this package uses a default export so if you want to use `require` instead of `import` you should import the plugin like this
 
 ```js
 const VueAnalytics = require('vue-analytics').default
 
 Vue.use(VueAnalytics, { ... })
 ```
 
+### Usage
+it is possible to use the api in two different ways:
+ - within the component scope
+ - importing methods separately
+
+#### Component scope
+
+```js
+export default {
+  name: 'MyComponent',
+
+  methods: {
+    track () {
+      this.$ga.page('/')
+    }
+  }
+}
+```
+
+#### Import methods
+
+To be able to use methods import, make sure you install vue-analytics **before** you want to use them
+
+```js
+import { page } from 'vue-analytics'
+
+export default {
+  name: 'MyComponent',
+
+  methods: {
+    track () {
+      page('/')
+    }
+  }
+}
+```
+
+#### API
+- event
+- ecommerce
+- set
+- page
+- query
+- screenview
+- time
+- require
+- exception
+- social
+
 ## Track multiple accounts
 
 Pass an array of strings for a multiple tracking system. Every hit will be fired twice: each time with a different tracker name

docs/vuex.md

@@ -1,191 +1,52 @@
 ## Vuex and Google Analytics
 
-Google Analytics it is supported also using the Vuex store, by installing the `analyticsMiddleware` plugin
+To be able to use vue-analytics from your Vuex store, just import the methods you need and fire it directly from the store
 
-### 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
-```
+## First step
+Make sure to have your vue-analytics package installed **before** start using it in your store
 
 ```js
 // main.js
 import Vue from 'vue'
+import store from './store'
+import App from './App'
 import VueAnalytics from 'vue-analytics'
-import store from './store.js'
 
 Vue.use(VueAnalytics, {
-  id: 'UA-1234-5'
+  id: 'UA-xxxx-1'
 })
 
 new Vue({
-  el: '#root',
   store,
-  ...
-})
+  render: h => h(App)
+}).$mount('#app')
 ```
 
-### Usage
+## Second step
+Start using vue-analytics API in your store
 
-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
+```js
+// store.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { page } from 'vue-analytics'
 
-Example of a store action
+Vue.use(Vuex)
 
-```js
-const store = Vuex.Store({
+export default new 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
-            }]
-          ]
-        }
-
-      })
+    increase ({ commit, state }) {
+      commit('increase', state.counter + 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
-
-**(*) pay attention to the ecommerce API at the bottom of this page, since it has a different structure**
-
-the second parameter will be our data constructed the same way as we were inside a component, for example:
-
-```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)
+  },
+  mutations: {
+    increase (state, payload) {
+      state.counter = payload
+      event('user-click', 'increase', 'counter', state.counter)
     }
   }
-}
-```
-
-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]
-    ]
-  }
-})
-```
-
-### Ecommerce and Vuex
-
-Because of its differnet API nature, the ecommerce plugin needs to be called as it in the original Google Analytics documentation.
-
-```js
-commit('someAction', {
-  meta: {
-    analytics: [
-       ['ecommerce:addItem', {
-          id: '1234',
-          name: 'Fluffy Pink Bunnies',
-          sku: 'DD23444',
-          category: 'Party Toys',
-          price: '11.99',
-          quantity: '1'
-        }]
-    ]
-  }
 })
 ```

src/index.js

@@ -1,24 +1,37 @@
 import bootstrap from './bootstrap'
 import lib from './lib'
 import { update } from './config'
-import { onAnalyticsReady } from './helpers'
+import * as helpers from './helpers'
 import ga from 'directives/ga'
-import * as exception from 'lib/exception'
-import analyticsMiddleware from './vuex-middleware'
+import { autotracking as expectionAutotracking } from 'lib/exception'
+import vuexMiddleware from './vuex-middleware'
 
 export default function install (Vue, options = {}) {
   update({ ...options, $vue: Vue })
 
   Vue.directive('ga', ga)
-
   Vue.prototype.$ga = Vue.$ga = lib
 
-  exception.autotracking(Vue)
-
+  expectionAutotracking(Vue)
   bootstrap()
 }
 
-export {
-  onAnalyticsReady,
-  analyticsMiddleware
-}
+// Vuex middleware
+export const analyticsMiddleware = vuexMiddleware
+
+// Helpers
+export const onAnalyticsReady = helpers.onAnalyticsReady
+
+// Event library
+export const event = lib.event
+export const ecommerce = lib.ecommerce
+export const set = lib.set
+export const page = lib.page
+export const query = lib.query
+export const screenview = lib.screenview
+export const time = lib.time
+export const require = lib.require
+export const exception = lib.exception
+export const social = lib.social
+
+