Setting up analytics in GatsbyJS

This is a very visual tutorial on how to set up Google and Facebook analytics for your Gatsby site.

Google AppID

We need to create a new google app for us to get a key to use analytics. Head over to Google Analytics, login and create a new app. When you click create new app you will be prompted to enter in a few things.

• Account Name - The name of your company. Can use “Personal” as a name. Just think of the account name as organization category for your websites.
• Website name - friendly name for your website. For this blog I have it as “edwardbeazer”
• Website Url - website address. ex. edwardbeazer.com
• Industry Category - category for your website. Can be left blank if you prefer
• Reporting Time Zone - local time zone that you want the date/time format to be in.

Click create and agree to the ToS when prompted by Google.

Google will redirect to your sites analytics page. Click All Website Data on the top left

A new table will pop up showing your a quick overview of all your websites. Under the section Properties and Apps you should see your websites friendly name as well a key that starts with UA. Copy down this key, this is your google analytics appID.

Facebook AppID

Just a note, you need to have a Facebook profile in order to use Facebook Analytics. Head over to Facebook Developer Website and log in.

1. Click My Apps on the top right
2. Click Create New App

3. Fill in the address that you want notifications about your website to be sent to and the display name for the website. I used “Eddie’s Blog” for this website

4. You will get redirected to an overview of your new Facebook App. Your App ID is located at the top left of the page. Copy this down

Gatsby Setup

Let’s add the corresponding packages that will let us add analytics to our Gatsby site.

yarn add gatsby-plugin-google-analytics gatsby-plugin-facebook-analytics

npm install gatsby-plugin-google-analytics gatsby-plugin-facebook-analytics

Gatsby Config

add the following entries to your gatsby-config.js file.

    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: **google tracking key**
      }
    },
    {
      resolve: `gatsby-plugin-facebook-analytics`,
      options: {
        appId: **facebook app ID**,
        // Include facebook analytics in development.
        // Defaults to false meaning the library will only be loaded in production.
        includeInDevelopment: false,
        // Include debug version of sdk
        // Defaults to false meaning the library will load sdk.js
        debug: false,
        // Can select your language, default will load english
        language: "en_US"
      }
    },

Viewing Analytics

After some time you both Facebook and Google will start pulling tracking data from your website. To view Google data head back over to Google Analytics.

To pull Facebook data head over to Facebook Analytics. Facebook is slightly different, you get an overview of all your sites, you just need to click one to start seeing analytics