Add support for cookie consent and with GA4

4 files changed, 202 insertions, 12 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 237c540..18ea882 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,5 +10,9 @@
         {{- block "main" . }}{{- end }}
         </div>
         {{- partial "footer.html" . -}}
+
+        {{ if not .Site.IsServer }}
+        {{- partial "consent.html" . -}}
+        {{ end }}
     </body>
 </html>
diff --git a/layouts/partials/consent.html b/layouts/partials/consent.html
new file mode 100644
index 0000000..2f9181d
--- /dev/null
+++ b/layouts/partials/consent.html
@@ -0,0 +1,170 @@
+{{/*  Based on https://hugocodex.org/add-ons/cookie-consent/  */}}
+
+<style>
+    #consent-notice {padding: 0.25rem 0; display: none; text-align: center; position: fixed; bottom: 0; width: 100%; background: #222;}
+    #consent-notice span {margin-right: 1rem; color: rgba(255,255,255,0.8);}
+    #consent-notice button {cursor: pointer; display: inline-block; width: auto; }
+    #consent-notice span a {color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5);}
+    #consent-notice button.btn {margin-left: 0.5rem;}
+    #consent-notice button.btn.manage-consent {background: rgba(255,255,255,0.8); font-weight: normal;}
+    #consent-notice button.btn.deny-consent, #consent-notice button.btn.approve-consent {background: rgba(125,125,125,0.8); font-weight: normal; color: rgba(255,255,255,0.8);}
+
+    #consent-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: none; background: rgba(0,0,0,0.75); z-index: 999999; overflow: auto; cursor: pointer;}
+    #consent-overlay.active {display: flex;}
+    #consent-overlay > div {background: white; width: 100%; max-width: 30rem; padding: 1.75rem; margin: auto; cursor: initial;}
+    #consent-overlay > div > div {display: flex; align-items: flex-start; margin-bottom: 1rem;}
+    #consent-overlay > div > div:last-child {margin: 0;}
+    #consent-overlay h5 {padding-top: 0;}
+    #consent-overlay input {margin: 0.4rem;}
+    #consent-overlay label {display: block;}
+    #consent-overlay .btn {margin-right: 0.5rem;}
+    #consent-overlay button.btn.save-consent {background: rgba(125,125,125,0.8); font-weight: normal; color: rgba(255,255,255,0.8);}
+    #consent-overlay button.btn.approve-all-consent {background: rgba(0,0,0,0.8); font-weight: normal; color: rgba(255,255,255,0.8);}
+
+    @media (max-width: 767px) {
+        #consent-overlay > div {padding: 1.75rem 1rem;}
+        #consent-notice span {display: block; padding-top: 3px; margin-bottom: 1.5rem;}
+        #consent-notice button.btn {position: relative; bottom: 4px;}
+    }
+</style>
+<div id="consent-notice"><span>This website would like to use <a class="manage-consent" href="#manage-consent">third party code</a> to improve its functionality.</span><button class="btn manage-consent">Manage preferences</button><button class="btn deny-consent">Deny</button><button class="btn approve-consent">Allow</button></div>
+<div id="consent-overlay">
+    <div>
+        {{ range $index, $item := .Site.Data.consent.items }}
+            <div>
+                <input type="checkbox" id="item{{ $index }}" value="1" name="item{{ $index }}" {{ if $item.is_functional }}checked disabled{{ end }} />
+                <label for="item{{ $index }}">
+                    <h5>{{ $item.title }}</h5>
+                    <p>{{ $item.description }}</p>
+                </label>
+            </div>
+        {{ end }}
+        <div>
+            <button id="save-consent" class="btn save-consent" data-consentvalue="{{ range $index, $item := .Site.Data.consent.items }}{{ if $item.is_functional}}{{ else }}0{{ end }}{{ end }}">Save preferences</button>
+            <button class="btn approve-all-consent">Allow all</button>
+        </div>
+    </div>
+</div>
+<script>
+
+    const scripts = [];{{ range $index, $item := (where .Site.Data.consent.items "is_functional" false) }}
+    scripts[{{ $index }}] = {{ cond (hasPrefix $item.script "http") $item.script (printf "/js/%s" $item.script) }};{{ end }}
+
+    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);
+    }
+    function denyAllConsentScripts() {
+        var consentValue = "";
+        scripts.forEach(function(){
+            consentValue = consentValue + "0";
+        });
+        acceptSomeConsentScripts(consentValue);
+    }
+    function acceptAllConsentScripts() {
+        var consentValue = "";
+        scripts.forEach(function(){
+            consentValue = consentValue + "1";
+        });
+        acceptSomeConsentScripts(consentValue);
+    }
+    function acceptSomeConsentScripts(consentValue) {
+        setConsentInputs(consentValue);
+        createCookie('consent-settings',consentValue,31);
+        document.getElementById('consent-notice').style.display = 'none';
+        document.getElementById('consent-overlay').classList.remove('active');
+        loadConsentScripts(consentValue);
+    }
+    function loadConsentScripts(consentValue) {
+        scripts.forEach(function(value,key){
+            //console.log('script'+key+' is set to ' +consentValue[key]+' and is file '+value);
+            if(consentValue[key]=="1") {
+                var s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.src = value;
+                document.body.appendChild(s);
+            }
+        });
+    }
+    function setConsentInputs(consentValue) {
+        var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
+        elements.forEach(function(el,index) {
+            if(consentValue[index]=="1") el.checked = true;
+            else el.checked = false;
+        });
+    }
+    function setConsentValue() {
+        var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
+        var consentValue = "";
+        elements.forEach(function(el) {
+            if(el.checked) consentValue = consentValue + "1";
+            else consentValue = consentValue + "0";
+        });
+        document.getElementById("save-consent").dataset.consentvalue = consentValue;
+    }
+
+    var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
+    elements.forEach(function(el) {
+        el.checked = false;
+    });
+
+    if(readCookie('consent-settings')) {
+        var consentValue = readCookie('consent-settings').toString();
+        //console.log(consentValue);
+        setConsentInputs(consentValue);
+        loadConsentScripts(consentValue);
+    } else {
+        document.getElementById('consent-notice').style.display = 'block';
+    }
+    var elements = document.querySelectorAll('.manage-consent');
+    elements.forEach(function(el) {
+        el.addEventListener("click",function() {
+            document.getElementById('consent-overlay').classList.toggle('active');
+        });
+    });
+    var elements = document.querySelectorAll('.deny-consent');
+    elements.forEach(function(el) {
+        el.addEventListener("click",function() {
+            denyAllConsentScripts();
+        });
+    });
+    var elements = document.querySelectorAll('.approve-consent, .approve-all-consent');
+    elements.forEach(function(el) {
+        el.addEventListener("click",function() {
+            acceptAllConsentScripts();
+        });
+    });
+    document.getElementById("save-consent").addEventListener("click",function() {
+        setConsentValue();
+        acceptSomeConsentScripts(this.dataset.consentvalue);
+    });
+    document.getElementById("consent-overlay").addEventListener("click",function(e) {
+        if (!document.querySelector("#consent-overlay > div").contains(e.target)){
+            this.classList.toggle('active');
+        }
+    });
+</script>
+
+{{ range $index, $item := .Site.Data.consent.items }}
+    {{ if $item.is_functional }}
+        <script type="text/javascript" src="{{ cond (hasPrefix $item.script "http") $item.script (printf "/js/%s" $item.script) }}"></script>
+    {{ end }}
+{{ end }}
diff --git a/layouts/partials/googleanalytics.html b/layouts/partials/googleanalytics.html
new file mode 100644
index 0000000..2d72d71
--- /dev/null
+++ b/layouts/partials/googleanalytics.html
@@ -0,0 +1,18 @@
+{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+{{- if not $pc.Disable }}{{ with .Site.GoogleAnalytics -}}
+<script>
+{{- if not $pc.RespectDoNotTrack -}}
+var doNotTrack = false;
+{{- else -}}
+var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+var doNotTrack = (dnt == "1" || dnt == "yes");
+{{- end -}}
+if (!doNotTrack) {
+	window.dataLayer = window.dataLayer || [];
+	function gtag(){dataLayer.push(arguments);}
+	gtag('js', new Date());
+	gtag('config', '{{ site.Config.Services.GoogleAnalytics.ID }}');
+}
+</script>
+{{- end -}}
+{{- end -}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f01e36b..f658d68 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -10,23 +10,21 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
-
-    {{ $style := resources.Get "sass/researcher.scss" | resources.ExecuteAsTemplate "sass/researcher.scss" . | toCSS | minify }}
+    {{ $style := resources.Get "sass/researcher.scss" | resources.ExecuteAsTemplate "sass/researcher.scss" . | toCSS | minify -}}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
-
-    {{ with .Site.Params.favicon }}
-        <link rel="icon" type="image/ico" href="{{ . | absURL }}">
-    {{ end }}
+    {{ with .Site.Params.favicon -}}
+    <link rel="icon" type="image/ico" href="{{ . | absURL }}">
+    {{ end -}}
 
     {{ with .OutputFormats.Get "rss" -}}
         {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end -}}
 
-    {{ if not .Site.IsServer }}
-        {{ template "_internal/google_analytics.html" . }}
-    {{ end }}
+    {{- if not .Site.IsServer -}}
+        {{- partial "googleanalytics.html" . -}}
+    {{- end -}}
 
-    {{ if .Params.noindex }}
-        <meta name="robots" content="noindex">
-    {{ end }}
+    {{ if .Params.noindex -}}
+    <meta name="robots" content="noindex">
+    {{ end -}}
 </head>