global: add cookie banner (#766)

Co-authored-by: Pablo Tamarit <pablo.tamarit@cern.ch> Co-authored-by: Alex Ioannidis <a.ioannidis@cern.ch>
zenodo · Mar 12, 2024 · 3df3621 · 3df3621
1 parent e49a022
commit 3df3621
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 17 deletions.
diff --git a/assets/less/zenodo-rdm/globals/site.overrides b/assets/less/zenodo-rdm/globals/site.overrides
@@ -143,4 +143,24 @@ a.inverted {
 .image.thumbnail-image {
   height: 150px;
   object-fit: cover;
-}
+}
+
+.cookie-banner {
+  position: fixed !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  padding: 0.5em 1.75em 0.5em 1em !important;
+  display: flex !important;
+  justify-content: space-between;
+  align-items: center;
+
+  .buttons {
+    display: flex;
+  }
+}
+
+.cookie-banner.hidden {
+  display: none !important;
+}
diff --git a/invenio.cfg b/invenio.cfg
@@ -204,6 +204,7 @@ THEME_FOOTER_TEMPLATE = 'zenodo_rdm/footer.html'
 # Enable the below on the dedicated environment
 # THEME_TRACKINGCODE_TEMPLATE = "zenodo_rdm/trackingcode/trackingcode-qa.html"
 
+COOKIE_POLICY_URL = "https://about.zenodo.org/cookie-policy"
 
 # Invenio-App-RDM
 # ===============

diff --git a/templates/semantic-ui/zenodo_rdm/trackingcode/trackingcode-prod.html b/templates/semantic-ui/zenodo_rdm/trackingcode/trackingcode-prod.html
@@ -1,15 +1,79 @@
-<!-- Matomo -->
+<div class="ui container info message cookie-banner hidden">
+  <i class="close icon"></i>
+  <div>
+    <i aria-hidden="true" class="info icon"></i>
+    <p class="inline">This site uses cookies. Find out more on <a href="{{ _(config.COOKIE_POLICY_URL) }}">how we use cookies</a></p>
+  </div>
+  <div class="buttons">
+    <button class="ui button small primary" id="cookies-all">Accept all cookies</button>
+    <button class="ui button small" id="cookies-essential">Accept only essential cookies</button>
+  </div>
+</div>
+
 <script>
   var _paq = window._paq = window._paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
+  _paq.push(['requireCookieConsent']);
+
   (function() {
     var u="https://webanalytics.web.cern.ch/";
     _paq.push(['setTrackerUrl', u+'matomo.php']);
     _paq.push(['setSiteId', '366']);
     var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
     g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
+
+  const cookieConsent = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("cookie_consent="))
+    ?.split("=")[1];
+
+  if (cookieConsent) {
+    if (cookieConsent === "all") {
+      matomo();
+    }
+  } else {
+    document.querySelector(".cookie-banner").classList.remove("hidden")
+    _paq.push(['forgetConsentGiven']);
+  }
+
+  $('.cookie-banner .close')
+    .on('click', function () {
+      $(this)
+        .closest('.message')
+        .transition('fade');
+      setCookie("cookie_consent","essential");
+    });
+
+  $('#cookies-essential')
+    .on('click', function () {
+      $(this)
+        .closest('.message')
+        .transition('fade');
+      setCookie("cookie_consent","essential");
+    });
+
+  $('#cookies-all')
+    .on('click', function () {
+      $(this)
+        .closest('.message')
+        .transition('fade');
+      setCookie("cookie_consent","all");
+      _paq.push(['rememberCookieConsentGiven']);
+      matomo();
+    });
+
+  function matomo() {
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+  }
+
+  function setCookie(cname, cvalue) {
+    var d = new Date();
+    d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000)); // one year
+    var expires = "expires=" + d.toUTCString();
+    var cookie = cname + "=" + cvalue + ";" + expires + ";"
+    cookie += "path=/;SameSite=None; Secure"; // so that it works across subdomains
+    document.cookie = cookie;
+  }
 </script>
-<!-- End Matomo Code -->
diff --git a/templates/semantic-ui/zenodo_rdm/trackingcode/trackingcode-qa.html b/templates/semantic-ui/zenodo_rdm/trackingcode/trackingcode-qa.html
@@ -1,15 +1,79 @@
-<!-- Matomo -->
+<div class="ui container info message cookie-banner hidden">
+  <i class="close icon"></i>
+  <div>
+    <i aria-hidden="true" class="info icon"></i>
+    <p class="inline">This site uses cookies. Find out more on <a href="{{ _(config.COOKIE_POLICY_URL) }}">how we use cookies</a></p>
+  </div>
+  <div class="buttons">
+    <button class="ui button small primary" id="cookies-all">Accept all cookies</button>
+    <button class="ui button small" id="cookies-essential">Accept only essential cookies</button>
+  </div>
+</div>
+
 <script>
-    var _paq = window._paq = window._paq || [];
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['requireCookieConsent']);
+
+  (function() {
+    var u="https://webanalytics.web.cern.ch/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '365']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+
+  const cookieConsent = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("cookie_consent="))
+    ?.split("=")[1];
+
+  if (cookieConsent) {
+    if (cookieConsent === "all") {
+      matomo();
+    }
+  } else {
+    document.querySelector(".cookie-banner").classList.remove("hidden")
+    _paq.push(['forgetConsentGiven']);
+  }
+
+  $('.cookie-banner .close')
+    .on('click', function () {
+      $(this)
+        .closest('.message')
+        .transition('fade');
+      setCookie("cookie_consent","essential");
+    });
+
+  $('#cookies-essential')
+    .on('click', function () {
+      $(this)
+        .closest('.message')
+        .transition('fade');
+      setCookie("cookie_consent","essential");
+    });
+
+  $('#cookies-all')
+    .on('click', function () {
+      $(this)
+        .closest('.message')
+        .transition('fade');
+      setCookie("cookie_consent","all");
+      _paq.push(['rememberCookieConsentGiven']);
+      matomo();
+    });
+
+  function matomo() {
     /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
     _paq.push(['trackPageView']);
     _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="https://webanalytics.web.cern.ch/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', '365']);
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
-  </script>
-  <!-- End Matomo Code -->
+  }
+
+  function setCookie(cname, cvalue) {
+    var d = new Date();
+    d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000)); // one year
+    var expires = "expires=" + d.toUTCString();
+    var cookie = cname + "=" + cvalue + ";" + expires + ";"
+    cookie += "path=/;SameSite=None; Secure"; // so that it works across subdomains
+    document.cookie = cookie;
+  }
+</script>