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.
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
-
Create an "_includes" folder in the same folder as the "_config.yml" file.
-
Copy the "_includes/head-custom-google-analytics.html" file for the
correct theme from the list above.
-
Paste the "_includes/head-custom-google-analytics.html" file into the new
"_includes" folder.
-
Modify the contents of the new
"_includes/head-custom-google-analytics.html" file as described above.
- Push the changes and wait for GitHub to refresh the website.
-
Confirm the new Google Analytics code in the header of the HTML source.
