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

How to find a linux machine is a VM (Virtual Machine) or a Bare Metal

If you can SSH into a linux machine and want to find out if its baremetal or Virtual Machine

7 November 2023

Storing Github access token in git credential store

Using git credentials store the github access token to avoid the re-prompting of username and pwd

4 April 2023

Token generation for Registering Self Hosted Github Runner via REST API

Explains how to generate a token using github API to be used in turn with Github self hosted runner registration

21 March 2023

Setting up a Self Hosted Github Runner

Explains how to setup a Github self hosted runner and register

20 March 2023

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