Adding Google Analytics to NuxtJS app

Setting up Google Analytics Account

  • Go to Google Analytics home page
  • Sign in with your google account (otherwise Sign Up)
  • Click on the Admin icon on the left pane admin create account analytics
  • Create an account for the website by providing the details for the property to measure, which in this my business website: Skynet Technology Ltd analytics ga4 account setup 01

    • Provide the details about the business
  • Click DataStreams under the property column and create a new Web Stream analytics ga4 account setup 02
  • Finally something like the following should appear on the screen with a Measurement ID that is of the format G-XXXXXXX. Make a note of this analytics ga4 account setup 03
  • Now go in the Source code of the NuxtJS app and create a folder called plugins at the root with a file called gtag.js js app setup 01
  • Install the vue-gtag package using yarn (or npm if you use it). Please note "vue-gtag": "^1.16.1" is the working version with this setup.
yarn add vue-gtag
  • Add the following to the plugins/gtag.js file. Replace the value against id by providing the Measurement ID shown in the earlier step
import Vue from "vue";
import VueGtag from 'vue-gtag';

Vue.use(VueGtag, {
    config: {id: 'G-XXXXXXXXXX'}
})
  • Add the path to the created plugin in nuxt.config.js file at the root

    plugins: [
    '@/plugins/gtag'
    ],
    

    js app setup 02

That's mostly it. Just follow through your deployment process and should see the real time stats as a method of verification verification realtime

References

Latest Blogposts

Github login using access token via command line

Logging in using github access token (no more passwords)

29 September 2021

Productive Taskbar Settings missing in Windows 11

Very useful Taskbar Settings goes missing in Windows 11.

6 July 2021

Secureboot + Ubuntu + VirtualBox Signing kernel modules

Set of steps required for dealing with secureboot on Ubuntu where VirutalBox service has issues

9 May 2021

Fixing the postfix error dpkg

Steps to fix the postfix error happening during apt upgrade ubuntu.

21 April 2021

Running a react app on Local Kubernetes cluster on Windows 10

Process and steps for running react app on local k8s cluster using minikube on windows 10

16 March 2021