Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

How to Add Google Analytics to Gatbsyjs Site

April 05, 2020 #Google Analytics

Create a new property in your account

Login to your Google Analytics account.

Go to Admin

Click Create Property

There are 3 options:-

  1. Web
  2. Apps
  3. Apps and web

In my case, I select Web and click Continue

Fill in the necessary information

information to fill in to create google analytics property

Frankly speaking, I not sure the industry I select is correct for a web developer blog or not. Shall I should other instead? Please tell me if you know it.

After you fill in your information click Create

Aftewards, Google Analytics will generate a tracking ID UA-12345678 for you

Install Gatsbyjs plugin for Google Analytics

npm install --save gatsby-plugin-google-analytics

While waiting for the installation, config the plugin in gatsby-config.js as below:-

module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "UA-12345678",
// Google Analytics recommend to add the script to head tag, so I set head to true
head: true,
},
},
],
}

If you would like to know more about the options setting, Check out the Gatbsyjs plugin details here

To check whether your tracking ID is successfully added to your website, Ctrl + c to close your development environment then run:-

gatsby build && gatsby serve

Visit localhost:9000

  1. Ctrl + u or right click and choose view page source
  2. Ctrl + f and paste in your tracking ID in the search field

If you could find tracking ID, it’s mean you’re successfully added google analytics to your website.


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me