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:

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

Freelance Frontend Engineer. https://www.alainperkaz.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Create a YouTube Downloader with Node.js and React

Youtube website

Teen Patti Game Winner Logic In Javascript — Teen Patti, Teen Patti pro, Variation (Like AK47…

CUSTOM ICONS kedence Theame

Create a React web application and publish it for free using mdb

How I started loving Vue

Capitalizing The First Letter In a String

Hiding an option from select drop-down using Directive and Attribute in Angular

Vue JS FAQs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alain Perkaz

Alain Perkaz

Freelance Frontend Engineer. https://www.alainperkaz.com/

More from Medium

How to use google analytics with Next.js

Storing Website Analytics in DynamoDB

Mixpanel Data Pipelines

SSR React page from Google Cloud Function endpoint

[3/9] Let’s Create a Firebase Project. Environment Setup — E-commerce Development Series