Add new site-wide cookie banner

In order to ensure we don't accidentally opt users into Google Analytics cookies before they have responded to our new cookie banner, set the consent mode defaults to deny everything. Once the user accepts the cookie banner, this will send an update to Google Analytics and set the relevant _ga cookies. See https://developers.google.com/tag-platform/security/guides/consent?sjid=13978649501343282593-EU&consentmode=advanced#default-consent
raspberrypi · Nov 11, 2024 · d644c34 · d644c34
1 parent b884d65
commit d644c34
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 3 deletions.
diff --git a/jekyll-assets/_includes/head.html b/jekyll-assets/_includes/head.html
@@ -24,6 +24,12 @@
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
+  gtag('consent', 'default', {
+    'ad_storage': 'denied',
+    'ad_user_data': 'denied',
+    'ad_personalization': 'denied',
+    'analytics_storage': 'denied'
+  });
   gtag('js', new Date());
   gtag('config', 'G-V8TFXM3BKJ', { 'anonymize_ip': true });
 </script>
diff --git a/jekyll-assets/_includes/header.html b/jekyll-assets/_includes/header.html
@@ -3,14 +3,15 @@
   margin: 0;
   padding: 0;
   border: 0;
-  line-height: 1;
   font-family: "Roboto", sans-serif;
   font-size: medium;
   font-weight: 400;
+  line-height: 1;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
           text-size-adjust: 100%;
+  letter-spacing: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
@@ -250,13 +251,125 @@
     padding: 16px;
   }
 }
+
+#__rptl-cookiebanner {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: "Roboto", sans-serif;
+  font-size: medium;
+  font-weight: 400;
+  line-height: 1;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+     -moz-text-size-adjust: 100%;
+          text-size-adjust: 100%;
+  letter-spacing: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  z-index: 101;
+  background: #333;
+  color: #fff;
+}
+#__rptl-cookiebanner.__rptl-cookiebanner-hidden {
+  display: none;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-wrapper {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  max-width: 1300px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 16px;
+}
+@media (min-width: 800px) {
+  #__rptl-cookiebanner .__rptl-cookiebanner-wrapper {
+    padding: 16px 76px;
+  }
+}
+@media (min-width: 1200px) {
+  #__rptl-cookiebanner .__rptl-cookiebanner-wrapper {
+    padding: 16px 84px;
+  }
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-text {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  display: block;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-link {
+  text-decoration: none;
+  color: inherit;
+  font-weight: bold;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-link:hover {
+  text-decoration: underline;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-buttons {
+  display: flex;
+  gap: 10px;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-accept, #__rptl-cookiebanner .__rptl-cookiebanner-reject {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  cursor: pointer;
+  border-radius: 9999px;
+  line-height: 1.5;
+  font-weight: bold;
+  padding: 5px 15px;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-accept:hover, #__rptl-cookiebanner .__rptl-cookiebanner-reject:hover {
+  text-decoration: underline;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-accept:focus, #__rptl-cookiebanner .__rptl-cookiebanner-reject:focus {
+  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(121, 167, 236) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-accept {
+  color: #333;
+  background: #fff;
+}
+#__rptl-cookiebanner .__rptl-cookiebanner-reject {
+  color: #fff;
+  background: #333;
+}
 </style>
+<div id="__rptl-cookiebanner" class="__rptl-cookiebanner-hidden">
+  <div class="__rptl-cookiebanner-wrapper">
+    <p class="__rptl-cookiebanner-text">
+      We use some essential cookies to make our website work.
+    </p>
+    <p class="__rptl-cookiebanner-text">
+      We use optional cookies, as detailed in our <a href="/cookies"
+        class="__rptl-cookiebanner-link">cookie policy</a>, to remember your
+      settings and understand how you use our website.
+    </p>
+    <div class="__rptl-cookiebanner-buttons">
+      <button id="__rptl-cookiebanner-accept" class="__rptl-cookiebanner-accept">
+        Accept optional cookies
+      </button>
+      <button id="__rptl-cookiebanner-reject" class="__rptl-cookiebanner-reject">
+        Reject optional cookies
+      </button>
+    </div>
+  </div>
+</div>
 <header id="__rptl-header">
   <input type="checkbox" class="__rptl-header-burger-state" id="__rptl-header-burger-state" />
 
   <div class="__rptl-header-navbar">
     <div class="__rptl-header-wrapper">
-      <a href="/" class="__rptl-header-brand" aria-label="Raspberry Pi">
+      <a href="/" class="__rptl-header-brand">
         <svg class="__rptl-header-logo" aria-hidden="true" focusable="false" height="44" viewBox="0 0 270 57" xmlns="http://www.w3.org/2000/svg" aria-labelledby="__rptl-header-logo"><title id="__rptl-header-logo">Raspberry Pi</title><g fill-rule="nonzero" fill="none"><path d="M65.275 33.317h-4.477v9.46c0 .29-.235.526-.525.526h-4.57a.525.525 0 0 1-.526-.525V16.55a.525.525 0 0 1 .525-.525h9.61c3.223 0 5.709.718 7.457 2.154a7.437 7.437 0 0 1 2.623 6.09 8.391 8.391 0 0 1-1.208 4.655 8.24 8.24 0 0 1-3.663 2.97l5.635 10.638a.525.525 0 0 1-.464.77h-4.917a.63.63 0 0 1-.56-.342l-4.94-9.643Zm-4.477-4.552h4.534a4.641 4.641 0 0 0 3.278-1.078 3.85 3.85 0 0 0 1.162-2.97 4.122 4.122 0 0 0-1.096-3.034 4.556 4.556 0 0 0-3.363-1.106h-4.515v8.188ZM90.426 42.997a6.562 6.562 0 0 1-.402-1.511 6.551 6.551 0 0 1-5.114 2.192 7.195 7.195 0 0 1-4.937-1.724 5.542 5.542 0 0 1-1.958-4.347 5.73 5.73 0 0 1 2.389-4.946c1.592-1.148 3.894-1.73 6.904-1.742h2.491v-1.162a3.342 3.342 0 0 0-.72-2.248 2.838 2.838 0 0 0-2.277-.843 3.226 3.226 0 0 0-2.145.656 2.13 2.13 0 0 0-.748 1.37.513.513 0 0 1-.513.428h-4.375a.533.533 0 0 1-.524-.596 5.494 5.494 0 0 1 1.054-2.663 7.184 7.184 0 0 1 3.073-2.352 11.2 11.2 0 0 1 4.459-.852 8.848 8.848 0 0 1 5.948 1.883 6.587 6.587 0 0 1 2.202 5.292v8.787a9.948 9.948 0 0 0 .629 3.93.525.525 0 0 1-.47.754h-4.485a.515.515 0 0 1-.48-.306Zm-4.336-3.46c.77.007 1.529-.176 2.21-.534a3.509 3.509 0 0 0 1.5-1.433v-3.485h-2.024c-2.71 0-4.153.937-4.328 2.81l-.019.319a2.166 2.166 0 0 0 .712 1.667 2.764 2.764 0 0 0 1.949.656ZM109.963 37.701a1.745 1.745 0 0 0-.983-1.564 11.18 11.18 0 0 0-3.157-1.021c-4.822-1.012-7.232-3.06-7.232-6.145a5.57 5.57 0 0 1 2.24-4.506 9.031 9.031 0 0 1 5.854-1.808 9.723 9.723 0 0 1 6.173 1.817 5.699 5.699 0 0 1 2.292 4.175.52.52 0 0 1-.525.546h-4.382a.514.514 0 0 1-.514-.435 2.538 2.538 0 0 0-.721-1.485 3.172 3.172 0 0 0-2.342-.759 3.24 3.24 0 0 0-2.117.619c-.483.377-.76.96-.75 1.573.001.603.327 1.158.853 1.452a8.76 8.76 0 0 0 2.876.956 23.54 23.54 0 0 1 3.41.908c2.86 1.05 4.29 2.867 4.29 5.452a5.288 5.288 0 0 1-2.38 4.487 10.264 10.264 0 0 1-6.145 1.715c-1.556.029-3.1-.281-4.524-.91a7.586 7.586 0 0 1-3.1-2.49 5.853 5.853 0 0 1-1.094-2.824.533.533 0 0 1 .523-.596h4.11a.513.513 0 0 1 .513.418c.091.71.46 1.354 1.024 1.793a4.233 4.233 0 0 0 2.66.768c.827.057 1.65-.15 2.352-.59.508-.35.807-.93.796-1.546ZM136.719 33.355a12.159 12.159 0 0 1-2.127 7.503 6.817 6.817 0 0 1-5.742 2.82 6.315 6.315 0 0 1-4.965-2.136v9.03c0 .29-.235.525-.525.525h-4.364a.525.525 0 0 1-.525-.525V23.557a.525.525 0 0 1 .525-.525h4.018c.27 0 .497.206.523.475l.142 1.51a6.363 6.363 0 0 1 5.134-2.36 6.865 6.865 0 0 1 5.826 2.773c1.387 1.848 2.08 4.396 2.08 7.644v.28Zm-5.415-.394a7.982 7.982 0 0 0-1.002-4.365 3.266 3.266 0 0 0-2.913-1.536 3.546 3.546 0 0 0-3.504 1.948v8.3a3.605 3.605 0 0 0 3.541 2.004c2.586 0 3.878-2.117 3.878-6.35ZM158.159 33.355c0 3.247-.694 5.78-2.08 7.597a6.889 6.889 0 0 1-5.808 2.726 6.329 6.329 0 0 1-5.264-2.53l-.191 1.689a.525.525 0 0 1-.522.466h-3.877a.525.525 0 0 1-.525-.525V15.05c0-.29.235-.525.525-.525h4.364a.525.525 0 0 1 .525.525v9.798a6.166 6.166 0 0 1 4.928-2.192 6.945 6.945 0 0 1 5.817 2.726c1.405 1.817 2.108 4.374 2.108 7.672v.3Zm-5.415-.394a8.068 8.068 0 0 0-.974-4.487 3.295 3.295 0 0 0-2.904-1.414 3.572 3.572 0 0 0-3.56 2.117v8a3.62 3.62 0 0 0 3.597 2.135c1.626.093 3.081-.999 3.448-2.585.31-1.23.442-2.498.393-3.766ZM170.555 43.678a9.95 9.95 0 0 1-7.26-2.736 9.722 9.722 0 0 1-2.8-7.288v-.524a12.247 12.247 0 0 1 1.18-5.461 8.666 8.666 0 0 1 3.344-3.71 9.387 9.387 0 0 1 4.936-1.302 8.413 8.413 0 0 1 6.548 2.623c1.593 1.749 2.39 4.228 2.39 7.438v1.685a.525.525 0 0 1-.526.525h-12.383a5.028 5.028 0 0 0 1.583 3.185 4.785 4.785 0 0 0 3.344 1.2 5.886 5.886 0 0 0 4.524-1.837.527.527 0 0 1 .773.026l1.964 2.198c.17.188.182.47.028.672a8.216 8.216 0 0 1-3.036 2.34 10.82 10.82 0 0 1-4.609.966Zm-.618-16.656a3.382 3.382 0 0 0-2.614 1.092 5.65 5.65 0 0 0-1.283 3.124h7.531v-.433a4.034 4.034 0 0 0-.974-2.795 3.492 3.492 0 0 0-2.66-.988ZM193.333 27.525a.523.523 0 0 1-.575.515c-.459-.051-.92-.078-1.382-.081-2.049 0-3.391.693-4.028 2.08v12.739a.525.525 0 0 1-.525.525h-4.364a.525.525 0 0 1-.525-.525V23.557a.525.525 0 0 1 .525-.525h4.096c.277 0 .507.215.524.492l.12 1.924a5.017 5.017 0 0 1 4.514-2.791c.434-.002.867.044 1.29.138a.515.515 0 0 1 .39.515l-.06 4.215ZM207.017 27.525a.523.523 0 0 1-.575.515c-.459-.051-.92-.078-1.382-.081-2.048 0-3.39.693-4.028 2.08v12.739a.525.525 0 0 1-.525.525h-4.364a.525.525 0 0 1-.525-.525V23.557a.525.525 0 0 1 .525-.525h4.096c.277 0 .507.215.524.492l.12 1.924a5.018 5.018 0 0 1 4.514-2.791c.434-.002.867.044 1.29.138a.515.515 0 0 1 .39.515l-.06 4.215ZM217.934 35.64l3.635-12.233a.525.525 0 0 1 .504-.375h4.677a.525.525 0 0 1 .496.697l-7.907 22.721-.45 1.068a6.18 6.18 0 0 1-5.995 3.972 8.368 8.368 0 0 1-2.003-.25.529.529 0 0 1-.395-.513v-3.15a.525.525 0 0 1 .546-.524l.538.02a3.442 3.442 0 0 0 2.035-.492 3.08 3.08 0 0 0 1.19-1.555l.637-1.667-6.857-19.63a.525.525 0 0 1 .496-.697h4.696c.232 0 .437.152.503.374l3.654 12.234ZM245.156 33.692v9.086c0 .29-.235.525-.525.525h-4.57a.525.525 0 0 1-.526-.525V16.55a.525.525 0 0 1 .525-.525h10.117a12.31 12.31 0 0 1 5.405 1.124 8.284 8.284 0 0 1 3.587 3.194 8.91 8.91 0 0 1 1.256 4.712 7.833 7.833 0 0 1-2.745 6.323c-1.83 1.543-4.362 2.314-7.597 2.314h-4.927Zm0-4.553h5.02a4.934 4.934 0 0 0 3.401-1.049 3.816 3.816 0 0 0 1.171-2.998 4.5 4.5 0 0 0-1.18-3.24 4.41 4.41 0 0 0-3.26-1.275h-5.152v8.562ZM263.081 17.786a2.666 2.666 0 0 1 .815-2.005 3.512 3.512 0 0 1 4.431 0 2.86 2.86 0 0 1-.01 4.028 3.473 3.473 0 0 1-4.402 0 2.66 2.66 0 0 1-.834-2.023Zm5.227 25.517h-4.383a.525.525 0 0 1-.525-.525V23.557a.525.525 0 0 1 .525-.525h4.383a.525.525 0 0 1 .525.525v19.22a.525.525 0 0 1-.525.526ZM45.008 32.949a8.74 8.74 0 0 0-3.104-6.182 7.664 7.664 0 0 0-1.44-2.801 8.594 8.594 0 0 0-3.058-5.777c.284-.244.524-.536.708-.862a6.186 6.186 0 0 0 3.63-4.23 5.558 5.558 0 0 0 1.755-3.64 3.481 3.481 0 0 0-.31-1.638 3.114 3.114 0 0 0 .81-3.215c-.606-1.756-2.73-2.896-5.584-3.017a4.497 4.497 0 0 0-3.11-1.065 7.188 7.188 0 0 0-1.678.207 3.821 3.821 0 0 0-1.65-.334 6.458 6.458 0 0 0-3.148.858 2.894 2.894 0 0 0-.38-.025 6.276 6.276 0 0 0-3.551 1.558 10.765 10.765 0 0 0-1.866 1.944 10.768 10.768 0 0 0-1.867-1.944 6.278 6.278 0 0 0-3.55-1.558c-.127 0-.254.008-.38.025a6.46 6.46 0 0 0-3.148-.858 3.822 3.822 0 0 0-1.65.334 7.188 7.188 0 0 0-1.68-.207 4.498 4.498 0 0 0-3.109 1.065c-2.854.12-4.978 1.261-5.585 3.018a3.114 3.114 0 0 0 .812 3.214 3.482 3.482 0 0 0-.31 1.639 5.557 5.557 0 0 0 1.755 3.64 6.186 6.186 0 0 0 3.63 4.229c.183.326.423.618.707.862A8.594 8.594 0 0 0 5.6 23.966a7.663 7.663 0 0 0-1.44 2.801 8.74 8.74 0 0 0-3.104 6.182 8.424 8.424 0 0 0 1.92 6.578c.26 1.31.8 2.549 1.581 3.632a9.452 9.452 0 0 0 2.386 5.514 9.768 9.768 0 0 0 5.262 3.126 12.74 12.74 0 0 0 4.208 2.605 9.763 9.763 0 0 0 13.24 0c1.559-.585 2.988-1.47 4.207-2.605a9.768 9.768 0 0 0 5.262-3.126 9.452 9.452 0 0 0 2.386-5.514 9.311 9.311 0 0 0 1.582-3.632 8.424 8.424 0 0 0 1.919-6.578Z" fill="#000"/><path d="M28.366 4.192a.225.225 0 0 1 .286.24c-.072.672.335.587.432.468a3.526 3.526 0 0 1 3.188-1.53.225.225 0 0 1 .154.363c-.4.593.03.706.19.6 1.631-1.02 3.187-1.023 3.785-.594a.225.225 0 0 1 .013.349c-.604.514-.266.77-.052.692a5.802 5.802 0 0 1 4.74.607.227.227 0 0 1 .006.343 4.493 4.493 0 0 0-1.73 3.018c-.045.396.614.313.891.241a.225.225 0 0 1 .28.21c.026.954-.876 2.002-2.218 2.898-.18.12-.154.408.256.42a.222.222 0 0 1 .191.334c-.478.888-1.13 1.724-3.345 2.298a.227.227 0 0 0-.032.429.217.217 0 0 1 .071.384c-2.207 1.896-7.8 1.148-8.51-2.043a.224.224 0 0 1 .04-.182 21.262 21.262 0 0 1 9.276-7.058.176.176 0 0 0-.087-.34 15.168 15.168 0 0 0-10.074 6.074.227.227 0 0 1-.289.065c-3.585-1.851-.64-7.317 2.538-8.286ZM7.285 12.85a.222.222 0 0 1 .191-.334c.41-.01.436-.299.256-.419C6.39 11.201 5.49 10.153 5.514 9.2a.225.225 0 0 1 .28-.21c.278.072.936.155.891-.241a4.493 4.493 0 0 0-1.73-3.017.227.227 0 0 1 .006-.344 5.802 5.802 0 0 1 4.74-.607c.214.079.552-.178-.052-.692a.225.225 0 0 1 .014-.35c.597-.428 2.153-.426 3.785.594.159.107.589-.006.19-.599a.225.225 0 0 1 .153-.363A3.526 3.526 0 0 1 16.98 4.9c.096.12.503.204.432-.469a.225.225 0 0 1 .286-.239c3.178.97 6.122 6.435 2.537 8.286a.227.227 0 0 1-.289-.065A15.168 15.168 0 0 0 9.873 6.34a.176.176 0 0 0-.088.34 21.262 21.262 0 0 1 9.276 7.057c.04.052.054.119.04.183-.71 3.19-6.303 3.938-8.51 2.042a.217.217 0 0 1 .071-.384.227.227 0 0 0-.031-.429c-2.216-.574-2.867-1.41-3.346-2.298Z" fill="#46AF4B"/><path d="M37.158 22.605c.92 2.446.203 3.622-1.978 2.377a15.632 15.632 0 0 1-4.58-3.84c-1.644-1.952-.576-2.821 2.012-2.352a6.985 6.985 0 0 1 4.546 3.815ZM27.375 19.853c3.12 2.593-.454 4.428-4.343 4.428-3.89 0-7.463-1.835-4.344-4.428a6.935 6.935 0 0 1 8.687 0ZM8.906 22.605a6.985 6.985 0 0 1 4.545-3.815c2.588-.47 3.656.4 2.013 2.352a15.632 15.632 0 0 1-4.58 3.84c-2.182 1.245-2.898.069-1.978-2.377ZM4.394 36.196a6.983 6.983 0 0 1 .518-5.942c1.153-1.96 2.313-1.883 2.773-.222.585 2.29.373 4.712-.6 6.867-.854 1.696-1.921 1.123-2.691-.703ZM12.704 48.896A6.942 6.942 0 0 1 7.482 42.7c.433-10.066 14.94 7.91 5.222 6.196ZM12.999 36.358c-2.433-1.404-3.077-4.844-1.438-7.682 1.639-2.839 4.94-4 7.372-2.596 2.433 1.404 3.077 4.844 1.438 7.682-1.639 2.839-4.94 4-7.372 2.596ZM27.091 52.737a6.947 6.947 0 0 1-8.119 0c-2.41-1.664.015-3.58 4.06-3.58s6.47 1.916 4.06 3.58Z" fill="#CD2355"/><ellipse fill="#CD2355" cx="23.032" cy="41.795" rx="5.647" ry="4.84"/><path d="M25.692 33.762c-1.639-2.838-.995-6.278 1.438-7.682 2.433-1.405 5.734-.243 7.372 2.596 1.64 2.838.995 6.278-1.438 7.682-2.432 1.405-5.733.243-7.372-2.596ZM33.36 48.896C23.64 50.61 38.149 32.634 38.58 42.7a6.941 6.941 0 0 1-5.221 6.196ZM41.67 36.196c-.77 1.826-1.838 2.399-2.691.703a10.417 10.417 0 0 1-.6-6.867c.46-1.66 1.62-1.739 2.772.222a6.983 6.983 0 0 1 .518 5.942Z" fill="#CD2355"/></g></svg>
       </a>
 
@@ -291,7 +404,32 @@
 <script>
   (function() {
     var header = document.getElementById("__rptl-header"),
-        burgerState = document.getElementById("__rptl-header-burger-state");
+        burgerState = document.getElementById("__rptl-header-burger-state"),
+        cookiebanner = document.getElementById("__rptl-cookiebanner"),
+        accept = document.getElementById("__rptl-cookiebanner-accept"),
+        reject = document.getElementById("__rptl-cookiebanner-reject");
+
+    if (document.cookie.indexOf("cookiebanner_accepted=") === -1) {
+      cookiebanner.classList.remove("__rptl-cookiebanner-hidden");
+    }
+
+    accept.addEventListener("click", function (e) {
+      document.cookie = "cookiebanner_accepted=1; max-age=" + 60 * 60 * 24 * 365 * 2;
+
+      if (typeof window.gtag !== "undefined") {
+        window.gtag("consent", "update", {
+          analytics_storage: "granted",
+        });
+      }
+
+      cookiebanner.classList.add("__rptl-cookiebanner-hidden");
+    });
+
+    reject.addEventListener("click", function (e) {
+      document.cookie = "cookiebanner_accepted=0; max-age=" + 60 * 60 * 24 * 365 * 2;
+
+      cookiebanner.classList.add("__rptl-cookiebanner-hidden");
+    });
 
     document.addEventListener("click", function (e) {
       if (!header.contains(e.target)) {