How to add Google Analytics to your Gatsby Website

Google Analytics is a free tool offered by Google that can help you to get relevant information about your website and its visitors behaviour evaluating your website traffic.

How to setup Google Analytics in my Gatsby website?

Initially, you’ll need to set up a Google Analytics account in this link. A page for your new account will be generated and you’ll need to fill up all the necessary informations to get a tracking_id. The tracking id is basically a random number that Google Analytics create to track your website.

💁🏻‍♀️ Be sure to write the correct website URL and Website Name!

image01

Once your new account is all set up, it’s time to get your tracking number. Enter the Admin panel at the bottom of the page and then access the Property panel.

image02

Click the Tracking Info and Tracking Code to get your ID Number.

image03

Now that your Tracking ID is ready, let’s configure your Gatsby website to send the informations to Google Analytics and to make that happen, we need to install a plugin called gatsby-plugin-google-analytics using the following command:

 yarn add gatsby-plugin-google-analytics

Once you’ve installed the plugin, it’s time to add the Tracking ID to your gatsby-config.js.

{
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-XXXXXXXXX-X", // YOUR TRACKING ID
        head: true,
      },
    },

image04

After the configuration, your website is all set up to use Google Analytics. You can deploy your website and navigate to your dashboard in Google Analytics to check the website’s statistics. 🎉

Published 23 Apr 2019

Software Developer, Computer Scientist. Driven by passion.
Prsc. 👩🏼‍🚀 on Twitter