Adding a cookie disclaimer to my static jekyll site

Sep 18, 2021

My personal site is generated with jekyll and is a few static pages. However, I use google analytics and I also use disqus as an option to comment. I’d also consider putting ads on the site if traffic every increased. All these things use cookies to some degree. Even though my site is small and static, not giving users an option to opt out of cookies could put me in trouble with European law. This is very unlikely but I like doing things the right way I thought it might be a good idea to fix that issue with my site just in case I suddenly get a European audience.

As a disclaimer, I’m not a lawyer and am not providing legal advice. I suggest doing your own research on what you or your company needs before implementing anything.

I mostly followed the instructions at jekyllcodex.org to add the banner. Luckily, I didn’t have to re-invent the wheel. The nice thing about keeping things simple in the framework is that adopting code and plugins usually just works. After a short google search for jekyll cookie policy, I was in business.

I added the below code to my default layout so the banner would show up on every page unless cookies were accepted. Essentially, if you say cookies are ok with you, it sets a cookie and reloads the page. Any features that require cookies are only enabled if that cookie is set. Because my site is static, this was fairly simple.

<style>
    #cookie-notice { font-weight: 900; font-size: 1rem; padding: 0.5rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: #222; color: rgba(255,255,255,0.8); z-index: 9000;}
    #cookie-notice a {display: inline-block; cursor: pointer; margin-left: 0.5rem;}
    @media (max-width: 767px) {
        #cookie-notice span {display: block; padding-top: 3px; margin-bottom: 1rem;}
        #cookie-notice .btn a {position: relative; bottom: 4px;}
    }
</style>
<div id="cookie-notice">
   
    <span>We would like to use third party cookies and scripts to improve the functionality of this website.
        <a href="/privacy-policy.html" >privacy policy</a>
        <a href="/cookie-policy.html" >cookie policy</a>
    </span>
    <a id="cookie-notice-accept" class="btn btn-primary btn-sm .button">Approve</a>
    <a id="cookie-notice-dismiss" class="btn btn-primary btn-sm .button">Dismiss</a>
</div>
<script>
    function createCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    if(readCookie('cookie-notice-dismissed') !=='true') {
        document.getElementById('cookie-notice').style.display = 'block';
    }

    document.getElementById('cookie-notice-accept').addEventListener("click",function() {
        createCookie('cookie-notice-dismissed','true',31);
        document.getElementById('cookie-notice').style.display = 'none';
        location.reload();
    });

    document.getElementById('cookie-notice-dismiss').addEventListener("click",function() {
        document.getElementById('cookie-notice').style.display = 'none';
    });


</script>

I then added the below for my disqus comments.

  <div id="disqus_thread"></div>
  <script>
      if(readCookie('cookie-notice-dismissed')=='true'){
        var disqus_config = function () {
        this.page.url = 'https://benpatterson.io/jekyll/static/privacy/programming/2021/09/18/adding-a-cookie-disclaimer.html';
        this.page.identifier = 'https://benpatterson.io/jekyll/static/privacy/programming/2021/09/18/adding-a-cookie-disclaimer.html';
      };

      (function() {
        var d = document, s = d.createElement('script');

        s.src = 'https://benpatterson-io.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    }
  </script>

And finally for my google analytics script.

if((readCookie('cookie-notice-dismissed')=='true') && !(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', 'UA-53157441-1', 'auto');
  ga('send', 'pageview');
}

For the privacy policy and cookie policy, I generated them over at termly. I’m pretty happy with how it turned out overall. I was able to get my website into a state that respected privacy and EU regulations while my kid was taking a nap.