Add cookie consent

Author: bendera

src/components/Analytics.astro

@@ -1,16 +1,86 @@
----
-const isProd = import.meta.env.PROD;
----
-{isProd ? (
-  <>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-1Y0GZ34XC7"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-1Y0GZ34XC7');
-    </script>
-  </>
-) : null}
+<script>
+  const STORAGE_KEY = 'analytics_consent';
+  const confirmed = !!window.localStorage.getItem(STORAGE_KEY);
+  const allowed = (window.localStorage.getItem(STORAGE_KEY) ?? "") === "true";
+
+  const injectGtag = () => {
+    const s = document.createElement('script');
+    s.setAttribute('async', '');
+    s.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=G-1Y0GZ34XC7');
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-1Y0GZ34XC7');
+    document.documentElement.querySelector('head')?.appendChild(s);
+  }
+
+  const showConfirm = () => {
+    const layer = document.createElement('div');
+    const okButton = document.createElement('button');
+    const rejectButton = document.createElement('button');
+    okButton.setAttribute('type', 'button');
+    okButton.classList.add('allow');
+    okButton.innerHTML = 'Allow';
+    okButton.addEventListener('click', () => {
+      window.localStorage.setItem(STORAGE_KEY, "true");
+      injectGtag();
+      layer.remove();
+    });
+    rejectButton.setAttribute('type', 'button');
+    rejectButton.classList.add('reject');
+    rejectButton.addEventListener('click', () => {
+      window.localStorage.setItem(STORAGE_KEY, "false");
+      layer.remove();
+    });
+    rejectButton.innerHTML = 'Reject';
+    layer.classList.add('analytics-consent-layer');
+    layer.appendChild(document.createElement('p')).innerHTML = 'Do you allow us to collect data for website statistics through Google Analytics?';
+    layer.appendChild(okButton);
+    layer.appendChild(rejectButton);
+    document.body.appendChild(layer);
+  }
+
+  if (allowed) {
+    injectGtag();
+  }
+
+  if (!confirmed) {
+    showConfirm();
+  }
+</script>
+
+<style is:global>
+.analytics-consent-layer {
+  align-items: center;
+  background-color: #000;
+  box-sizing: border-box;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  padding: 20px;
+  position: fixed;
+  right: 0;
+}
+
+.analytics-consent-layer p {
+  margin: 0 10px 0 0;
+}
+
+.analytics-consent-layer button {
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  margin: 0 5px;
+  padding: 10px 20px;
+}
+
+.analytics-consent-layer button.allow {
+  background-color: darkgreen;
+}
+
+.analytics-consent-layer button.reject {
+  background-color: darkred;
+}
+</style>