Julia Pottinger
0

Adding Google Analytics - Gatsby Site

June 30, 2020

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.


Written by Julia Pottinger who lives and works in Jamaica building useful things. Follow her on Twitter and check out her YouTube Channel

Sign up for Newsletter

Share this blog

© 2020 Julia Pottinger - All Rights Reserved