add cookie consent

euruko · Jan 13, 2024 · 1f05568 · 1f05568
1 parent 96ef7fe
commit 1f05568
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 24 deletions.
diff --git a/_includes/cookie_consent.html b/_includes/cookie_consent.html
@@ -0,0 +1,65 @@
+
+<!-- Only add all this in production, why would I analyse myself when writing the post anyway. -->
+
+<!-- Add cookie consent css & js -->
+<link rel="stylesheet"
+    type="text/css"
+    href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css"/>
+<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
+    data-cfasync="false"></script>
+
+<!-- Add google analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-RK79VSHG84"></script>
+
+<script>
+    // Reads the value of a cookie by name or returns empty string
+    function getCookie(name) {
+        var b = document.cookie.match('(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)');
+        return b ? b.pop() : '';
+    }
+
+    // Actually starting analytics up
+    function addAnalytics() {
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-RK79VSHG84');
+    }
+
+    // Waiting for the load event
+    window.addEventListener("load", function () {
+        // Reading "cookieconsent_status" cookie
+        const cookieConsent = getCookie('cookieconsent_status');
+
+        // Start analytics if user consented or did not deny
+        if (cookieConsent === 'allow' || cookieConsent === '') {
+            addAnalytics();
+        }
+
+        // Initialise cookie consent banner
+        window.cookieconsent.initialise({
+            "palette": {
+                "popup": {
+                    "background": "#efefef",
+                    "text": "#404040"
+                },
+                "button": {
+                    "background": "#8ec760",
+                    "text": "#ffffff"
+                }
+            },
+            "type": "opt-out",
+            "content": {
+                "allow": "Approve",
+                "dismiss": "Approve",
+                "deny": "Reject"
+            },
+            // Reload the page on user choice to make sure cookie is set
+            onStatusChange: function (status, chosenBefore) {
+                location.reload();
+            }
+        })
+    });
+</script>
+
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -39,13 +39,6 @@
 
   </div>
 
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-RK79VSHG84"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-
-    gtag('config', 'G-RK79VSHG84');
-  </script>
+  {% include cookie_consent.html %}
 </body>
 </html>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -33,13 +33,6 @@
     {% include footer.html %}
   </div>
 
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-RK79VSHG84"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-
-    gtag('config', 'G-RK79VSHG84');
-  </script>
+  {% include cookie_consent.html %}
 </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -59,13 +59,6 @@ <h3 class="announcement__title">
     {% include footer.html %}
   </div>
 
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-RK79VSHG84"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-
-    gtag('config', 'G-RK79VSHG84');
-  </script>
+  {% include cookie_consent.html %}
 </body>
 </html>