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

Introduction

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?

Requirements

• Already signed in to analytics.google.com. If not, use your Gmail to sign in.
• A gatsby 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

Testing

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.

Conclusion:

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:

Resources:

• Youtube: (Guiding Digital)
• Gatsby Plugin Gtag