Best way to use Google analytics event tracking in vue js?

I am looking to track google analytics events on buttons and links. In jquery typically, I would pass values in data-attributes and fetch them and call required function. I understand I shouldn’t be using data-attributes so I am looking out for the best way of doing this , there can be multiple buttons that performs different trcking with different data-purpose (attribute) So I will need to pass data-purpose and data-user to the vue component/function

<button id=“openmodal” data-purpose=“contact form” class=“btn__primary” aria-label=“Help” @click=“contactForm”>Contact Form
<button id=“openmodal” data-purpose=“Opt In” class=“btn__primary” aria-label=“Help” @click=“optIn”>Opt In

In analytics

ga(‘send’, {
hitType: ‘event’,
eventCategory: ‘button’,
eventAction: ‘data-purpose’,
eventLabel: ‘VALUE OF BUTTON’
});

You could just call ga() from the event handler method.
Another option could be to create a globally available method, something like:

Vue.prototype.$ga = function(stuff){
  //maybe add some defaults etc.
  ga('send', stuff)
}

Then you could do:

<button id=“openmodal” data-purpose=“contact form” class=“btn__primary” aria-label=“Help” @click=“contactForm($event);$ga({eventCategory:'button', eventAction:'something'})”>Contact Form</button>

You could also create a directive, which might look a bit neater, but then you could only track “native” events, and not Vue events.

I am getting ga is not defined , further thoughts?

Ah, so ga is not available in your global context then? That would depend on how you’re importing it and how you’ve set it up I guess.

I am calling it in the header as script file

I don’t know, if you follow the google analytics setup instructions, ga should be available globally :confused:

It’s also a good idea to check out the plugins here:


Maybe they have a better solution. But it shouldn’t be necessary to use an extra plugin, you should be able to just call ga() yourself.

Try window.ga(), that worked for me.

If you’re using ES6 arrow function, it will be lexical scope. If you console.log(this) you’ll see what I mean.

captureEvent () => {
  this.$ga.event('mouseClick', 'contactUs', 'topnav');
}

should be
captureEvent = function() {
this.$ga.event(‘mouseClick’, ‘contactUs’, ‘topnav’);
}

I suggest giving Segment a try to enable analytics onto your Vue app! You can add a single line of tracking code and see this data being sent to GA by enabling the destination on our dashboard. Here is an example of using an event handler using our track call:

<template>
 <button v-on:click="trackEvent">`
   {{ title }
 </button>
</template>

<script>
export default {
  name: 'SignupButton',
  data() {
    return {
      title: 'Signup with Segment today!'
    }
  },
  methods: {
    trackEvent () {
      window.analytics.track('User Signup')
    }
  }
}
</script>

I’m the maintainer of https://github.com/segmentio/analytics-vue. With Segment, you’ll be able to switch different destinations on-and-off by the flip of a switch if you are interested in trying multiple analytics tools (we support over 250+ destinations) - without having to write any additional code. :slight_smile:

After trying quite many different npm packages I would recommend https://github.com/Glovo/vue-multianalytics

It can send to GA, FB, Segment etc.

BTW integration with Segment is much better compare to original Analytics-Vue from Segment

In case you use Firebase I would recommend to try Firebase Analytics with Google Analytics v2
See more - https://dev.to/razbakov/vue-google-firebase-analytics-5dfk