feat: add GDPR consent banner gating GA4

_includes/consent_banner.html

@@ -0,0 +1,17 @@
+<div id="consent-banner"
+     class="consent-banner"
+     role="dialog"
+     aria-labelledby="consent-banner-title"
+     aria-describedby="consent-banner-text"
+     hidden>
+  <div class="consent-banner-content">
+    <p id="consent-banner-title" class="consent-banner-title">Cookies &amp; analytics</p>
+    <p id="consent-banner-text" class="consent-banner-text">
+      This site uses Google Analytics to understand which posts get read. No analytics cookies are set unless you accept. Nothing here is required for the site to work.
+    </p>
+    <div class="consent-banner-buttons">
+      <button type="button" class="button is-small consent-decline">Decline non-essential</button>
+      <button type="button" class="button is-small is-dark consent-accept">Accept all</button>
+    </div>
+  </div>
+</div>

_includes/footer.html

@@ -6,10 +6,19 @@
         <i class="fa fa-envelope" title="Email"></i>
       </a>
       </p>
+      {% if site.google_analytics_id %}
+      <p class="consent-footer-link">
+        <a href="#cookie-preferences" id="cookie-preferences-link">Cookie preferences</a>
+      </p>
+      {% endif %}
     </div>
   </div>
 </footer>
 
+{% if site.google_analytics_id %}
+{% include consent_banner.html %}
+{% endif %}
+
 <!-- common js -->
 <script src="{{ site.baseurl }}/assets/js/fetch.js"></script>
 <script src="{{ site.baseurl }}/assets/js/collections.js"></script>
@@ -21,13 +30,12 @@
 <script src="{{ site.baseurl }}/assets/js/load-authors.js"></script>
 <script src="{{ site.baseurl }}/assets/js/load-recent-posts.js"></script>
 
-{% if jekyll.environment == "production" and site.google_analytics_id %}
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_id }}"></script>
+{% if site.google_analytics_id %}
 <script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', '{{ site.google_analytics_id }}');
+  window.GA_MEASUREMENT_ID = {{ site.google_analytics_id | jsonify }};
+  {% if jekyll.environment != "production" %}
+  window.ANALYTICS_DRY_RUN = true;
+  {% endif %}
 </script>
+<script src="{{ site.baseurl }}/assets/js/consent.js"></script>
 {% endif %}

assets/css/custom.css

@@ -268,3 +268,48 @@ p {
 [data-theme="dark"] .highlight pre {
   background-color: transparent;
 }
+
+/*
+ * GDPR cookie/analytics consent banner. Hidden by default via the [hidden]
+ * attribute; consent.js shows it when no choice is recorded and an
+ * analytics ID is configured.
+ */
+.consent-banner {
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  right: 1rem;
+  max-width: 32rem;
+  margin: 0 auto;
+  padding: 1rem 1.25rem;
+  border-radius: 6px;
+  background: var(--bulma-scheme-main-bis);
+  color: var(--bulma-text);
+  border: 1px solid var(--bulma-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.875rem;
+}
+
+.consent-banner-title {
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+}
+
+.consent-banner-text {
+  margin: 0 0 0.75rem 0;
+  line-height: 1.4;
+}
+
+.consent-banner-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.consent-footer-link {
+  font-size: 0.75rem;
+  margin-top: 0.5rem !important;
+}

assets/js/consent.js

@@ -0,0 +1,114 @@
+---
+layout: null
+---
+(function () {
+    var STORAGE_KEY = 'analytics-consent';
+    var ACCEPTED = 'accepted';
+    var DECLINED = 'declined';
+
+    function getStored() {
+        try {
+            return localStorage.getItem(STORAGE_KEY);
+        } catch (e) {
+            return null;
+        }
+    }
+
+    function setStored(value) {
+        try {
+            localStorage.setItem(STORAGE_KEY, value);
+        } catch (e) {}
+    }
+
+    function loadAnalytics() {
+        if (!window.GA_MEASUREMENT_ID) return;
+        if (document.getElementById('gtag-script')) return;
+
+        if (window.ANALYTICS_DRY_RUN) {
+            console.log('[consent] dry run: would load GA4 with id ' + window.GA_MEASUREMENT_ID);
+            return;
+        }
+
+        var script = document.createElement('script');
+        script.async = true;
+        script.id = 'gtag-script';
+        script.src = 'https://www.googletagmanager.com/gtag/js?id=' + encodeURIComponent(window.GA_MEASUREMENT_ID);
+        document.head.appendChild(script);
+
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { window.dataLayer.push(arguments); }
+        window.gtag = gtag;
+        gtag('js', new Date());
+        gtag('config', window.GA_MEASUREMENT_ID);
+    }
+
+    var previousFocus = null;
+
+    function onKeydown(e) {
+        if (e.key === 'Escape' || e.keyCode === 27) {
+            e.preventDefault();
+            hideBanner();
+        }
+    }
+
+    function showBanner() {
+        var banner = document.getElementById('consent-banner');
+        if (!banner) return;
+        previousFocus = document.activeElement;
+        banner.hidden = false;
+        var declineBtn = banner.querySelector('.consent-decline');
+        if (declineBtn && declineBtn.focus) declineBtn.focus();
+        document.addEventListener('keydown', onKeydown);
+    }
+
+    function hideBanner() {
+        var banner = document.getElementById('consent-banner');
+        if (banner) banner.hidden = true;
+        document.removeEventListener('keydown', onKeydown);
+        if (previousFocus && previousFocus.focus) {
+            try { previousFocus.focus(); } catch (e) {}
+        }
+        previousFocus = null;
+    }
+
+    function accept() {
+        setStored(ACCEPTED);
+        hideBanner();
+        loadAnalytics();
+    }
+
+    function decline() {
+        setStored(DECLINED);
+        hideBanner();
+    }
+
+    function init() {
+        if (!window.GA_MEASUREMENT_ID) return;
+
+        var current = getStored();
+        if (current === ACCEPTED) {
+            loadAnalytics();
+        } else if (current !== DECLINED) {
+            showBanner();
+        }
+
+        var acceptBtn = document.querySelector('#consent-banner .consent-accept');
+        var declineBtn = document.querySelector('#consent-banner .consent-decline');
+        if (acceptBtn) acceptBtn.addEventListener('click', accept);
+        if (declineBtn) declineBtn.addEventListener('click', decline);
+
+        var prefLink = document.getElementById('cookie-preferences-link');
+        if (prefLink) {
+            prefLink.addEventListener('click', function (e) {
+                e.preventDefault();
+                showBanner();
+            });
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();