From ccc12b974b0778b90c5e5d5cd54065aa19055a9c Mon Sep 17 00:00:00 2001
From: Massimo Maggioni <94243057+MassimoMaggioni@users.noreply.github.com>
Date: Wed, 9 Feb 2022 23:12:20 +0100
Subject: [PATCH] redesign banner logic: separation from libray loading and
 active js code

---
 data/consent.yaml                             | 13 ------
 data/gdpr.yaml                                |  8 ++++
 layouts/partials/footer/custom.html           |  6 +--
 .../gdpr/{consent.html => banner.html}        | 45 +++++++++++++------
 layouts/partials/gdpr/gtag.html               |  2 +
 layouts/partials/head/head.html               |  4 +-
 static/js/gtag.js                             |  5 +++
 7 files changed, 51 insertions(+), 32 deletions(-)
 delete mode 100644 data/consent.yaml
 create mode 100644 data/gdpr.yaml
 rename layouts/partials/gdpr/{consent.html => banner.html} (84%)
 create mode 100644 layouts/partials/gdpr/gtag.html
 create mode 100644 static/js/gtag.js

diff --git a/data/consent.yaml b/data/consent.yaml
deleted file mode 100644
index 2ca81ad..0000000
--- a/data/consent.yaml
+++ /dev/null
@@ -1,13 +0,0 @@
-items:
-  - title: Google Anaytics (functional)
-    description: This code gives us insight into the number of people that visit our website, where they are from and what they are clicking on. We follow the guidelines of the Dutch Government, which describe how to use Google Analytics without requiring explicit consent.
-    is_functional: true
-    script_file: ga.js
-  - title: Disqus comment (functional)
-    description: This code gives users the option to comment the articles.
-    is_functional: true
-    script_file: disqus.js
-  - title: Crisp chat
-    description: This code gives users the option to chat directly with us through a chat box in the bottom right corner. Visitor data will (also) be sent to Crisp.
-    is_functional: false
-    script_file: crisp.js
diff --git a/data/gdpr.yaml b/data/gdpr.yaml
new file mode 100644
index 0000000..facbd94
--- /dev/null
+++ b/data/gdpr.yaml
@@ -0,0 +1,8 @@
+plugins:
+  - name: gtag
+    enabled: true
+    functional: false
+    title: Google Analytics
+    description: This code gives us insight into the number of people that visit our website, where they are from and what they are clicking on. We follow the guidelines of the Italian Government.
+    html_src: gdpr/gtag.html
+    js_src: js/gtag.js
diff --git a/layouts/partials/footer/custom.html b/layouts/partials/footer/custom.html
index d4cf7aa..37a8817 100644
--- a/layouts/partials/footer/custom.html
+++ b/layouts/partials/footer/custom.html
@@ -1,5 +1,3 @@
-{{ if .Site.Params.GDPRbanner.enabled }}
-  {{ if not .Site.Params.GDPRbanner.onlyfunctional }}
-    {{ partial "gdpr/consent.html" . }}
-  {{ end }}
+{{ if and .Site.Params.GDPRbanner.enabled (not .Site.Params.GDPRbanner.onlyfunctional) }}
+  {{ partial "gdpr/banner.html" . }}
 {{ end }}
diff --git a/layouts/partials/gdpr/consent.html b/layouts/partials/gdpr/banner.html
similarity index 84%
rename from layouts/partials/gdpr/consent.html
rename to layouts/partials/gdpr/banner.html
index a63f98f..9aa95f6 100644
--- a/layouts/partials/gdpr/consent.html
+++ b/layouts/partials/gdpr/banner.html
@@ -1,3 +1,4 @@
+<!-- GDPR banner visual style -->
 <style>
     #consent-notice {padding: 1rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: #222; color: rgba(255,255,255,0.8);}
     #consent-notice span {margin-right: 1rem;}
@@ -26,28 +27,50 @@
         #consent-notice button.btn {position: relative; bottom: 4px;}
     }
 </style>
+
+<!-- import scripts: full if functional, partially if depends on user consent -->
+{{ range $index, $plugin := .Site.Data.gdpr.plugins }}
+  {{ if $plugin.enabled }}
+    {{ "<!-- " }} {{ $plugin.name }} {{ "start -->" }}
+    {{ partial $plugin.html_src }}
+    {{ if $plugin.functional }}
+      <script type="text/javascript" src="{{ $plugin.js_src }}"></script>
+    {{ end }}
+    {{ "<!-- " }} {{ $plugin.name }} {{ "end -->" }}
+  {{ end }}
+{{ end }}
+
+<!-- preferences dialog -->
 <div id="consent-notice"><span>We would like to use <a class="manage-consent" href="#manage-consent">third party code</a> to improve the functionality of this website.</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 }}
+
+        {{ range $index, $plugin := .Site.Data.gdpr.plugins }}
+          {{ if $plugin.enabled }}
             <div>
-                <input type="checkbox" id="item{{ $index }}" value="1" name="item{{ $index }}" {{ if $item.is_functional }}checked disabled{{ end }} />
+                <input type="checkbox" id="item{{ $index }}" value="1" name="item{{ $index }}" {{ if $plugin.functional }}checked disabled{{ end }} />
                 <label for="item{{ $index }}">
-                    <h3>{{ $item.title }}</h3>
-                    <p>{{ $item.description }}</p>
+                    <h3>{{ $plugin.title }}{{ if $plugin.functional}} (functional){{ end }}</h3>
+                    <p>{{ $plugin.description }}</p>
                 </label>
             </div>
+          {{ end }}
         {{ 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 id="save-consent" class="btn save-consent" data-consentvalue="{{ range $index, $plugin := .Site.Data.gdpr.plugins }}{{ if and $plugin.functional $plugin.enabled }}{{ else }}0{{ end }}{{ end }}">Save preferences</button>
             <button class="btn approve-consent">Allow all</button>
         </div>
     </div>
 </div>
-<script>
 
-    const scripts = [];{{ range $index, $item := (where .Site.Data.consent.items "is_functional" false) }}
-    scripts[{{ $index }}] = "/js/{{ $item.script_file }}";{{ end }}
+<!-- execute user consent scripts -->
+<script>
+    const scripts = [];
+    {{ range $index, $plugin := .Site.Data.gdpr.plugins }}
+      {{ if and $plugin.enabled (not $plugin.functional) }}
+        scripts[{{ $index }}] = "{{ $plugin.js_src }}";
+      {{ end }}
+    {{ end }}
 
     function createCookie(name,value,days) {
         var expires = "";
@@ -161,9 +184,3 @@
         }
     });
 </script>
-
-{{ range $index, $item := .Site.Data.consent.items }}
-    {{ if $item.is_functional }}
-        <script type="text/javascript" src="/js/{{ $item.script_file }}"></script>
-    {{ end }}
-{{ end }}
diff --git a/layouts/partials/gdpr/gtag.html b/layouts/partials/gdpr/gtag.html
new file mode 100644
index 0000000..22e0a2b
--- /dev/null
+++ b/layouts/partials/gdpr/gtag.html
@@ -0,0 +1,2 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html
index 4d89b89..bb0f00c 100644
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@@ -21,5 +21,7 @@
     <link rel="shortcut icon" href="{{ . }}" />
 {{ end }}
 
-{{- template "_internal/google_analytics.html" . -}}
+{{ if not .Site.Params.GDPRbanner.enabled }}
+  {{- template "_internal/google_analytics.html" . -}}
+{{ end }}
 {{- partial "head/custom.html" . -}}
diff --git a/static/js/gtag.js b/static/js/gtag.js
new file mode 100644
index 0000000..2ef91de
--- /dev/null
+++ b/static/js/gtag.js
@@ -0,0 +1,5 @@
+window.dataLayer = window.dataLayer || [];
+function gtag(){window.dataLayer.push(arguments);}
+gtag('js', new Date());
+
+gtag('config', 'GA_MEASUREMENT_ID');