Adding Google Analytics 4.0 to your Gatsby Site

Topics to cover:

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

Introduction

Setting up A Google Analytics account

  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.)
  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)

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
{
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
},
},
}
gatsby build
gatsby serve

Testing

  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:

--

--

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