redesign banner logic: separation from libray loading and active js code

data/consent.yaml

@@ -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

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

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 }}

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 }}

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>

layouts/partials/head/head.html

@@ -21,5 +21,7 @@
     <link rel="shortcut icon" href="{{ . }}" />
 {{ end }}
 
+{{ if not .Site.Params.GDPRbanner.enabled }}
   {{- template "_internal/google_analytics.html" . -}}
+{{ end }}
 {{- partial "head/custom.html" . -}}

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');