How to Add Google Analytics to Gatbsy Site

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

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.