Google Analytics with Gatsby

June 12th, 2019

Setting up your Gatsby site with Google Analytics

Google Analytics is a nifty tool for keeping track of your page visitors. It provides tons of useful information about where your traffic is coming from, which pages are being visited, how long, etc. We can start to see why this is pretty sweet... Must be complicated to get going, right? Nope!

First things first

To get started obviously we are going to need to set up an account with Google, the owners of all things internet these days. Easy enough just go here to sign up. It's a pretty straight forward process but if you'd like a guide check this one out.

Find your tracking ID

Navigate to the admin section of your analytics page. Now find the Property Settings tab and at the top will be Tracking Id.

Google Analytics

Wiring up GatsbyJs

Now we hook up your Gatsby site with your new analytics. Luckily there is a Gatsby plugin that does all the heavy lifting. In your project directory run:

npm i gatsby-plugin-google-analytics

Now we just move to over to our config file 'gatsby-config.js' and add a few lines of code:

plugins config

Boom. Save that file, push changes to GitHub and whalah you're in business. There are more configuration options available but this will be enough to get you what you need. For more docs check out official Gatsby documentation.

Back