Vueing with GA4: Analytics for the Modern Vue Developer

Accumulation of Google Analytics (GA4) in the Vue application comprehends a few steps to track user activities, interactions, and events. Here’s a general guide to get you started:

Vue.js is a progressive framework for creating single-page applications and dynamic user interfaces.

Google Analytics is a web analytics service that provides several analytical tools useful for insights on website performance and marketing campaigns.

Table of Contents

1. Create property in the GA Dashboard
2. Get Measurement ID
3. Install the analytics plugin in the Vue app
4. Configure the plugin in the Vue app
5. Configure custom events for tracking

Let’s start!

Create property in the GA Dashboard

First, you need a GA4 property in your Google Analytics account but if you don’t have you can create one by following the below steps:

1. Sign in to your Google Analytics account
2. Click on Admin (You’ll get that button at the bottom in the left sidebar)
3. Then in the left side panel click on the + Create button and select the property option from it.
4. Then enter the name of your property, in my case I have added demo-vue-ga4
5. Select your business details
6. Then choose your platform from Web, Android app, and iOS app. In my case, I have selected Web as am going to track my website activities.
7. Last, select your Stream, in my case I have added my website URL

Get Measurement ID

Once you are done with your property setup then you need your Measurement ID to track your activities, it is a unique identifier for your Data stream.

1. Click on Admin button
2. In the Data Collection and Modification section, click Data Streams
3. Then click on the stream that you added earlier
4. Copy your MEASUREMENT ID (G-D*******Z)

Install the analytics plugin in the Vue app

Here we’ll use the vue-gtag plugin that supports Google Analytics, this plugin helps to send event data to Google Analytics.

Install the plugin via npm or yarn:

npm install vue-gtag
# or
yarn add vue-gtag

The current version which we are using is,

"vue-gtag": "^2.0.1"

Configure the plugin in the Vue app

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

import { createApp } from 'vue'
import App from './App.vue'
import VueGtag from "vue-gtag";

const app = createApp(App);

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

app.mount('#app');

Replace YOUR_MEASUREMENT_ID with your actual GA4 Measurement ID that you copied earlier.

When you finish the above changes, you’ll see ‘Active Users’ data in your Analytics dashboard, as shown in the image below.

vue-gtag automatically tracks your page views if you have already setup vue-router plugin, as I have shown you in the screenshot below.

import { createApp } from 'vue'
import App from './App.vue'
import VueGtag from "vue-gtag";
import router from "@/router/index"; // Your router file where you have all your routes

const app = createApp(App);

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

app.router.mount('#app');

Configure custom events for tracking

If you have custom tracking needs, you can use $gtag function provided by vue-gtag plugin.

Syntax:

this.$gtag.event('your_event_name', {
  event_category: 'your_event_category',
  event_label: 'your_event_label',
  value: your_event_value
});

Below, I’ll give you an example of creating custom events. Suppose I want to track a user’s activities and want some user details such as route URL, user ID, organization Name, and team ID. With the help of the code below, I can send data from my Vue page.

this.$gtag.event("userDetails", {
  page_name: this.$route.name,
  userId: this.user._id,
  team_id: this.user.organization._id,
  organizationName: this.user.organization.name,
});

Note: You must add a custom event code on that page only where you’ll always get user details, otherwise you’ll not get data in your GA4 dashboard.

So, every time you hit your custom event, you’ll get the user details in your dashboard. I have added a Screenshot so that you can see that I am getting userDetails event data in my Dashboard.

Conclusion

Integrating Google Analytics 4 (GA4) with Vue.js unlocks a world of possibilities for developers and businesses looking to gain deeper insights into their web applications. By exploiting GA4's powerful capabilities, such as event tracking, enhanced measurement, and detailed user behavior analysis, you can make data-driven decisions to optimize user experiences and improve overall application performance.

Happy coding!

For more updates on the latest tools and technologies, follow the Simform Engineering blog.

Follow us: Twitter | LinkedIn