Merge pull request #149 from chrisrhymes/feature/cookie-banner

Add cookie banner
chrisrhymes · May 4, 2024 · 0300154 · 0300154
2 parents a5247bf + 52f8185
commit 0300154
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 5 deletions.
diff --git a/_config.yml b/_config.yml
@@ -51,6 +51,7 @@ sass:
   source_dir: _sass
 
 #google_analytics: UA-code-here
+cookie_policy: /cookie-policy/
 
 defaults:
   -

diff --git a/_data/docs_menu.yml b/_data/docs_menu.yml
@@ -43,6 +43,8 @@
   items: 
     - name: Callouts
       link: /docs/page-components/callouts/
+    - name: Cookie Banner
+      link: /docs/page-components/cookie-banner/
     - name: Image Gallery
       link: /docs/page-components/image-gallery/
     - name: Image Modal

diff --git a/_includes/cookie-banner.html b/_includes/cookie-banner.html
@@ -0,0 +1,53 @@
+<div class="">
+    <script
+        src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"
+    ></script>
+
+    <div class="container py-6 px-4" id="cookieBanner">
+        <div class="columns">
+            <div class="column is-fullwidth ">
+                <div class="content">
+                    <p>We use cookies on this site to enhance your user experience</p>
+                    <p>
+                        By clicking the Accept button, you agree to us doing so.
+                        <a href="{{ site.cookie_policy | relative_url }}">More info on our cookie policy</a>
+                    </p>
+                </div>
+
+                <div class="buttons">
+                    <button class="button is-primary" onclick="acceptCookies()">Accept all cookies</button>
+                    <button class="button is-primary" onclick="rejectCookies()">Reject all cookies</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function acceptCookies() {
+            {% if site.google_analytics %}
+                consentGrantedAdStorage();
+            {% endif %}
+            Cookies.set('showCookieBanner', 'false', { expires: 7, path: '/' });
+            Cookies.set('cookiesAccepted', 'true', {expires: 7, path: '/'});
+            toggleCookieBanner();
+        }
+
+        function rejectCookies() {
+            Cookies.set('showCookieBanner', 'false', { expires: 7, path: '/' });
+            toggleCookieBanner();
+        }
+
+        function toggleCookieBanner() {
+            var showBanner = Cookies.get('showCookieBanner');
+            var banner = document.getElementById('cookieBanner');
+
+            if (showBanner === 'false') {
+                banner.setAttribute('style', 'display: none;');
+            } else {
+                banner.setAttribute('style', 'display: block;');
+            }
+        }
+
+        toggleCookieBanner();
+    </script>
+</div>
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
@@ -1,14 +1,38 @@
+<script>
+    // Define dataLayer and the gtag function.
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+        dataLayer.push(arguments);
+    }
+
+    // Set default consent to 'denied' as a placeholder
+    // Determine actual values based on your own requirements
+    gtag('consent', 'default', {
+        ad_storage: 'denied',
+        ad_user_data: 'denied',
+        ad_personalization: 'denied',
+        analytics_storage: 'denied',
+    });
+</script>
+<!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
 <script>
-    window['ga-disable-{{ site.google_analytics }}'] =
-        window.doNotTrack === '1' ||
-        navigator.doNotTrack === '1' ||
-        navigator.doNotTrack === 'yes' ||
-        navigator.msDoNotTrack === '1';
     window.dataLayer = window.dataLayer || [];
     function gtag() {
         dataLayer.push(arguments);
     }
+
     gtag('js', new Date());
     gtag('config', '{{ site.google_analytics }}');
 </script>
+
+<script>
+    function consentGrantedAdStorage() {
+        gtag('consent', 'update', {
+            ad_storage: 'granted',
+            ad_user_data: 'granted',
+            ad_personalization: 'granted',
+            analytics_storage: 'granted',
+        });
+    }
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -20,6 +20,9 @@
 >
     {% include head.html %}
     <body>
+        {% if site.cookie_policy %}
+            {% include cookie-banner.html %}
+        {% endif %}
         {% include header.html %}
         {% unless page.hide_hero %}
             {% include hero.html %}

diff --git a/cookie-policy.md b/cookie-policy.md
@@ -0,0 +1,6 @@
+---
+title: Cookie policy
+layout: page
+---
+
+An example cookie policy.
diff --git a/docs/page-components/cookie-banner.md b/docs/page-components/cookie-banner.md
@@ -0,0 +1,28 @@
+---
+layout: page
+title: Cookie banner
+subtitle: Page Components
+menubar: docs_menu
+show_sidebar: false
+toc: true
+---
+
+## Configuration
+
+To enable the cookie banner, add a `cookie_policy` to your _config.yml file and add the link to your cookie policy page. When the site is built it will display the cookie banner at the top of the page. It will remain until the cookies are either accepted or rejected.  
+
+```yml
+# _config.yml
+
+cookie_policy: /cookie-policy/
+```
+
+## Hiding the banner
+
+When the cookies have been accepted or rejected, a cookie will be stored to remember that the cookie banner should be hidden. This should prevent the banner showing on future page views. 
+
+If the cookies have been accepted, then an additional cookie will be stored called 'cookiesAccepted' with the value 'true'. You can then check this cookie in your own custom scripts as required. 
+
+## Using with Google Analytics
+
+The Google Analytics implementation has been updated to use Google's consent mode. This sets default settings where storage using cookies is denied. If cookies are accepted then it will trigger a function to update the Google Analytics settings to allow cookie storage.