chore(docs): adding matomo tracking (#4898)

I always forget to turn it off and then spend 10min everyday stressing
out on why it isn't working

![download
(48)](https://github.com/noir-lang/noir/assets/20129824/06acf8fe-9a40-4346-9db5-39690f793efe)

.github/workflows/docs-pr.yml

@@ -79,6 +79,8 @@ jobs:
         run: yarn workspace docs version::stables
 
       - name: Build docs
+        env:
+          MATOMO_ENV: staging # not really a secret, it will show in the footer anyway
         run: yarn workspaces foreach -Rpt --from docs run build
 
       - name: Upload artifact

docs/docusaurus.config.ts

@@ -47,7 +47,9 @@ export default {
       },
     ],
   ],
-
+  customFields: {
+    MATOMO_ENV: process.env.MATOMO_ENV,
+  },
   themeConfig: {
     colorMode: {
       respectPrefersColorScheme: true,

docs/package.json

@@ -4,11 +4,12 @@
   "private": true,
   "scripts": {
     "preprocess": "yarn workspace @noir-lang/acvm_js build && ./scripts/codegen_nargo_reference.sh && yarn node ./scripts/preprocess/index.js",
-    "start": "yarn preprocess && docusaurus start",
+    "start": "yarn preprocess && MATOMO_ENV=dev docusaurus start",
     "build": "yarn preprocess && docusaurus build",
     "clean": "rm -rf ./processed-docs ./processed-docs ./build",
     "version::stables": "ts-node ./scripts/setStable.ts",
     "serve": "serve build",
+    "swizzle": "docusaurus swizzle",
     "version": "yarn version::stables && ./scripts/cut_version.sh"
   },
   "dependencies": {

docs/src/components/Matomo/matomo.jsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+
+function getSiteId(env) {
+  if (env == 'dev') {
+    return '3';
+  } else if (env == 'staging') {
+    return '2';
+  } else {
+    return '1';
+  }
+}
+function pushInstruction(name, ...args) {
+  return window._paq.push([name, ...args]);
+}
+
+export default function useMatomo() {
+  const { siteConfig } = useDocusaurusContext();
+  const [showBanner, setShowBanner] = useState(false);
+
+  const env = siteConfig.customFields.MATOMO_ENV;
+  const urlBase = 'https://noirlang.matomo.cloud/';
+  const trackerUrl = `${urlBase}matomo.php`;
+  const srcUrl = `${urlBase}matomo.js`;
+
+  window._paq = window._paq || [];
+
+  useEffect(() => {
+    const storedConsent = localStorage.getItem('matomoConsent');
+    if (storedConsent === null) {
+      setShowBanner(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    pushInstruction('setTrackerUrl', trackerUrl);
+    pushInstruction('setSiteId', getSiteId(env));
+    if (env !== 'prod') {
+      pushInstruction('setSecureCookie', false);
+    }
+
+    const doc = document;
+    const scriptElement = doc.createElement('script');
+    const scripts = doc.getElementsByTagName('script')[0];
+
+    scriptElement.type = 'text/javascript';
+    scriptElement.async = true;
+    scriptElement.defer = true;
+    scriptElement.src = srcUrl;
+
+    if (scripts && scripts.parentNode) {
+      scripts.parentNode.insertBefore(scriptElement, scripts);
+    }
+  }, []);
+
+  useEffect(() => {
+    pushInstruction('trackPageView');
+  }, [window.location.href]);
+
+  const optIn = () => {
+    pushInstruction('rememberConsentGiven');
+    localStorage.setItem('matomoConsent', true);
+    setShowBanner(false);
+  };
+
+  const optOut = () => {
+    pushInstruction('forgetConsentGiven');
+    localStorage.setItem('matomoConsent', false);
+    setShowBanner(false);
+  };
+
+  const debug = () => {
+    pushInstruction(function () {
+      console.log(this.getRememberedConsent());
+      console.log(localStorage.getItem('matomoConsent'));
+    });
+  };
+
+  const reset = () => {
+    pushInstruction('forgetConsentGiven');
+    localStorage.clear('matomoConsent');
+  };
+
+  if (!showBanner && env === 'dev') {
+    return (
+      <div id="optout-form">
+        <div className="homepage_footer">
+          <p>Debugging analytics</p>
+          <div className="homepage_cta_footer_container">
+            <button className="cta-button button button--secondary button--sm" onClick={debug}>
+              Debug
+            </button>
+            <button className="cta-button button button--secondary button--sm" onClick={reset}>
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  } else if (!showBanner) {
+    return null;
+  }
+
+  return (
+    <div id="optout-form">
+      <div className="homepage_footer">
+        <p>
+          We value your privacy and we only collect statistics and essential cookies. If you'd like to help us improve
+          our websites, you can allow cookies for tracking page views, time on site, and other analytics.
+          <br />
+          <br />
+          <Link to="https://aztec.network/privacy-policy/">
+            Find out how we use cookies and how you can change your settings.
+          </Link>
+        </p>
+        <div className="homepage_cta_footer_container">
+          <button className="cta-button button button--primary button--sm" onClick={optIn}>
+            I accept cookies
+          </button>
+          <button className="cta-button button button--secondary button--sm" onClick={optOut}>
+            I refuse cookies
+          </button>
+          {env === 'dev' && (
+            <button className="cta-button button button--secondary button--sm" onClick={debug}>
+              Debug
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/css/custom.css

@@ -214,3 +214,31 @@ input#docsearch-input {
   background-color: transparent;
 }
 
+
+#optout-form {
+  position: sticky;
+  bottom: 10px;
+  flex-direction: column;
+  display: flex;
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: var(--ifm-breadcrumb-color-active);
+}
+
+
+
+.homepage_footer {
+  text-align: center;
+  margin-bottom: 1rem;
+  padding: 1.5rem 2rem;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #BEC2C3;
+  border-radius: 12px;
+}
+
+.homepage_cta_footer_container {
+  display: flex;
+  justify-content: center;
+}
+

docs/src/pages/index.jsx

@@ -1,9 +1,8 @@
-import React, { lazy, Suspense } from 'react';
+import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 
 import headerPic from '@site/static/img/homepage_header_pic.png';
-import { BeatLoader } from 'react-spinners';
 
 export default function Landing() {
   return (

docs/src/theme/Root.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import useMatomo from '@site/src/components/Matomo/matomo';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+function OptOutForm() {
+  const banner = useMatomo();
+
+  return <>{banner}</>;
+}
+
+export default function Root({ children }) {
+  const useIsBrowserValue = useIsBrowser();
+  if (!useIsBrowserValue) return <>{children}</>;
+
+  return (
+    <>
+      {children}
+      <BrowserOnly>{() => <OptOutForm />}</BrowserOnly>
+    </>
+  );
+}