Adding Google Analytics to personal website
Tags: webdev, google, analytics, data
Published: 2021-03-18 00:48:57


[Click here for Original Post](https://www.narenvadapalli.com/blog/google-analytics-to-personal-website/)

### Setting up Google Analytics Account
- Go to [Google Analytics home page](https://www.google.com/analytics/)
- Sign in with your google account (otherwise `Sign Up`)
- Click on the `Admin` icon on the left pane
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id1tibzt9ps0mx01ajaw.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30x6tpv5m4ffb121v5ot.png)

#### step 2
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcnfl0ic4dqt01wj3vbv.png)

#### step 3
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq7r3dottism4a7pie0p.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfe5ezylpuke2iuojjb3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqid6tptenq9y2p02hdw.png)
- 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 A[AWS Amplify](https://aws.amazon.com/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jbpnva2z1qvvcdpm8tf.png)
- Click on `Manage Variables`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b50yhi550nagoeq4nz39.png)
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/670stv3r1eayfvak2swa.png)
- Once Saved, environment variables list should show the value
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb8b3atl7i5e6sj8asek.png)

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8whas8lcxs1jlovpwe3e.png)