chore: adding matomo tracking

.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

@@ -48,7 +48,7 @@ export default {
     ],
   ],
   customFields: {
-    MATOMO_CONTAINER: process.env.MATOMO_CONTAINER, // not really a secret, it's in the footer anyway
+    MATOMO_ENV: process.env.MATOMO_ENV,
   },
   themeConfig: {
     colorMode: {

docs/package.json

@@ -4,7 +4,7 @@
   "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",

docs/src/components/Matomo/matomo.jsx

@@ -1,24 +1,72 @@
-import { useEffect } from 'react';
-
+import { useEffect, useState } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useIsBrowser from '@docusaurus/useIsBrowser';
+
+function getSiteId(siteConfig) {
+  const env = siteConfig.customFields.MATOMO_ENV;
+  if (env == 'dev') {
+    return '3';
+  } else if (env == 'staging') {
+    return '2';
+  } else {
+    return '1';
+  }
+}
 
 export default function useMatomo() {
   const { siteConfig } = useDocusaurusContext();
-  const useIsBrowserValue = useIsBrowser();
-  if (!useIsBrowserValue) return null;
+  const [isOptedOut, setIsOptedOut] = useState(false);
 
   useEffect(() => {
-    console.log(siteConfig.customFields.MATOMO_CONTAINER);
-    var _mtm = (window._mtm = window._mtm || []);
-    _mtm.push({ 'mtm.startTime': new Date().getTime(), event: 'mtm.Start' });
+    window._paq = window._paq || [];
+    console.log('effect');
+    console.log(window);
+
+    var u = 'https://noirlang.matomo.cloud/';
+    const siteId = getSiteId(siteConfig);
+    // const secureCookie = siteId === '3' ? false : true;
+    // console.log('secureCookie', secureCookie);
+    // window._paq.push(['setSecureCookie', secureCookie]);
+    window._paq.push(['setTrackerUrl', u + 'matomo.php']);
+    window._paq.push(['setSiteId', siteId]);
+
     var d = document,
       g = d.createElement('script'),
       s = d.getElementsByTagName('script')[0];
     g.async = true;
-    g.src = `https://cdn.matomo.cloud/noirlang.matomo.cloud/container_${siteConfig.customFields.MATOMO_CONTAINER}.js`;
+    g.src = 'https://cdn.matomo.cloud/noirlang.matomo.cloud/matomo.js';
     s.parentNode.insertBefore(g, s);
+  }, []);
+
+  useEffect(() => {
+    window._paq = window._paq || [];
+    window._paq.push(['trackPageView']);
   }, [window.location.href]);
 
-  return null;
+  useEffect(() => {
+    window._paq = window._paq || [];
+    function setOptOutText(element) {
+      console.log(element.checked);
+      window._paq.push([
+        function () {
+          element.checked = !this.isUserOptedOut();
+          document.querySelector('label[for=optout] strong').innerText = this.isUserOptedOut()
+            ? 'You are currently opted out. Click here to opt in.'
+            : 'You are currently opted in. Click here to opt out.';
+        },
+      ]);
+    }
+
+    var optOut = document.getElementById('optout');
+    optOut.addEventListener('click', function () {
+      if (this.checked) {
+        window._paq.push(['forgetUserOptOut']);
+      } else {
+        window._paq.push(['optUserOut']);
+      }
+      setOptOutText(optOut);
+    });
+    setOptOutText(optOut);
+  }, [isOptedOut]);
+
+  return <></>;
 }

docs/src/theme/Root.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import useMatomo from '@site/src/components/Matomo/matomo';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function OptOutForm() {
+  useMatomo();
+
+  return (
+    <div id="optout-form">
+      <p>
+        You may choose not to have a unique web analytics cookie identification number assigned to your computer to
+        avoid the aggregation and analysis of data collected on this website.
+      </p>
+      <p>To make that choice, please click below to receive an opt-out cookie.</p>
+
+      <p>
+        <input type="checkbox" id="optout" />
+        <label htmlFor="optout">
+          <strong></strong>
+        </label>
+      </p>
+    </div>
+  );
+}
+
+export default function Root({ children }) {
+  const useIsBrowserValue = useIsBrowser();
+  if (!useIsBrowserValue) return <>{children}</>;
+
+  return (
+    <>
+      <BrowserOnly>{() => <OptOutForm />}</BrowserOnly>
+      {children}
+    </>
+  );
+}