RS-200: Cookie consent banner (#23)

* Cookie consent banner

* clarify Matomo analytics

* use javascript tracking code

* update setExcludedReferrers

* add functional cookies

* formating

docusaurus.config.js

@@ -36,9 +36,7 @@ const config = {
     locales: ["en"],
   },
 
-  plugins: [
-    require.resolve("./src/plugins/docusaurus-plugin-matomo-tag-manager"),
-  ],
+  plugins: [require.resolve("./src/plugins/docusaurus-plugin-matomo")],
 
   presets: [
     [
@@ -78,11 +76,12 @@ const config = {
         searchParameters: {},
       },
 
-      // Cookieless analytics
+      // Matomo analytics
       matomo: {
-        matomoUrl:
-          "https://cdn.matomo.cloud/reductstore.matomo.cloud/container_lnt4UdBs.js",
-        injectInDev: false,
+        siteId: "1",
+        url: "https://reductstore.matomo.cloud/",
+        script: "https://cdn.matomo.cloud/reductstore.matomo.cloud/matomo.js",
+        exclude: [".azurestaticapps.net"],
       },
 
       // Declare some <meta> tags

package.json

@@ -33,7 +33,8 @@
     "react-icons": "^4.11.0",
     "react-loadable": "^5.5.0",
     "react-tooltip": "^5.26.0",
-    "search-insights": "^2.10.0"
+    "search-insights": "^2.10.0",
+    "vanilla-cookieconsent": "3.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.0.1",

src/css/custom.css

@@ -72,4 +72,13 @@ img {
 
 .header-github-link:hover::before {
   background-color: var(--ifm-navbar-link-hover-color);
+}
+
+/* CSS for Cookie Consent */
+#cc-main {
+  --cc-modal-border-radius: 0.5rem;
+  --cc-btn-border-radius: .4rem;
+  --cc-modal-transition-duration: 0.25s;
+  --cc-modal-margin: 1rem;
+  --cc-z-index: 2147483647;
 }

src/pages/privacy.mdx

@@ -30,27 +30,19 @@ data you submit, along with the number of clicks.
 Personal Information refers to data that can be used to personally identify or contact you. 
 This includes your email address, name, and company details, which you may provide to us via forms on our Site.
 
-### 1. Information collected via Technology
+### 1. Information Collected via Technology
 
-In order to enhance the quality of the Service, we collect information provided by your browser or by our software application when you view or use the Service. 
-This includes information such as the website you came from (known as the “referring URL”), the type of browser you use, the device from which you connected to the Service, the time and date of access, and other information that does not personally identify you.
+To enhance the functionality of our Service, we automatically collect certain information when you visit our Service via a web browser or mobile application. This data encompasses non-identifiable details such as your device type, browser version, and the referral URL that led you to our Service.
 
-For our web analytics, we use Matomo ([**https://matomo.org**](https://matomo.org/)), a privacy-focused analytics platform. Notably, our Matomo setup operates without the use of cookies. 
-This means we do not store any tracking cookies on your device for analytics purposes. 
-Matomo helps us understand how our Service is used, without needing to track individuals. 
-It provides insights based on aggregated data, ensuring your browsing experience remains private and anonymous.
+**Matomo Analytics**
 
-**Opt-Out of Matomo Tracking**
+For analytical insights, we utilize [**Matomo**](https://matomo.org/), an analytics solution that prioritizes user privacy. Matomo assists us in gathering data on how our Service is interacted with, while ensuring your privacy is respected. This information aids us in improving our Service and crafting a better user experience for you.
 
-If you prefer not to have your data collected by Matomo, you can opt out at any time. We respect your privacy and provide an opt-out feature for this purpose. 
-Simply click the opt-out button or check the opt-out box provided on this page to stop Matomo from collecting session data during your visits to our website.
+**Complete Opt-Out**
 
-<MatomoOptOut />
+Our Service offers an option for non-cookie based tracking to ensure an anonymous user experience. However, should you wish to exclude yourself from all forms of analytics for enhanced privacy, please use the following Matomo opt-out feature: <MatomoOptOut />
 
-Please be aware that opting out will set a 'do not track' cookie in your browser, and if you clear your cookies, you will need to opt out again. 
-This opt-out is browser-specific, so if you use multiple devices or browsers, you will need to repeat the process for each.
-
-While our site may use cookies for other purposes (such as site functionality and preferences), these are separate from and not used in conjunction with our Matomo analytics setup.
+It's important to remember that opting out or modifying your preferences needs to be performed on each browser and device you use, as these settings are not universally applied.
 
 ### 2. Information Collected via Forms
 
@@ -65,7 +57,7 @@ information from anyone under the age of 13, or allow anyone under the age of 13
 event that we learn that we have gathered personal information from anyone under the age of 13 without the consent of a
 parent or guardian, we will delete that information as soon as possible. 
 
-If you believe we have collected such information, please contact us at [email protected].
+If you believe we have collected such information, please contact us at **[email protected]**.
 
 ## II. HOW WE USE AND SHARE INFORMATION
 
@@ -108,10 +100,9 @@ These include using encryption, firewalls, and secure socket layer (SSL) technol
 These measures are essential for the secure transmission of data over the internet and provide a defense against potential security breaches.
 
 ### Data Analytics and User Privacy
-In our commitment to user privacy, we utilize Matomo for website analytics, which stores data on servers exclusively located in Europe. 
-Our configuration of Matomo is cookie-less, ensuring enhanced privacy by avoiding individual user tracking. 
-This setup focuses on analyzing aggregated data, allowing us to understand website usage patterns while maintaining user anonymity. 
-We comply with strict data protection standards, in line with both local and international data protection regulations, to ensure the secure processing and storage of data collected through Matomo.
+In our dedication to protecting user privacy, we employ Matomo for website analytics. Our Matomo setup is configured to use cookies, which are employed responsibly and only with your consent. These cookies enable us to gather insights into how our Service is used, enhancing our ability to provide a better user experience. The data collected is stored on servers located exclusively in Europe, adhering to strict data protection standards.
+
+Our use of cookies allows for a more nuanced analysis of website usage patterns, contributing to our understanding of user interactions and preferences. We ensure that the use of cookies is transparent and gives you control over your data, with options to manage your preferences and opt out if desired.
 
 ### Risk Acknowledgment
 It's important to note that no method of electronic transmission or storage is completely secure. 
@@ -149,4 +140,4 @@ privacy page for updates.
 If you have any questions regarding this Privacy Policy or the practices of this Site, please contact us by sending an
 email to [**[email protected]**](mailto:[email protected]).
 
-Last Updated: This Privacy Policy was last updated on the 10th of January, 2024.
+Last Updated: This Privacy Policy was last updated on the 5th of March, 2024.

src/plugins/docusaurus-plugin-matomo/index.js

@@ -0,0 +1,59 @@
+module.exports = function (context) {
+  const { siteConfig } = context;
+  const { themeConfig } = siteConfig;
+  const { matomo } = themeConfig;
+
+  if (!matomo || !matomo.url || !matomo.siteId || !matomo.script) {
+    throw new Error(
+      "You need to specify `matomoUrl`, `siteId`, and `script` for `docusaurus-plugin-matomo` to work."
+    );
+  }
+
+  if (matomo.exclude && !Array.isArray(matomo.exclude)) {
+    throw new Error(
+      "`exclude` should be an array of strings for `docusaurus-plugin-matomo` to work."
+    );
+  }
+
+  const isProd = process.env.NODE_ENV === "production";
+  const injectScript = matomo.injectInDev || isProd;
+
+  return {
+    name: "docusaurus-plugin-matomo",
+
+    injectHtmlTags() {
+      if (injectScript) {
+        return {
+          headTags: [
+            {
+              tagName: "script",
+              innerHTML: `
+                var _paq = window._paq = window._paq || [];
+                _paq.push(['requireCookieConsent']);
+                _paq.push(["setExcludedReferrers", ${JSON.stringify(
+                  matomo.exclude || []
+                )}]);
+                _paq.push(['trackPageView']);
+                _paq.push(['enableLinkTracking']);
+                (function() {
+                  var u='${matomo.url}';
+                  _paq.push(['setTrackerUrl', u+'matomo.php']);
+                  _paq.push(['setSiteId', '${matomo.siteId}']);
+                  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                  g.async=true; g.src='${
+                    matomo.script
+                  }'; s.parentNode.insertBefore(g,s);
+                })();
+              `,
+              attributes: {
+                type: "text/javascript",
+              },
+            },
+          ],
+        };
+      }
+
+      return {};
+    },
+  };
+};

src/theme/Root.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useEffect } from "react";
+
+import { initializeCookieConsent } from "./cookieConsent";
+
+export default function Root({ children }) {
+  useEffect(() => {
+    setTimeout(() => {
+      initializeCookieConsent();
+    }, 1000);
+  }, []);
+  return <>{children}</>;
+}

src/theme/cookieConsent.js

@@ -0,0 +1,105 @@
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import * as CookieConsent from "vanilla-cookieconsent";
+
+const cookieConsentConfig = {
+  cookie: {
+    name: "cc_reductstore",
+  },
+  onFirstConsent: handleConsent,
+  onChange: handleConsent,
+  guiOptions: {
+    consentModal: {
+      layout: "box",
+      position: "bottom right",
+      equalWeightButtons: true,
+      flipButtons: false,
+    },
+    preferencesModal: {
+      layout: "box",
+      position: "right",
+      equalWeightButtons: true,
+      flipButtons: false,
+    },
+  },
+  categories: {
+    necessary: {
+      enabled: true,
+      readOnly: true,
+    },
+    functional: {
+      enabled: false,
+    },
+    analytics: {
+      enabled: false,
+    },
+  },
+  language: {
+    default: "en",
+    translations: {
+      en: {
+        consentModal: {
+          title: "We use cookies",
+          description:
+            "We use cookies to ensure you get the best experience on our website",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          showPreferencesBtn: "Manage Individual preferences",
+          footer: '<a href="/privacy">Privacy Policy</a>',
+        },
+        preferencesModal: {
+          title: "Manage cookie preferences",
+          acceptAllBtn: "Accept all",
+          acceptNecessaryBtn: "Reject all",
+          savePreferencesBtn: "Accept current selection",
+          closeIconLabel: "Close modal",
+          sections: [
+            {
+              title: "Cookies",
+              description:
+                "Cookies are small text files stored on your device. We use cookies to improve your experience on our website.",
+            },
+            {
+              title: "Strictly Necessary cookies",
+              description:
+                "These cookies are essential for the proper functioning of the website and cannot be disabled.",
+              linkedCategory: "necessary",
+            },
+            {
+              title: "Functional cookies",
+              description:
+                "These cookies enable the website to remember choices you make on the website, such as cookie preferences.",
+              linkedCategory: "functional",
+            },
+            {
+              title: "Performance and Analytics",
+              description:
+                "These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.",
+              linkedCategory: "analytics",
+            },
+            {
+              title: "More information",
+              description:
+                'Please take a look at our <a href="/privacy">privacy policy</a> for more information.',
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+function handleConsent({ cookie }) {
+  window._paq = window._paq || [];
+  if (cookie.categories.includes("analytics")) {
+    window._paq.push(["rememberCookieConsentGiven"]);
+  } else {
+    window._paq.push(["forgetCookieConsentGiven"]);
+  }
+  if (!cookie.categories.includes("functional")) {
+    CookieConsent.eraseCookies("cc_reductstore");
+  }
+}
+
+export function initializeCookieConsent() {
+  CookieConsent.run(cookieConsentConfig);
+}

yarn.lock

@@ -8337,6 +8337,11 @@ value-equal@^1.0.1:
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
   integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
 
+[email protected]:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/vanilla-cookieconsent/-/vanilla-cookieconsent-3.0.0.tgz#2f5ff996a5cc256c6296f89746da7e0ce2bf6af5"
+  integrity sha512-oeK7FivRDb424mt3/UT8DG98Pu5m6Uuye7JsdzO6HnYkstW5QHXhkslXyUpE3phtKz3NEeIo7hzLUtfRNRMfbQ==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"