ElianCodes

← Back to blog

Add custom tracking events to your nuxt site with GA4

Sometime ago I wrote an article about pairing Nuxt with GA4 and wanted to try it out after just playing around with it for a bit. The older Universal Analytics (UA) worked fine for me, but after using it rather intensive, I xanted to dive a little deeper into understanding how a user interacts with my website and how I can improve the user experience.

Adding GA4 support to Nuxt

Adding GA4 isn’t that hard in Nuxt, if you need a more in-depth guide on that, check out this article. Here follows a little guide without many in-depth descriptions:

Firstly we install Vue-gtag, the documentation of that package can be found here.

yarn add vue-gtag

Now we have to configure the package as a plugin in Nuxt the following way:

// analytics.js

import Vue from "vue";
import VueGtag from "vue-gtag";

Vue.use(VueGtag, {
  config: { id: "G-XXXXXXXXXX" },
});

Fill the G-XXXXXXXXXX with your specific gTag you can create in the Google Analytics dashboard.

Now actually tell Nuxt to use the plugin:

// nuxt.config.js

plugins: [
    '~/plugins/analytics.js'
  ],

That’s it for the basic GA4 tracking. You can set more options in analytics.js if you want and can read more about that on the official documentation for vue-gtag or on the gtag.js documentation.

Adding both UA and GA4 support to Nuxt

So if you’re using the setup as above, you can also add a UA support tag to take full advantage of the Google Analytics features. Nuxt has it’s own module called @nuxtjs/google-analytics module that (right now) only supports UA tracking.

Install the module:

yarn add -D @nuxtjs/google-analytics

Add it as a buildModule

// nuxt.config.js

buildModules: [
  "@nuxtjs/google-analytics",
  // Probably more modules
];

Now you only have to add your own UA tag to complete the setup:

// nuxt.config.js

googleAnalytics: {
  id: 'UA-XXXXXX-X' // or use process.env.GOOGLE_ANALYTICS_ID
},

Now the next time you build your project it will include both the UA and GA4 tracking scripts. The only thing you can add to improve your tracking is adding custom events. More about that below.

Add custom events to GA4

To understand better what actions a user undertakes while roaming around on your website, it can be interesting to define some custom events. On my website I included a custom event for the themeToggle. If a user switches theme, I get a custom event in the Google Analytics Dashboard, so I can see how important this feature actually is. If it nevers gets triggered I know that I can remove the feature without losing users.

Here I’ll explain my setup to send a trigger when toggling the darkmode:

In the Vue component you’ll have access to the this.$gtag object. So to actually send an event, we can access the following code snippet:

this.$gtag.event("action", {
  event_category: "category",
  event_label: "label",
  value: "value",
});

We can use this snippet in every component since we added vue-gtag as a component.

So to send a custom event trigger we can use the v-on:click or any other directive to call a method. Here’s an example:

<template>
  <a v-on:click="activateLightMode" class="" v-if="activeTheme === 'dark'">
    <svg>
      <path />
    </svg>
  </a>
</template>

<script>
export default {
  // ...
  methods: {
    activateLightMode() {
      // Place the logic for dark- or lightmode here
    },
  },
};
</script>

Now we need to only add a custom event to it:

<template>
  <a v-on:click="activateLightMode" class="" v-if="activeTheme === 'dark'">
    <svg>
      <path />
    </svg>
  </a>
</template>

<script>
export default {
  // ...
  methods: {
    activateLightMode() {
      this.$gtag.event("toggleDark", {
        event_category: "toggleTheme",
        event_label: "dark",
      });
      // Place the logic for dark- or lightmode here
    },
  },
};
</script>

Now you should see the event pop-up in your GA dashboard!

Happy Tracking

Written by Elian Van Cutsem

← Back to blog
  • Elians Astro Startkit

    Elians Astro Startkit

    I just published the setup I use for my personal projects. You can read more about it in this blogpost.

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.