CodePaper
About
Services
BlogContact

Filed Under: Gatsby

Setting up Google Analytics with Gatsby in a Jiffy

Setting up Google Analytics with gatsby-plugin-google-analytics is something that is key to track users and user behavior for any website.

By Alex Quasar
gatsby-google-analytics

Step 1: Create a Google Analytics Account

Sign up for Google analytics if you haven't yet and and then navigate to all accounts or your dashboard

Currently at the very left bottom you will see and admin / settings tab with a gear icon. Click on that.

Click on Create New Account and fill out all the instructions with your website name. In our case this will be a websitewith our website name and website url.

Once you have filled out your industry name and timezone you will see a page with an tag looking something like this

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123456789-1');
</script>

In our case, this example tag is UA-123456789-1.

Google weirdly does not allow you to just copy and paste the ID only, so I just copy the whole thing into NotePad first and then copy and paste the ID.

Step 2: Gatsby Plugin

Head over to your code editor and in your project install the Gatsby Google Analytics Plugin which is an official Gatsby plugin.

npm i gatsby-plugin-google-analytics

Now inside the gatsby-config.js file I really only care about the Tracking ID. Inside the plugins array I simply add

 {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GATSBY_GOOGLE_ANALYTICS_ID,
      },
 }

I have use environmental variables here for best practice. I don't really know if Google Analytics ID is super sensitive info, regardless I don't want to share it to the rest of the world when pushing it to a repo.

For this I create a .env.development file and .env.productionfile in the root directory of my project like such

GATSBY_GOOGLE_ANALYTICS_ID=UA-123456789-1

Once that is done, push it the gatsby-config changes to your repo and we are all set...Hurrah!

If you are using Netlify, which I strongly recommend if you are a using Gatsby or a developing with the JAMstack then simply add the environment variables to Netlify as well.

Step 3 Testing

We can now head back to Google Analytics and under real time see if there is any users on our site by going to a page on your site that nobody else if going probably going on and seeing if it shows up in your Google Analytics Dashboard.

Step 4 One Last Thing

We should create a IP exclusion view in Google Analytics, so we don't count ourselves us users visiting the site. You can do that by creating a new view and setting up a IP exclusion or IP exclusion list.

Summary

This was a short and sweet article on how to get Google Analytics up and running with Gatsby. Of course there is a ton of other configurations and settings you can tinker with and these are all available in the official Google Analytics and Gatsby docs

Continue Reading

Navigation
HomeAboutServicesBlogContactPrivacy PolicyTerms & Conditions
Follow Us
Services
Websites
Contact Us

codepaper.dev@gmail.com

587.501.7726

Subscribe To Our Newsletter

Stay up to the date with the latest in Automation and CodePaper by subscribing to our newsletter

Special Thanks To