Vuetify & Google Analytics Events

As in all development projects, it’s a must to gather user activity information — why not do it the easy way? I’ll show you a method of how you can send button clicks to Google Analytics in a Vuetify project by extending the VBtn component.

1. Setting up the project

Vue2 with vue-cli:

$ vue create vuetify-button-google-analytics

Answer the questions & setup your Vue project (choose Vue2!), then:

$ vue add vuetify

The Vuetify setup is going to ask a few more questions — set it up as you need it, then start the project with. There’s a really good explanation on how to set up your Vue + Vuetify project on the Vuetify Getting Started page. Check if your app runs nicely by starting it:

$ npm run serve

If everything runs smoothly, you can stop the app. If there are errors, you should find the problem (not in the scope of this article) or clear the project & repeat the steps above. After you see the project is OK, just add vue-gtag from NPM:

$ npm install vue-gtag

2. Setting up vue-gtag

vue-gtag has nice documentation on how to set it up.

First, you need your Google Analytics id (something like “UA-*******-*”). If you don’t know it, you can get it from your GA account. Please note, that with vue-gtag it’s possible to measure pageviews & other events too, but here I’m only focusing on sending an event by clicking a VBtn component.

When the package is downloaded, you can add it to the main.js in the src folder. This is how your main.js should look like (if you follow the simplest route I describe here):

// src/main.js
import Vue from ‘vue’
import App from ‘./App.vue’
import vuetify from ‘./plugins/vuetify’
import VueGtag from ‘vue-gtag’
Vue.use(VueGtag, {
  config: { id: ‘UA-1234567–1’ } // don't forget to modify this!
})
Vue.config.productionTip = false
new Vue({
  vuetify,
  render: function (h) { return h(App) }
}).$mount(‘#app’)

When this package is set up, you might want to see whether an event is sent out from your app. Chrome users have an easy way of doing this: with the GTM/GA Debug Chrome extension. You can add this tool to your developer console, and see what GA events are triggered.

3. Base state

In the GitHub repo, I cleared everything from the src folder that is not needed (src/assets, src/components, src/App.vue) just to make this project clean.

// src folder state
src/
|-assets
|-components
|- plugins
 |- vuetify.js
|- App.vue
|- main.js

4. Adding the new button component

Vuetify discusses how to extend one of its components, and it seems fairly easy & straightforward. The only thing is if you want to extend a component, you might want to look at its code in the node_modules to see what can be extended & what must be added anew. To extend the click method of VBtn, create a new file src/components folder: ExBtn.js, and set its content to the following:

// src/components/ExBtn.js
import { VBtn } from ‘vuetify/lib’
export default {
  extends: VBtn,
  name: ‘ExBtn’,
  props: {
    gacategory: {
      type: String,
      default: ‘Button’
    },
    galabel: {
      type: String,
      default: ‘Event label’
    },
    gavalue: {
      type: [String, Number],
      default: ‘’
    }
  },
  methods: {
    click (e) {
      !this.retainFocusOnClick && !this.fab && e.detail && this.$el.blur()
      // our new method is added before the basic ‘click’ event is emitted in the app
      this.trackEvent({ category: this.gacategory, label: this.galabel, value: this.gavalue })
      this.$emit(‘click’, e)
      this.btnToggle && this.toggle()
    },
    // trackEvent is a new method in our extension
    trackEvent ({ category = ‘Button’, label = ‘Event label’, value = ‘’ }) {
      // check if $gtag is there
      if (this.$gtag) {
        this.$gtag.event(‘click’, {
          event_category: category,
          event_label: label,
          value: value
        })
      }
    }
  }
}

When the new component is created, we can import & register it in App.vue, and use it in the template section:

<template>
 <v-app>
  <v-main>
   <v-container>
    <v-row>
     <v-col>
      <ex-btn
       :gacategory="category"
       :galabel="label"
       :gavalue="value"
       @click="handleExtendedButtonClick"
      >
       Extended Vuetify button
      </ex-btn>
     </v-col>
     <v-col>
      <v-text-field label="GA Category" v-model="category" />
      <v-text-field label="GA Label" v-model="label" />
      <v-text-field label="GA Value" v-model="value" />
     </v-col>
    </v-row>
   </v-container>
  </v-main>
 </v-app>
</template>
<script>
import ExBtn from "@/components/ExBtn";
export default {
 name: "App",
 components: {
  ExBtn
 },
 data() {
  return {
   category: null,
   label: null,
   value: null
  };
 },
 methods: {
  handleExtendedButtonClick(e) {
   // just to see that the click handler still works
   console.log(e);
  }
 }
};
</script>

I set up three VTextFields so you can try setting the category, the label, and the value of the GA event dynamically, and also set up a simple click handler (handelExtendedButtonClick), to show that the click event of the button is still accessible.

5. Check the GA events

To see if everything works fine, you can use the aforementioned GTM/GA Debug chrome plugin. First, start your project in dev mode:

$ npm run serve

Go to http://localhost:8080 in your Chrome browser & open the debug console, then go to the GTM/GA Debug tab of the console. If you open it the first time, you might need to refresh the page before the extension can pick up GA events.

Set the GA Category, GA Label, and GA Value in the corresponding text fields on the page. Then if you click the button (“Extended Vuetify Button”) and just look at GTM/GA Debug tab, you can see the events showing up there: an object appears with the set parameters appear in the GTM or the GA tab of the extension (whichever you are on).

Pretty neat, isn’t it?

This is an easy way to empower your Vuetify buttons to emit Google Analytics events on every click. You can use the original VBtn to have buttons not measured & now, you also have an “upgraded”, separate ExtBtn component when you want to register user interactions.

With this method, you can send data to Google Analytics with dynamic content, so it can be integrated into any Vue-Vuetify project.

Here is the GitHub repo for this small project: https://github.com/gegeke/vuetify-button-google-analytics