Merge pull request #98 from brunosabot/feature/directive_event_modifier

Add the possibility to choose other events than just click

Author: MatteoGabriele

docs/v-ga.md

@@ -71,6 +71,32 @@ Then we only need to add the `v-ga` directive to your element and access the met
 </script>
 ```
 
+By default, the directive is executed when the element is clicked. However, if you want to change the event type for the logging, you can add the proper event as a modifier.
+
+```html
+<template>
+   <input
+      v-model="name"
+      v-ga.focus="$ga.commands.trackFocus.bind(this, 'name')" />
+</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

src/directives/ga.js

@@ -1,17 +1,25 @@
 import config from '../config'
 
 export default {
-  inserted: function (el, { value }, vnode) {
-    el.addEventListener('click', function () {
-      let fn = typeof value === 'string' 
-        ? config.commands[value]
-        : value
+  inserted: function (el, binding, vnode) {
+    const events = Object.keys(binding.modifiers)
 
-      if (!fn) {
-        throw new Error('[vue-analytics] The value passed to v-ga is not defined in the commands list.')
-      }
+    if (events.length === 0) {
+      events.push('click')
+    }
 
-      fn.apply(vnode.context)
+    events.forEach(event => {
+      el.addEventListener(event, function () {
+        let fn = typeof binding.value === 'string'
+          ? config.commands[binding.value]
+          : binding.value
+
+        if (!fn) {
+          throw new Error('[vue-analytics] The value passed to v-ga is not defined in the commands list.')
+        }
+
+        fn.apply(vnode.context)
+      })
     })
   }
 }