Aiki x Developer

gatsby

3 Min to Deploy: Adding Google Analytics in Gatsby

June 6th, 2019

google-analytics

Grüß dich, it's Arisa, a freelance Full-Stack & Frontend Developer living in Germany.

When you have a fresh website you just finished to develop and deploy to be in public, you want to know who will be checking your website from where and which devices.

No matter on what platform you have for your website, everyone puts Google Analytics to see who are the visitors of your websites.

Everything is handy with Google Analytics to track the access numbers you get and who are the people looking at your websites from all over the world.

Of course, you can use Google Analytics into your JAMStack websites/apps powered by Gatsby!

This article covers every steps you need to set up Google Analytics for Gatsby sites.

You'll only need 3 minutes to set up everything in here.

Let's get started😎

Get your tracking ID in Google Analytics account

Since you've been searching for the way to apply Google Analytics into your Gatsby websites, I shortcut the process to create an account in Google Analytics. (No need to say but in case, you must have a Google acoount.)

You can find bunch of nice tutorials with Googling "Google Analytics create account."

We'll go over and expect you already have a Google Analytics account.

Next thing, you need to get a tracking ID for your website.

This is also something you can find bunch of tutorials in everywhere, so I shortcut.

Then finally, we talk our main topic in here.

Install a plugin, gatsby-plugin-google-analytics

Of course, Gatsby has a nice plugin always for us✨

Just download the plugin, gatsby-plugin-google-analytics with the command $ yarn run gatsby-plugin-google-analytics or $npm install --save gatsby-plugin-google-analytics .

Add the plugin and tracking ID into gatsby-config.js

Then we add gatsby-plugin-google-analytics to gatsby-config.js file same as any other Gatsby plugins.

Your configuration looks something like this.

google-analytics-config-default

Wait...

Darn! My tracking ID is visible to the entire world!😱

No worries, it's not yet done the process.

Instead of putting your tracking ID directly into config file, we combine with Netlify.

Edit your tracking ID value to this.

google-analytics-config-key-value

Then, last thing we need to do is, set the key and values as a variable in Netlify.

Add key and value as a variable in Netlify settings

You need to link your Netlify and your Gatsby project before we do this.

Then, go to the `Settings` and choose `Build & Deploy`.

You'll find the section called `Environment` and hit `Edit variables`.

netlify-google-analytics-tracking-id

You'll see inputs with key and value.

Set the key as you wrote in gatsby-config.js, "GOOGLE_ANALYTICS_TRACKING_ID" and value is your tracking ID from Google Analytics.

After you saved this variable, tadaa 🎉!

You already can check on your Google Analytics' dashboard!

Summary

It's better avoid putting something personal IDs in config file.

Some people still do like Google Analytics because anyway, people still can figure out if they know the way to use the dev tool.

But setting variables can be used for many other situations like linking CMS with Gatsby projects to make private your access tokens and IDs.

All you needed to set up Google Analytics in Gatsby project is 3 minutes of your time, gatsby-plugin-google-analytics and Netlify variables ✨

Hope this article helps you.

Tschüs