Setting up analytics in GatsbyJS
we're going to setup Facebook and Google analytics for our Gatsby site(Lots of Pics)
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.
- Click My Apps on the top right
- Click Create New App
- 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
- 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