DEV Community

Cover image for Adding Google Analytics to personal website
Narendra Kumar Vadapalli
Narendra Kumar Vadapalli

Posted on

Adding Google Analytics to personal website

Click here for Original Post

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
    Alt Text

  • 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

    Alt Text

step 2

Alt Text

step 3

Alt Text

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 Alt Text Alt Text
  • Take a note of the Tracking ID

Adding the gatsby plugin

        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID || "none"
            }
        }
Enter fullscreen mode Exit fullscreen mode
  • 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 Alt Text
  • Click on Manage Variables Alt Text
  • Click on Add Variable. Add GATSBY_GOOGLE_ANALYTICS_TRACKING_ID as the Variable and under Value paste the Tracking ID copied from Google Analytics Alt Text
  • Once Saved, environment variables list should show the value Alt Text

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

Alt Text

Discussion (0)