GitHub Pages Jekyll Theme Google Analytics Update

 Let's breakdown that title:

• GitHub Pages - a website hosting feature in GitHub
• Jekyll Theme - a static site generator with built-in support for GitHub Pages.
• Google Analytics Update - Google Analytics 4 is the next generation of Analytics which collects event-based data from both websites and apps

If you are using Jekyll Themed GitHub Pages with Google Analytics and haven't found the simplest way to convert it from Universal Analytics to GA4, this is your "how to"...

Jekyll Themes

Universal Analytics was a simple setup before GA4.  The "_config.yml" included a "google_analytics:" location where the Universal Analytics ID would activate the needed website changes to begin data collection.  With GA4 the new Measurement ID replaces the Universal Analytics ID.  However, the website activation is different for GA4.  Fortunately, the creators of Jekyll Themes included a place to update this new website activation.

Head Custom Google Analytics

GutHub Pages has several supported Jekyll Themes.  Each of these themes has an "_includes/head-custom-google-analytics.html" file.

• Architect
• Cayman
• Dinky
• Hacker
• Leap day
• Merlot
• Midnight
• Minima (This theme is different than the others)
• Minimal
• Modernist
• Slate
• Tactile
• Time machine

Within the "_includes/head-custom-google-analytics.html" file is the website activation code:

{% if site.google_analytics %}
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', '{{ site.google_analytics }}', 'auto');
    ga('send', 'pageview');
  </script>
{% endif %}
    

That code needs to be changed to the new data collection script:

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

Call Tree

The "_includes/head-custom-google-analytics.html" file is called from the "_includes/head-custom.html" file by this line:

{% include head-custom-google-analytics.html %}

The "_includes/head-custom.html" file is called from the "_layouts/default.html" file by this line:

    {% include head-custom.html %}

The "_layouts/default.html" file is the top level template in each Jekyll Theme.

Procedure

1. Create an "_includes" folder in the same folder as the "_config.yml" file.
2. Copy the "_includes/head-custom-google-analytics.html" file for the correct theme from the list above.
3. Paste the "_includes/head-custom-google-analytics.html" file into the new "_includes" folder.
4. Modify the contents of the new "_includes/head-custom-google-analytics.html" file as described above.
5. Push the changes and wait for GitHub to refresh the website.
6. Confirm the new Google Analytics code in the header of the HTML source.