Add Google Analytics to Vue JS

Integrating Google Analytics with a Vue.js application is a straightforward process. After the integration, you will be able to track and analyze user interactions within your web app.

Here is how to integrate GA with Vue JS. Let's dive in!

Before we dig in I want to show you something. I promise it's worth it...

Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.

That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.

Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw)

All right, enough about us. Now let's get into answering your question!

Can you spot the difference between the dashboards?

Integrating Google Analytics

Create a Google Analytics Property

First, you need a GA property. If you haven't already, set up a Google Analytics account and create a new property. After setting it up, inspect the property to obtain your Measurement ID (something like 'G-XXXXXXXXXX'). You will need this ID soon.

Install the GA Library in Your Vue.js Project

You can use the vue-gtag library, which is a Vue plugin for Google Analytics. Install it via npm:

npm install vue-gtag

Configure the Plugin

Import and configure vue-gtag in your main Vue.js file:

import Vue from 'vue';
import App from './App.vue';
import VueGtag from "vue-gtag";

Vue.config.productionTip = false;

Vue.use(VueGtag, {
  config: { id: "YOUR_MEASUREMENT_ID" }
});

new Vue({
  render: h => h(App),
}).$mount('#app');

Replace "YOUR_MEASUREMENT_ID" with your actual Measurement ID!.

Track Page Views

vue-gtag automatically tracks page views if you use Vue Router. If you have custom tracking needs, you can use the gtag function provided by vue-gtag.

Deploy and Test

Deploy your application and check your Google Analytics dashboard to see if the data is being captured.

Final Thoughts

Adding Google Analytics to your app can give you great insights. However, ask yourself: is Google Analytics the right tool for you?

GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.

I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.

If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script to your app and off you go. This takes about one minute- and there is a free version as well!

Enjoy!

Google Analytics Glossary