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

I don't see any issues with using the data-* attributes. Can you create a minimal snippet or jsfiddle to show where you are having difficulty? — Nisarg Shah
– Nisarg Shah, Commented Oct 27, 2017 at 13:49

BibekStha · Accepted Answer · 2021-08-13 04:27:11Z

5

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.

edited Aug 13, 2021 at 4:27

BibekStha

1801 silver badge12 bronze badges

answered Nov 23, 2017 at 15:32

June

8232 gold badges18 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

William · Accepted Answer · 2019-02-21 21:29:08Z

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. 🙂

Collectives™ on Stack Overflow

Vuejs Event tracking using Google analytics

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related