It is very useful to have Google Analytics on your website to have an idea of how many (or how few) people are visiting.

This steps can be also followed for other kinds of websites, not only Jekyll.

Part I: Implementing Google Analytics

Creating a Tracking ID on Google Analytics

Setting Google Analytics for Jekyll is very easy. I wish I had done it years ago.

First, let’s generate a Tracking ID with Google Analytics. For this, you have to have a Google Analytics Account.

  • On the Google Analytics panel admin, click on Administrationon the left-hand corner.
  • Then, click on “create property”

property

  • Then, fill in the information regarding your website for the configuration
  • This will generate a Tracking ID to use in your website. It looks like UA-XXXXXXXX-X.

Then, you are all good for implementing it in your Jekyll.

Implementing Google Analytics in your Jekyll website

It can be done on 3 easy steps.

  • Create a new file in _includes/ folder => analytics.htmlfor example and paste this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={#YOUR-TRACKING-ID}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{#YOUR-TRACKING-ID}');
</script>

This is the exact same script as the one provided by Google Analytics, except I use a variable, instead of #YOUR-TRACKING-ID, I used { site.google_analytics }

  • Define the variable site.google_analytics

This one has to be set in the _config.ymlfile:

# Google analytics
google_analytics: UA-XXXXXXXX-X
  • Then, call the script from _includes/analytics.html in the default.html in the <head>tag:
{ % if jekyll.environment == 'production' and site.google_analytics % }
    { % include analytics.html % }
{ % endif % }

(1)*

I added an if condition on the production environment, as I don’t want to have tracking data when working locally.

Then, we are all set to make google analytics work.

To test locally, just remove the jekyll.environment == 'production condition, and check the Google console.

Live user on GA


This second part is a little trickier to implement.

Part II: Collecting cookie consent

Using Google Analytics on a website requires a valid consent from visitors (Because of ePrivacy Directive and not the GDPR).

From Cookibot website, you can check wether your website is using cookies or not for cookie consent banner implementation. Just answer the form on the main page and click on Check my website

I received a detailed report. The outlines were:

Scan result
3 cookies were identified.

_ga
_gat
_gid

Blocked until accepted by user: No

Which makes my website not compliant.

Cookiebot report

I found on Github many cookie banners looking like this:

Illegal cookie banner

It is really easy to implement and would have been handy but that kind of banners are now illegal in EU.

We have to have an active approval from the user before setting cookies. So we need to implement a banner where the user approves the use of cookies.

Jekyll Codex has a tutorial explaining how to have the correct cookie banner and provides the code to use in the cookie-consent.html.

So here are the steps that worked for me. A little work had to be done starting from the tutorial.

  • Create a new file cookie-consent.html_includes/cookie-consent.html

I copied the script given by Jekyll Codex here. I just moved the CSS from the style tag into the main.cssfile, so it is cleaner.

  • Call the new file in the footer in default.html
<div class="page__footer">
  <footer>
    { % include cookie-consent.html % }
  </footer>
</div>

(1)*

  • Create a new page called _pages/privacy.md to redirect to when user clicks on “Learn More”

The HTML part of cookie-consent.html looks like this:

<div id="cookie-notice">
    <span>I'd like to use third party cookies and scripts to improve the functionality of this website :)</span>
    <a id="cookie-notice-accept" class="btn-cookie-consent">Approve</a>
    <a href="/privacy" class="btn-cookie-consent-link">More info</a>
</div>

This is what the cookie banner looks like with some CSS:

Cookie banner

I had to make it big and annoying as I want the users to get rid of it so I can have some data for my analytics 🙂

At this point, this is still not working. With the current code, the Google Analytics tracking events are still set at page load.

  • As mentionned in the tutorial, there is a part that should be adapted:
if(readCookie('cookie-notice-dismissed')=='true') {
  { % include ga/analytics.js % }
}

(1)*

In the if condition I have to call the script setting my Google Analytics cookies. As I want them to be set only when approved by the user.

The problem being that it is in a html file. The one we created in the first part (_includes/analytics.html). As the following code is not working:

if(readCookie('cookie-notice-dismissed')=='true') {
  { % include analytics.html % }
}

(1)*

I had to modify this file to be a JS file to call it from my JS function. The tricky part being the JS version for the HTML async attribute from _includes/analytics.html.

  • Create a new file, which is the JS transcription of the gtag provided by Google Analytics ⇒ _includes/ga/analytics.js :
/*This function will load script and call the callback once the script has loaded*/
function loadScriptAsync(scriptSrc, callback) {
    if (typeof callback !== 'function') {
        throw new Error('Not a valid callback for async script load');
    }
    var script = document.createElement('script');
    script.onload = callback;
    script.src = scriptSrc;
    document.head.appendChild(script);
}

/* This is the part where you call the above defined function and "call back" your code which gets executed after the script has loaded */
loadScriptAsync('https://www.googletagmanager.com/gtag/js?id={#YOUR-TRACKING-ID}', function(){
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{#YOUR-TRACKING-ID}', { 'anonymize_ip': true });
})

I got this script from StackOverflow.

The part in the loadScriptAsyncfunction is exactly the same code the the script tags in the analytics.html file, it can be copied/pasted.

Then _includes/analytics.html file is not more needed. I deleted it and removed where it was called in the default.htmlfile. Otherwise I would automatically leave cookies even when I don’t get any user approval.

Final check 🙌🏻

I re-checked with Cookiebot, just for the “Wahoo” effect.

Scan result
0 cookies were identified.

And here we are :) Compliant with ePrivacy Directive ⬇️

Cookiebot compliant

😏


Notes

PS: I have not conditionned the cookies to be set only in prod environment, as locally I have the choice to not approve them.

(1)* (These lines have to be wrapped up into “{ % % }” without any space between { and % but the markdown in not working)

Updated: