How to add Google Analytics 4 in Nuxt Application?

Here, in this article, we will learn about how to add google analytics to our Nuxt application properly for both Universal id and Google Analytics 4 Id.

Having analytics is very important nowadays for any website. It helps us to know how our websites are performing, how many visitors we get, and how we can improve our site for our users.

Google Analytics is by far the most popular analytics now and it is used by millions of websites. And it is very easy to add to our websites too.

Recently google launched Google Analytics 4, which is the newer version and has some awesome features added to it. It was previously known as "App + Web" beta but now it's fully released and soon it will replace old Universal Analytics.

But in this post, we will learn both methods to add google analytics to nuxt.

Method 1: Add Google Analytics 4 Id to Nuxt (Recommended)

To add google analytics 4 to your nuxt application, we need to add vue-gtag to nuxt. The new Analytics is the one which is that has the ids in the format G-XXXXXXXXXX.

Follow the instruction to add it to your application:

Step 1: Add vue-gtag in your nuxt application.

// FOR NPM
 npm add vue-gtag
 
 //FOR YARN
 
 yarn add vue-gtag
 

Step 2 : Now make a vue-gtag.js file in your plugins directory and add the code as shown.

import Vue from 'vue'
import VueGtag from 'vue-gtag'

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

Add the analytics Id ( G-XXXXXXXXXX ) in the id field inside the config.

Step 3 : Add the vue-gtag.js file path to plugins section in the nuxt.config.js file.

plugins: ['@/plugins/vue-gtag']

And that's it, we have successfully added Google Analytics 4 to our Nuxt application.

Method 2: Add Google Universal Analytics (UA) to nuxt - (Deprecated)

IMPORTANT: This method is deprecated and won't work, use Method 1. And if you are using the universal id, change it to the Global id format.

To add UA analytics we need to add @nuxt/google-analytics npm module to our project. So follow the instruction below to add it properly.

Step 1 : Firstly, install @nuxtjs/google-analytics to your dependency.

//FOR NPM
npm install --dev @nuxtjs/google-analytics
//FOR YARN
yarn add --dev @nuxtjs/google-analytics

NOTE: if you are using nuxt < 2.9 , then you have to add it as modules (without --dev or --save-dev)

To find out which nuxt version you are using, follow the instructions in, Check Nuxt Version Quickly.

Step 2 : Now add @nuxtjs/google-analytics to buildModules in your nuxt.config.js file.

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

NOTE: For nuxt<2.9 add it in your modules section instead of buildModules section in nuxt.config.js file.

Step 3 : Now add this code in your nuxt.config.js file and add the Google Analytics Id(UA-XXX-X) to the id field inside it.

export default {
  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}

Packages Used:

https://google-analytics.nuxtjs.org/

https://matteo-gabriele.gitbook.io/vue-gtag/

Related Topics:

Add Robots.txt in your Nuxtjs Application

Generate sitemap for dynamic routes in nuxtjs application

Add custom static 404 error page in Nuxt