Adding Google Analytics - Gatsby Site

Google Analytics is an amazing tool that allows you to keep track of page visits, most popular pages, how people are finding your website as well as the location that they are visiting your website from. Adding Google Analytics to your Gatsby site will allow you to collect that data and more.

The first step in getting this setup is to create a Google Analytics account. Once you have created a property you will get a Tracking ID to add to your website. To add the Tracking ID to your website you will use gatsby-plugin-google-analytics.

You can get the plugin with the command

$yarn run gatsby-plugin-google-analytics

OR

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

Next you are going to add the following snippet into your gatsby-config.js file.

{
    resolve: `gatsby-plugin-google-analytics`,
        options: {
            trackingId: 'UA-XXXXXXXXX-X',
            head: true,
            anonymize: true,
        },
},

Initially I was having some issues getting this to work. What I did to resolve this was to remove the unnecessary options given on the Gatsby instructions page and just use the snippet above. I also added this to the top of the plugins.

To test this do gatsby clean and then gatsby build && gatsby serve. Then go to your Google Analytics Property and check the real time traffic. I also used a chrome plugin called Google Tag Assistant to help me verify that Google Analytics was working correctly on all pages.

I hope this was helpful and solved any issues you were having with the gatsby google analytics plugin not working.