google analytics and first iteration of cookie banner

fablabbcn · Sep 5, 2024 · 44b0432 · 44b0432
1 parent 9b8b174
commit 44b0432
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 0 deletions.
diff --git a/ddlh/static/application.js b/ddlh/static/application.js
@@ -205,6 +205,31 @@ const setupSearchHint = () => {
   }
 };
 
+const setupCookieBanner = () => {
+  if (localStorage.getItem("cookie_consent") === null) {
+    const banner = document.querySelector(".cookie-banner");
+    banner.style.display = "flex";
+    accept = banner.querySelector(".accept");
+    accept.addEventListener("click", (event) => {
+      event.preventDefault();
+      localStorage.setItem("cookie_consent", "granted");
+      gtag("consent", "update", {
+        ad_user_data: "granted",
+        ad_personalization: "granted",
+        ad_storage: "granted",
+        analytics_storage: "granted",
+      });
+      banner.style.display = "none";
+    });
+    reject = banner.querySelector(".reject");
+    reject.addEventListener("click", (event) => {
+      event.preventDefault();
+      localStorage.setItem("cookie_consent", "refused");
+      banner.style.display = "none";
+    });
+  }
+};
+
 document.addEventListener("DOMContentLoaded", (event) => {
   setupCarousels();
   setupStats();
@@ -213,4 +238,5 @@ document.addEventListener("DOMContentLoaded", (event) => {
   setupDocumentLinkHighlight();
   setupFormClickHandler();
   setupSearchHint();
+  setupCookieBanner();
 });
diff --git a/ddlh/static/styles.css b/ddlh/static/styles.css
@@ -415,6 +415,31 @@ p {
   color: var(--light-blue-saturated);
 }
 
+.cookie-banner {
+  display: none; /* flex, when visible, but hidden by default. this is set in JS */
+  pointer-events: auto;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
+  background-color: var(--main-bg-color);
+  padding: var(--spacer-unit) calc(2 * var(--spacer-unit));
+  border-top: 1px solid var(--main-fg-color);
+  z-index: 500;
+  gap: var(--spacer-unit);
+
+  & .cookie-buttons {
+    display: flex;
+    gap: calc(0.5 * var(--spacer-unit));
+
+    & a {
+      width: 50%;
+      padding: calc(0.5 * var(--spacer-unit));
+    }
+  }
+}
+
 .index-hero {
   background-color: var(--main-bg-color);
   display: flex;
@@ -1400,6 +1425,15 @@ p {
     padding-right: calc(2 * var(--spacer-unit));
   }
 
+  .cookie-banner {
+    flex-direction: row;
+
+    & .cookie-buttons {
+      width: 33%;
+      flex-shrink: 0;
+    }
+  }
+
   .related-resources-container {
     & h2 {
       margin-left: 0;

diff --git a/ddlh/templates/layouts/main.j2 b/ddlh/templates/layouts/main.j2
@@ -22,6 +22,23 @@
             {% endblock main %}
         </main>
         {% include "partials/footer.j2" %}
+        {% include "partials/cookie_banner.j2" %}
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-N1FDGBLXNV"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('consent', 'default', {
+            'ad_storage': 'denied',
+            'ad_user_data': 'denied',
+            'ad_personalization': 'denied',
+            'analytics_storage': 'denied'
+          });
+          gtag('config', 'G-N1FDGBLXNV');
+          window.gtag = gtag;
+        </script>
         <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"
                 integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
                 crossorigin="anonymous"></script>

diff --git a/ddlh/templates/partials/cookie_banner.j2 b/ddlh/templates/partials/cookie_banner.j2
@@ -0,0 +1,11 @@
+<div class="cookie-banner">
+    <div class="cookie-blurb">
+        <p>
+            Please can we set a Google Analytics cookie to better understand how our community uses the Learning Hub? All the data we gather is anonymous.
+        </p>
+    </div>
+    <div class="cookie-buttons">
+        <a class="btn secondary accept" href="#">Yes, that's fine!</a>
+        <a class="btn secondary reject" href="#">No, thank you.</a>
+    </div>
+</div>