From a2f82ef9492127e4d26910775789a66558cb7aab Mon Sep 17 00:00:00 2001
From: Bruno Sabot <brunosabot@gmail.com>
Date: Thu, 15 Mar 2018 15:14:58 +0100
Subject: [PATCH] Add the possibility to choose other events than just click

---
 docs/v-ga.md         | 26 ++++++++++++++++++++++++++
 src/directives/ga.js | 26 +++++++++++++++++---------
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/docs/v-ga.md b/docs/v-ga.md
index 0113213..7e7aad5 100644
--- a/docs/v-ga.md
+++ b/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
diff --git a/src/directives/ga.js b/src/directives/ga.js
index 70ef58d..f225891 100644
--- a/src/directives/ga.js
+++ b/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)
+      })
     })
   }
 }
\ No newline at end of file