Vuejs Event tracking using Google analytics

Question

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'
});

Answer 1

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

Update: The author has stopped maintaining the package and recommended using another new package he has built called vue-gtag. If you are using Vue2, use this branch instead.