Adding Google Analytics 4.0 to your Gatsby Site

Monitor and evaluate your website performance using Google Analytics 4.0 on your gatsby website for free.

Topics to cover:

  • Setting up a Google Analytics account
  • Configuring Gatsby to use the Global Site Tag


In today’s tutorial, I will help you add Google Analytics 4.0 to your Gatsby website for free using the Global Site Tag. Analytics enables you to evaluate the performance of your website and can help you optimize your website content so you can provide the most value to your users. I am assuming you have developed a small website, and you need a way to track how users interact with this website?


Setting up A Google Analytics account

Account Creation:

  1. Click on the Admin link on the bottom left side navigation bar.
  2. On the Admin tab, click on Create Account to set up an Account by providing your account name.
  3. Next, create a Property by filling in the form fields for the Property setup. By default, you’ll be using the Google Analytics 4 property setup.
  4. Provide details for the About your Business section(industry, time zone, etc.)

Adding a Data Stream:

A stream is a source of data(user activities such as page views, clicks, etc.) for the Property set above. A property can have multiple data streams(web, ios, android), each coming from each platform.

For now, you will only add “web” as a data stream to allow Google to collect data based on user activities on the website. You can view the data in your reports and on the Analysis page.

  1. On the data stream page, click on the option “web”.
  2. Add your website URL and data stream name.
  3. Under Enhancement Features, go to advance settings -> Pageviews and uncheck the option Page changes based on browser history events and save the changes.
  4. Click on “Create Stream” to create your data stream.
  5. Finally, copy your measurement ID and keep it safe somewhere(maybe, in a text editor)

Reasons for unchecking the checkbox “Page changes based on browser history events”

Because Gatsby is a single-page app, we will end up with Duplicate page views sent each time a user visits a new page on our website. To prevent this behaviour, we uncheck the checked box for the option Page changes based on browser history events.

Configuring a Gatsby Site

  1. Install the official plugin on your Gatsby website to implement the Global Site Tag by running the command:
npm install gatsby-plugin-google-gtag

2. Inside your Gatsby project, open the gatsby-config.jsfile and add the settings below in your plugins array:

resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
"YOUR GA-TRACKING_ID", // Google Analytics / GA
pluginConfig: {
// Puts tracking script in the head instead of the body
head: true

3. Build and serve the production version of your Gatsby site, which will be running by default on localhost:9000.

gatsby build
gatsby serve


Now that you have the production version running in your web browser(preferably chrome);

  1. Add Google Analytics Debugger Chrome extension to your chrome browser and turn it on.
  2. Visit your analytics dashboard and click on Realtime. You should see one(1) user displayed under the real-time users’ section and other information such as page views.


Thank you 🙏 for reading up till this point. If you have any suggestions or feedback, kindly leave that under the comment section on my medium blog post. Below are some resources I used to add Google Analytics 4.0 to my Gatsby website:





A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

#092 | Simulating An Epidemic Outbreak With JavaScript — Part 2

Roadmap Update ❤

How to fix non responding task bar icons in windows 11

Common pitfalls of Single Page Applications & How to handle them

How to Add a File Input Button and Display a Preview Image With React

Architectural Beams in Front End

React Optimizing Performance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

More from Medium

The future of web development is all about insights-first applications.

How to Plan, Build, & Run a Value Adding Web-App

Get Started with Bloomreach Headless Experience Manager — Part 1: Channels

Hacktoberfest 2021: Process Analytics makes its mark