Vuejs Event tracking using Google analytics

问题:

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 tracking 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>
  <button id="openmodal"  data-purpose="Opt In" class="btn__primary" aria-label="Help" @click="optIn">Opt In</button>

In analytics

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

回答1:

I ended up using vue-analytics . There is Easy to follow documentation from the author

回答2:

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.