Weekend Hack: Add analytics and customize a GatsbyJS site

Photo by Tim Mossholder on Unsplash

The goal of this post is to customize and extend the GatsbyJS blog created in last week’s Weekend Hacks. We will add Google analytics, and create a custom theme.

This post is part of the Weekend Hack series, short developer stories focused on learning by doing. Step-by-step instructions and repository links are provided.

The article is divided into two main sections: the first covering Analytics, and the second tackling customization.

Google Analytics

As our website traffic grows from zero (hopefully), it becomes more and more important to track traffic analytics. How many visitors, from which source (referrals, search engines…) they come, and from which location they access our website, become questions which answers can provide significant business value.

There are multiple analytics tools out there, but for the sake of this tutorial, we will choose Google Analytics, which provides a very generous free tier with 10 million hits per month. Luckily for us, GatsbyJS has a plugin that makes setting up this analytics very easy. Furthermore, the starting template that we used in the previous Weekend Hack post, comes with this plugin installed by default!

Step by step setup

First, create a Google Analytics account with your Google account here.

Then, create a new Property (image below). Usually, we will create one property per each web site that we want to track. As soon as we create the property, we will get a Tracking ID with the format UX-XXXXXXXXX-X . Note it down, as we will need it to set up the plugin.

The first step for creating a Google Analytics property, selecting the target to measure

Access locally (by cloning it) the GitHub repository that contains our blog created on last week’s Weekend Hack episode, and make sure you have the required development environment setup.

If you are using a starter that doesn't come with the gatsby-plugin-google-analytics plugin installed, install it by typing in the console:

npm install — save gatsby-plugin-google-analytics

Then, append or replace the following code inside gatsby-config.js, in plugins: [...]. Don't forget to “UA-XXXXXXXXX-X” with your own Tracking ID.

{
      resolve: `gatsby-plugin-google-analytics`,
      options: {
         trackingId: "UA-XXXXXXXXX-X",
      },
},

Commit the changes, push to the remote and access the custom domain of your blog (in our case, https://gatsbyjsnetlify.tk/). We will be able to see the active user count increase in the analytics dashboard.

A capture of the Google Analytics dashboard for our blog

Customizing Site

GatsbyJS supports multiple ways of handing styles, with the help of CSS libraries and frameworks. The started that we picked has native support for Typography.js, so we can leverage and tweak supported themes. The themes are available as an interactive webpage here:

Typography.js

We will change the starters Typography.js theme to typography-theme-stern-grove. The default styles can be further extended following the API. Add the following to the typography.js file:

import sternGrove from 'typography-theme-stern-grove'
const typography = new Typography(sternGrove)

On top of that, we did some more style changes to the layout and content. Feel free to extend and customize your blog as much as you want!

Customized GatsbyJS blog

As a side note, it is worth pointing out that GatsbyJS is blazing fast and performs well in situations with low-network, out of the box.

Google Lighthouse results

Summary

As we saw, adding analytics and customizing a GatsbyJS blog is a breeze. When considering the extensibility provided by the plugins, starters, themes, and React components, GatsbyJS stands as a strong option to create fast and easily maintainable static websites.

Resources

• Github repo → https://github.com/aperkaz/gatsby-blog-in-netlify

Weekend Hack posts:

Weekend Hack: Building an Unsplash bot for Telegram with Python

Weekend Hack: Building a GatsbyJS blog and deploying it with Netlify