Add cookie compliance for Google Analytics

_config.yml

@@ -5,8 +5,10 @@ description: > # this means to ignore newlines until "baseurl:"
   Bioschemas relies and extends from schema.org and aims to reuse existing
   standards and reach consensus among a wide number of life sciences organizations and communities.
 url: "http://bioschemas.org" # the base hostname & protocol for your site
+baseurl: "" # the subpath of your site, e.g. /blog/
 twitter_username: Bioschemas
 github_username: Bioschemas
+google_analytics: G-G3BQK7PF1V
 
 # Build settings
 markdown: kramdown

_includes/cookie-consent.html

@@ -0,0 +1,59 @@
+<style>
+    #cookie-notice {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);}
+    #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 a {position: relative; bottom: 4px;}
+    }
+</style>
+<div class="container w-100" id="cookie-notice">
+    <span>We would like to use third party cookies and scripts to improve the functionality of this website.</span>
+    <a id="cookie-notice-accept" class="btn btn-primary btn-sm">Approve</a>
+    <a id="cookie-notice-deny" class="btn btn-primary btn-sm">Deny</a>
+    <a href="/about/privacy.html" class="btn btn-primary btn-sm">More info</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=/";
+    }
+    function readCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for(var i=0;i < ca.length;i++) {
+            var c = ca[i];
+            while (c.charAt(0)==' ') c = c.substring(1,c.length);
+            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+        }
+        return null;
+    }
+    function eraseCookie(name) {
+        createCookie(name,"",-1);
+    }
+
+    if(readCookie('cookie-notice-option')=='true') {
+        {% if jekyll.environment == "production" and site.google_analytics %}
+        {% include ga.js %}
+        {% endif %}
+    } else if (readCookie('cookie-notice-option')!='false'){
+        document.getElementById('cookie-notice').style.display = 'block';
+    }
+
+    document.getElementById('cookie-notice-accept').addEventListener("click",function() {
+        createCookie('cookie-notice-option','true',31);
+        document.getElementById('cookie-notice').style.display = 'none';
+        location.reload();
+    });
+
+    document.getElementById('cookie-notice-deny').addEventListener("click",function() {
+        createCookie('cookie-notice-option','false',31);
+        document.getElementById('cookie-notice').style.display = 'none';
+        location.reload();
+    });
+
+</script>

_includes/ga.js

@@ -0,0 +1,17 @@
+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);
+}
+
+loadScriptAsync('https://www.googletagmanager.com/gtag/js?id=G-G3BQK7PF1V', function () {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', 'G-G3BQK7PF1V', { 'anonymize_ip': true });
+    console.log('Google Analytics is active');
+})

_includes/head.html

@@ -35,6 +35,4 @@
   <script src="{{ 'assets/js/bootstrap.bundle.min.js' | relative_url }}"></script>
   <script src="{{ 'assets/js/toc.js' | relative_url }}"></script>
   <script defer src="{{'assets/js/all.min.js' | relative_url }}"></script>
- <!-- Google analytics -->
-  {% include analytics.html %}
 </head>

_layouts/default.html

@@ -11,5 +11,6 @@
       </main>
     </div>
     {% include footer.html %}
+    {% include cookie-consent.html %}
   </body>
 </html>