Adding Google Analytics to personal website

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 case is my personal website

    step 1

    analytics account setup 1

step 2

analytics account setup 2

step 3

analytics account setup 3

Getting the Tracking ID for the property to Measure

  • Tracking ID is the identifier that will be given in the gatsby config of my personal website under the gatsby google analytics plugin
  • Following will help you find the same property settings tracking id property settings
  • Take a note of the Tracking ID

Adding the gatsby plugin

  • Need to install the plugin gatsby-plugin-google-analytics (Ref: https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/)
  • Run the command in your local dev environemtn npm install gatsby-plugin-google-analytics
  • Add the following block to gatsby-config.js

        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID || "none"
            }
        }
    
  • GATSBY_GOOGLE_ANALYTICS_TRACKING_ID is an enviornment variable that needs to be added to the deployment environment, to not expose the Tracking ID to public

Setting Env Variable in AWS Amplify

Deployment environment

  • My personal website has been setup to be hosted and deployed via AAWS Amplify

    • Has the advantage of automatic provisioning of the AWS resources
    • CI/CD built in
    • Automatic Depoloyment when code is merged to master branch on a connected github repository

Amplify Console - Environment Variables

  • Login in to Amplify Console: https://console.aws.amazon.com/console/home with AWS credentials
  • Select the app (website deployment) and under App Settings check for Environment Variables amplify env vars
  • Click on Manage Variables add tracking ID in env var 1
  • Click on Add Variable. Add GATSBY_GOOGLE_ANALYTICS_TRACKING_ID as the Variable and under Value paste the Tracking ID copied from Google Analytics add tracking ID in env var 2
  • Once Saved, environment variables list should show the value add tracking ID in env var 3

That's it !

Once Setup, Google Analytics will now start tracking the metrics in Real Time (eg: Active Users). Analytics has a lot of potential in tailoring the content to the target audience

analytics dashboard

Latest Blogposts

Managing the NodeJS versions on Windows

Node Version Manager (nvm) helps in managing multiple NodeJS versions

13 November 2022

Customizing the Powershell terminal with oh-my-posh

Instructions on customizing the terminal in powershell with oh-my-posh and winget

7 July 2022

Github login using access token via command line

Logging in using github access token (no more passwords)

29 September 2021

Adding Google Analytics to NuxtJS app

Adding Google Analytics GA4 property to NuxtJS App

2 September 2021

Productive Taskbar Settings missing in Windows 11

Very useful Taskbar Settings goes missing in Windows 11.

6 July 2021