feat(directives): add v-ga

v-ga allows us to centralize all track events in one object and share it across the entire application without needs to add extra logic to our component methods

Author: MatteoGabriele

README.md

@@ -33,10 +33,10 @@ npm install vue-analytics
 
 * [Get started](/docs/installation.md)
 * [How to load Google Analytics](/docs/script-loader.md)
-* [Untracked hits](/docs/untracked-hits.md)
 * [Page tracking](/docs/page-tracking.md)
-* [Cross-domain tracking](/docs/cross-domain-tracking.md)
 * [Event tracking](/docs/event-tracking.md)
+* [v-ga](/docs/v-ga.md)
+* [Cross-domain tracking](/docs/cross-domain-tracking.md)
 * [User timings](/docs/user-timings.md#user-timings)
 * [Exception tracking](/docs/exception-tracking.md)
 * [Require](/docs/require.md)
@@ -47,6 +47,7 @@ npm install vue-analytics
 * [On Analaytics script ready](/docs/when-google-analytics-is-loaded.md)
 * [Custom methods](/docs/custom-methods.md)
 * [Ecommerce](/docs/ecommerce.md)
+* [Untracked hits](/docs/untracked-hits.md)
 * [Debug](/docs/debug.md)
 
 # Issues and features requests

config/base.config.js

@@ -11,9 +11,10 @@ module.exports = {
     libraryTarget: 'umd'
   },
   resolve: {
-    extensions: ['.js'],
+    extensions: ['.js', '.vue'],
     alias: {
-      lib: path.resolve(__dirname, '../src/lib')
+      lib: path.resolve(__dirname, '../src/lib'),
+      directives: path.resolve(__dirname, '../src/directives')
     }
   },
   module: {
@@ -26,6 +27,16 @@ module.exports = {
           presets: ['blue'],
           babelrc: false
         }
+      },
+      {
+        test: /\.vue$/,
+        exclude: /node_modules/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            js: 'babel-loader'
+          }
+        }
       }
     ]
   }

docs/v-ga.md

@@ -0,0 +1,88 @@
+#v-ga
+This directive allows us to centralize all track events in one object and share it across the entire application without needs to add extra logic to our component methods
+
+Taking as an example a button that only has to log a name in the console
+
+```html
+<template>
+	<button @click="logName">Log me</button>
+</template>
+
+<script>
+	export default {
+		name: 'myComponent',
+		
+		data () {
+			return {
+				name: 'John'
+			}
+		},
+		
+		methods: {
+			logName () {
+				console.log(this.name)
+			}
+		}
+	}
+</script>
+```
+
+To start tracking the value of `name` we can start by adding a method in the commands object that handles this action
+
+```js
+import Vue from 'vue'
+import VueAnalytics from 'vue-analytics'
+
+Vue.use(VueAnalytics, {
+	id: 'UA-XXX-X',
+	commands: {
+		trackName (name = 'unknown') {
+			this.$ga.track('randomClicks', 'click', 'name', name)
+		}
+	}
+})
+```
+
+then we only need to add the `v-ga` directive to your element and access the method from the `commands` list that now is shared in the `$ga` object
+
+```html
+<template>
+	<button 
+		v-ga="$ga.commands.trackName.bind(this, name)" 
+		@click="logName">
+		Log me
+	</button>
+</template>
+
+<script>
+	export default {
+		name: 'myComponent',
+		
+		data () {
+			return {
+				name: 'John'
+			}
+		},
+		
+		methods: {
+			logName () {
+				console.log(this.name)
+			}
+		}
+	}
+</script>
+```
+
+If there's no need to pass any arguments, we could also just pass the name of the method as a string, and the plugin will look it up for us
+
+```html
+<template>
+	<button v-ga="'trackName'">Click me</button>
+</template>
+
+<script>
+	export default {
+		name: 'myComponent'
+	}
+</script>
+```

jest.config.js

@@ -3,6 +3,7 @@ const blueJest = require('blue-jest')
 module.exports = Object.assign({}, blueJest, {
   moduleNameMapper: Object.assign({}, blueJest.moduleNameMapper, {
     '^lib/(.*)$': '<rootDir>/src/lib/$1',
+    '^directives/(.*)$': '<rootDir>/src/directives/$1',
     'vue$': 'vue/dist/vue.min.js'
   })
 })