Prerequisite
I'm going to assume that you are already familiar with Gatsby and that you already have it set up. There are many resources online to get started and learn about Gatsby, the goal of this post is to be very straightforward so that you can immediately implement Google Analytics and then move on.
Set up Google Analytics account
When you visit the Google Analytics page, just click on the "Start for free" button to get started in setting up your account. You may be prompted to sign in to your Google account, if you don't have one, you must create one in order to use the Google Analytics feature. Once you've done that, you should be directed in a page like this:
Account set up
This is where you'll enter the information about your Google Analytics account. You want to start with account name. The account name can be the name of your business but if you're using Google Analytics for you personal blog, you can just put your full name, which is what I did. Then it is up to you if you want to check or uncheck the following check boxes.
Property set up
This represents the business's web and/or app data. For property name, you can put the name of your website, which is what I did. Then you need to enter your time zone and the currency you use.
About your business
This is the last part before you can create your account. This will be tailored depending on what you use Google Analytics for.
Setting up data stream
Once you have created your account, you'll be directed to this page:
If you're building a website, you want to click on "Web," there you'll need to put in the URL for your website and the stream name. I set the stream name as the name of my website. You can select enhance measurements in the options below. Then you can create stream and once you do that there'll be another pop up which will provide Measurement ID. You should copy that because we're going to need that for later.
Configure Google Analytics
Now that you're all set up with your Google Analytic's account, you now need to configure it into you Gatsby site. So head back over there to the gatsby-config file. In your terminal you want to run the following command:
npm install gatsby-plugin-google-gtag
If you want more information about this package then head over to the Gatsby gtag plugin, this is the recommended plugin by Google. In your gatsby-config file, you want to import the plugin in the top of the list of plugins. The plugin should take a few options, the trackingIds, head, and anonymize. We're going to use the measurement ID I told you earlier to copy and put that in the array of tracking IDs. You should store it in the .env.development file a grab it using a process.env. The below code is the output of what the import should look like:
module.exports = { plugins: [{ resolve: `gatsby-plugin-google-gtag`, options: { trackingIds: [ process.env.GA_TRACKING_ID ], head: true, anonymize: true, } }] }
Once you've done that, you have officially configured Google Analytics to your Gatsby site.
All done
To test out whether Google Analytics works for you site you can run a few commands. First run gatsby build and then gatsby serve in your terminal. It should prop up localhost:9000 when you do. Go to that link and then go to the home page of your Google Analytics account. The number of users should go from 0 to 1. And that is all, congrats! You have officially integrated Google Analytics to your Gatsby site.