ElianCodes

← Back to blog

Published on 03/15/2021 19:32 by Elian Van Cutsem

Adding tracking to your Nuxt site with GA4

I’ve been wanting to see how my site did in analytics for a while now but never got to actually installing and preparing it. Now that I finally attached a new domain (elian.codes) and fixed my DNS for elianvancutsem.com. I put in the works to add google analytics to my site. (blog post coming up about how I did that soon…)

Here is a little guide on how I did it and integrated it with Nuxt

Using nuxtjs/google-analytics

The nuxtjs/google-analytics module is a Nuxt Community maintained module for Nuxt. It depends on the vue-analytics package and optimizes it for Nuxt. It’s very easy to install and configure, but it doesn’t support GA4 (yet).

Install the module with:

yarn add --dev @nuxtjs/google-analytics

and configure the nuxt.config.js by adding the module to the buildModules

{
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
}

Note that if you’re using Nuxt < 2.9 you need to add it to the modules instead of buildModules.

Then simply add a new section googleAnalytics to your nuxt.config.js

export default {
  googleAnalytics: {
    id: "UA-XXX-X",
  },
};

If your source code is private you can add it right in the config, but it’s good practice to add it as an environment variable. more about that here.

other options and configurations

There are a lot of options available to customize your config to your need and you can read more about that on the documentation.

Using vue-gtag

If you need or want to use the newer GA4, you’ll have to wait a bit longer until nuxtjs/google-analytics supports it, or use a little workaround.

You can install vue-gtag as a package and configure Nuxt to use it as a plugin.

You can install vue-gtag via cli using:

yarn add vue-gtag

then make a new file in the plugins directory called gtag.js.

then add the following to the gtag.js file:

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

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

Next, configure Nuxt to use the plugin by adding this to your nuxt.config.js file:

{
  plugins: ["~/plugins/gtag.js"];
}

That should be it!

Using an environment variable

It’s good practice to don’t expose your Google GTag. So you can add it as an environment. To do this you can just add process.env.GOOGLE_ANALITICS_ID instead of the tag in your config.

In the case of nuxtjs/google-analytics:

googleAnalytics: {
  id: process.env.GOOGLE_ANALITICS_ID;
}

and in the case of vue-gtag:

Vue.use(VueGtag, {
  config: { id: process.env.GOOGLE_ANALITICS_ID },
});

Now you can add the environment variable in your CI/CD or build config.

Hope you got something useful out of this!

Written by Elian Van Cutsem

← Back to blog

Recent Blogposts

  • 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.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.