Jekyll Google Analytics 4 (GA 4) Integration With Chirpy Theme 📊

Photo Credit campaign creators

Google Analytics (GA) 4 is the latest iteration of the popular web analytics platform, offering powerful insights into user behavior and site performance. If you’re using Chirpy theme on a jekyll powered website you know that the instruction in the docs does not support GA4, hence you won’t be able to track page views (PV) anymore.

Since I have struggled with this issue during the creation of this very blog, I have finally found a working solution to integrate GA4 with Jekyll and Chripy theme, and it’s rather very simple and straightforward 😁

In this blog post, I will detail the process of integrating GA 4 with your Jekyll site, so by the end of this tutorial, you’ll be able to track user engagement and gather vital data to optimize your site’s performance.

Prerequisites 📝

Before we begin we will need 2 things:

A Jekyll site with the Chirpy theme installed.
A Google Analytics 4 (GA 4) account with a valid property ID.

Setup Google Analytics ⚙️

Create a Google Analytics 4 account

In case you happen to already have a GA 4 account then you can skip directly to this section!

Visit https://analytics.google.com/ and click “Start Measuring.”
Input your preferred Account Name and select the appropriate checkboxes.
Provide a suitable Property Name, which will represent the tracker project displayed on your Google Analytics dashboard.
Fill in the necessary details about your business.
Click “Create” and accept any licensing pop-ups to establish your Google Analytics account and generate your property.

Create a data stream for your blog

After creating your property, the next step is to set up a Data Stream to monitor your blog’s traffic. If you’re not automatically prompted to create your first Data Stream upon signing up, follow these steps:

Click Admin in the left-hand column.
Choose the appropriate property from the second column’s drop-down menu.
Select Data Streams.
Click Add a stream and choose Web.
Input your blog’s URL.

If you have already setup the google_analytics config tag in the _config.yml file then you should revert it. Otherwise the integration will not be successful!

Your _config.yml should look something like this:

  
..
google_analytics:
  id: # fill in your Google Analytics ID
  # Google Analytics pageviews report settings
  pv:
    proxy_endpoint: # fill in the Google Analytics superProxy endpoint of Google App Engine
    cache_path: # the local PV cache data, friendly to visitors from GFW region
..

Configure gtag script globally 🌐

gtag is a JavaScript library used for tracking and measuring website traffic and user behavior. It simplifies the process of implementing Google’s tracking and analytics tools, such as Google Analytics, Google Ads, and Google Conversion Tracking, by providing a unified tagging system.

If you created your Jekyll website using this chirpy starter project then there are couple file that we need to override from the main source chirpy project which can be found here

Case 1: Chripy starter project

Let’s start by creating a new directory 📁 on the root level of your jekyll blog source and let’s name it _includes.

inside _includes directory create a new file google_analytics.html and past the following code:

Do not forget to swap the G-XXXXXXXXXX value with your data stream Measurement ID!

  
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'G-XXXXXXXXXX');
 </script>

Then from the Chripy main source project found here we will copy the head.htm file which we will place inside the _includes directory we have created in step-1.

Using your code editor open the head.html file and remove this code

  
 {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
    
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    
     {% if site.google_analytics.pv.proxy_endpoint %}
         {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
         | replace: 'https://', ''
         | split: '/'
         | first
         | prepend: 'https://'
         %}
         <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
         <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
 {% endif %}

inside the same file, insert the google_analytics.html file content using liquid syntax.
1 {% include google_analytics.html %}
Save, build and deploy 🚀

Case 2: Jekyll template with chirpy theme applied

In this case your blog should’ve been manually created by installing Jekyll and then applying Chripy theme.

locate the directory _layouts

edit the file default.htm by adding this gtag script at the end of the <head> html tag.

  
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'G-XXXXXXXXXX');
 </script>

save, build and deploy 🚀

Verify the traffic ✅

To verify whether or not the GA 4 integration is successful:

Head back to Google analytics
On the left pane, click on Reports
Click on Realtime to view your traffic in realtime. At this stage I would advise using a different browser or invalidate the browser’s cache.

You should see traffic comming in in the dashboard as you visit your site. Since we have configured the gtag script into the <head> section, it should now be a part of each an every page of your jekyll blog. This way Google analytics can track all the page views (pv).

😌 And as always happy coding and may the Source be with you!