Matomo tracking (#41)

* feat: adding matomo tracking to explorer

* Avoid build problem

---------

Co-authored-by: Hendrik Eeckhaut <[email protected]>

Author: Codetrauma

web/components/MatomoTracking/index.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+declare global {
+  interface Window {
+    _paq?: any[];
+  }
+}
+
+const MatomoTracking = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      var _paq = (window._paq = window._paq || []);
+      _paq.push(['setTrackerUrl', 'https://psedev.matomo.cloud/matomo.php']);
+      _paq.push(['setSiteId', '16']);
+      let script = document.createElement('script');
+      script.async = true;
+      script.src = 'https://cdn.matomo.cloud/psedev.matomo.cloud/matomo.js';
+      document.head.appendChild(script);
+    }
+  }, []);
+
+  useEffect(() => {
+
+    if (typeof window !== 'undefined' && window._paq) {
+      window._paq.push(['setCustomUrl', window.location.pathname]);
+      window._paq.push(['trackPageView']);
+    }
+  }, [location.pathname]);
+  return null;
+};
+
+export default MatomoTracking;

web/pages/App/index.tsx

@@ -3,12 +3,14 @@ import { Routes, Route } from 'react-router-dom';
 import Header from '../../components/Header';
 import SharedProof from '../../components/SharedProof';
 import FileDrop from '../FileDrop';
+import MatomoTracking from '../../components/MatomoTracking';
 import './index.scss';
 
 export default function App(): ReactElement {
   return (
     <div className="app flex flex-col gap-4">
       <Header />
+      <MatomoTracking />
       <Routes>
         <Route path="/" element={<FileDrop />} />
         <Route path="/ipfs/:cid" element={<SharedProof />} />

web/store/proofs.ts

@@ -1,6 +1,5 @@
 import { ThunkDispatch } from 'redux-thunk';
 import { AppRootState } from './index';
-import type { Proof } from 'tlsn-js-v5/build/types';
 import { useSelector } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 import { EXPLORER_URL } from '../utils/constants';