Skip to content
This repository was archived by the owner on Mar 21, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions docs/v-ga.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 17 additions & 9 deletions src/directives/ga.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
}
}