Integrating Google Analytics V4 with Vue SPA Web App with Vue Router & VueX

For any digital platform, product metrics play a crucial role in its journey so when Our Product Manager and I were discussing extensively tracking the user activities throughout our newly launched enterprise platform, we got immediately hooked on it.

Image generated from textintoimages.com

First, we identified our needs, and how this will help us, and when we understood it was the need of the hour, we started to build it. Before jumping directly into implementation, I will try to elaborate on the what, why and where of this, and then we will go for the how.

Please feel free to skip to the central implementation part if you are clear about your objective though I would still suggest taking a peek, you may get some new insights.

What are Product Metrics? Why it's necessary?

Product Metrics are key performance indicators that provide a clear picture of how the product is performing and how users are interested in it.

There are various important metrics for any product starting with the number of active users to reach, activation, engagement, and retention, which helps in measuring the health of your product and getting insights on how to improve the product.

The Product Metrics we wanted to track

For starting some of the very important metrics that we wanted to track with our platform were —

• Page Views
• App Usage Sessions
• User Interactions
• Dimensions

Don’t forget to check out this interesting article by our teammate — Deeplinking In Meteor.

Implementation

Our platform primarily runs on Vue + GraphQl and it's a SPA ( Single Page Application). So technically for implementing GA4, we can directly use the Vanilla JS SDK provided by Google.

[UA→GA4] Tips for switching from analytics.js to gtag.js

Problem

But there's one fundamental issue above approach, the Vanilla js GA SDK is the very bare minimum and doesn't go well with Vue and its SPA principles ( SPA routing, child routing paradigms, asynchronous event tracking ) and those can be solved but it will need a good amount of work on creating a wrapper on top of GA SDK for Vue js.

Solution

Hence I was looking for different solutions and that's when I saw this amazing package called vue-gtag from Matteo Gabriele, and it had all my concerns resolved.

Vue-gtag is basically a wrapper on top of the official vanilla SDK of Google Analytics, extensively made for Vue js.

To set this up you just have to first run the below command to install the npm package,

npm install vue-gtag

The current version we are using is,

    "vue-gtag": "^1.16.1",

In the main.js file the below code needs to be added so that vuegtag instance is available throughout the app,

import VueGtag from 'vue-gtag';
...
Vue.use(VueGtag, {

  config: {

    id: process.env.GOOGLE_ANALYTICS_PROPERTY_ID

  }

});

So GOOGLE_ANALYTICS_PROPERTY_ID is a config that says what’s the Google Analytics property of the web application.

Now this implementation will provide an instance of gtag throughout the app and we can access it by,

this.$gtag

Tracking Events

By default, the plugin tracks the pageview events on a change of URL paths. For custom event tracking we need to use the global gtag instance like below,

this.$gtag.event("Event Details/Title", {
  event_category: "Click",
  event_label: "Event label",
  value: "If any event value is associated"
})

That’s all about GA4 and VueJS integration. Don’t forget to smash the clap button and if you have any questions then comment on the article, I would be happy to answer those.

Read interesting articles on VueJS,

How Not To Vue: 3 Common Vue JS Mistakes That One Should Avoid

Props, States and Events in Vue JS Explained with Code Examples