About

Google Analytics or “GA” is a free, GDR-compliant way of tracking what visitors do you on your site and where they came from. This is a common tool in marketing and SEO.

It is anonymous by default - devices and locations are stored but these are not associated with sensitive info like email or name.

You need to add a JavaScript snippet and your site ID to each page to enable GA. This would be impractical by hand, but since we use Jekyll we can use templating and includes to repeat the JS snippet on all pages, or use a plugin so we don’t have to maintain the JS snippet ourselves.

See the Approaches section.

Enable production build

Note that whichever approach you choose below, you’ll probably only want analytics on a prod build (not local dev or remote dev/staging) and then enable it using this flag. Note that GH Pages sets this for you already.

JEKYLL_ENV='production' bundle exec jekyll build

You can of course use serve instead of build but know that you’ll send stats to GA and the traffic will appear on the localhost domain under sources.

For a general approach without Jekyll, see the Analytics cheatsheet under Web.

Approaches

Note that even if an approach below references Google Tag Manager, that is just where the script comes from. You don’t have to login to GTM at all, you could login to Google Analytics only and get all the functionality you need.

Plugin

Note that is plugin is not whitelisted on GitHub Pages, so you need an Actions deploy or use the HTML approach - reference hendrikschneider/jekyll-analytics issue#5.

Theme

The Minima theme covers Google Analytics already - just set google_analytics in the config.

See _includes/google-analytics.html. Here is the content last updated on master in 2018.

<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
  window['ga-disable-{{ site.google_analytics }}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ site.google_analytics }}');
</script>

Here is the old content for the 2nd tag.

<script>
    if (!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator
            .msDoNotTrack === "1")) {
        (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', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', '{{ site.google_analytics }}', 'auto');
        ga('send', 'pageview');
    }

</script>

Add your own snippet

Instead of relying on a theme or plugin as above, you can add a JavaScript snippet to your project yourself. This does not have the limitations as covered above - it just means you have to maintain this code.

Here is a plain snippet generated by Google Analytics (Jan 2021).

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

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

Next we’ll adapt that for use in Jekyll.

We’ll use with parametrized. Along with the do-not-track settings, based on the Minima theme.

  1. Create _includes/google-analytics.html using a snippet below. 
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
 <script>
     window['ga-disable-{{ site.google_analytics }}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" ||
         navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
     window.dataLayer = window.dataLayer || [];

     function gtag() { dataLayer.push(arguments); }
     gtag('js', new Date());

     gtag('config', '{{ site.google_analytics }}');
 </script>
  2. Use the file in to your HTML head tag such as in your default.html layout. Copied here from minima. 
     {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
 {%- endif -%}
  3. Add the value to your _config.yml file: 
     google_analytics: UA-123467-78

The check if site.google_analytics checks if the key is set, even if the value is an empty string. If there is a risk you’ll make an empty string and don’t want to render, then extend as:

and if site.google_analytics and if site.google_analytics != ''

This will not do tracking on local dev or staging environments.

To force a production build for local testing, see Enable production build.