feat: add mamoto tracking to prod frontend (#1040)

* refactor: import ol css styles once in App.jsx * feat: add matomo tracking script * fix: only add matomo tracking in production * refactor: dynamically import mamoto tracking in prod only * refactor: invert conditions to trigger mamoto (single domain)
hotosm · Dec 11, 2023 · 6c8de54 · 6c8de54
1 parent da2e5fb
commit 6c8de54
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 20 deletions.
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -2,17 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="favicon.ico" />
     <link rel="manifest" href="/manifest.json" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.4.0/ol.min.css"
-      integrity="sha512-InhY7dfdkf2+ZyIsz9AX9M1xDC3GjEy0zVnAIudX1fTUOEhBu13KooX9txjBoWkDAMI3fQ07VE/D0gMUvweerw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <title>Field Mapping Tasking Manager</title>
   </head>

diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { RouterProvider } from 'react-router-dom';
 import { store, persistor } from './store/Store';
 import { Provider } from 'react-redux';
 import routes from './routes';
 import { PersistGate } from 'redux-persist/integration/react';
 import './index.css';
+import 'ol/ol.css';
 import 'react-loading-skeleton/dist/skeleton.css';
-import * as Sentry from '@sentry/react';
 import environment from './environment';
 
 // Added Fix of Console Error of MUI Issue
@@ -26,9 +26,16 @@ console.error = function filterWarnings(msg, ...args) {
   }
 };
 
-{
-  import.meta.env.MODE !== 'development'
-    ? Sentry.init({
+const SentryInit = () => {
+  useEffect(() => {
+    if (import.meta.env.MODE === 'development') {
+      return;
+    }
+    console.log('Adding Sentry');
+
+    import('@sentry/react').then((Sentry) => {
+      // Init Sentry
+      Sentry.init({
         dsn:
           import.meta.env.BASE_URL === 'fmtm.hotosm.org'
             ? 'https://[email protected]/4505557311356928'
@@ -45,18 +52,67 @@ console.error = function filterWarnings(msg, ...args) {
         // Session Replay
         replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
         replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-      })
-    : null;
-}
+      });
+    });
+
+    return () => {};
+  }, []);
+
+  return null; // Renders nothing
+};
+
+// Matomo Tracking Component
+const MatomoTrackingInit = () => {
+  useEffect(() => {
+    if (import.meta.env.MODE === 'development' || import.meta.env.BASE_URL !== 'fmtm.hotosm.org') {
+      return;
+    }
+    // Set matomo tracking id
+    window.site_id = environment.mamotoTrackingId;
 
+    // Create optout-form div for banner
+    const optoutDiv = document.createElement('div');
+    optoutDiv.id = 'optout-form'; // Set an ID if needed
+    document.body.appendChild(optoutDiv);
+
+    // Load CDN script
+    const script = document.createElement('script');
+    script.src = 'https://cdn.hotosm.org/tracking-v3.js';
+    document.body.appendChild(script);
+    // Manually trigger DOMContentLoaded, that script hooks
+    // https://github.com/hotosm/matomo-tracking/blob/9b95230cb5f0bf2a902f00379152f3af9204c641/tracking-v3.js#L125
+    script.onload = () => {
+      optoutDiv.dispatchEvent(
+        new Event('DOMContentLoaded', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    };
+
+    // Cleanup on unmount
+    return () => {
+      document.body.removeChild(optoutDiv);
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return null; // Renders nothing
+};
+
+// The main App render
 ReactDOM.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <RouterProvider router={routes} />
+      <MatomoTrackingInit />
+      <SentryInit />
     </PersistGate>
   </Provider>,
   document.getElementById('app'),
 );
+
+// Register service worker
 if (import.meta.env.MODE === 'production') {
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {

diff --git a/src/frontend/src/environment.ts b/src/frontend/src/environment.ts
@@ -8,6 +8,7 @@ export default {
     const desimaal = (dec >>> 0).toString(2);
     return window.btoa(desimaal);
   },
+  mamotoTrackingId: 28,
   tasksStatus: [
     {
       label: 'READY',

diff --git a/src/frontend/src/views/NewProjectDetails.jsx b/src/frontend/src/views/NewProjectDetails.jsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import '../../node_modules/ol/ol.css';
 import '../styles/home.scss';
 import WindowDimension from '../hooks/WindowDimension';
 import MapDescriptionComponents from '../components/MapDescriptionComponents';

diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import '../../node_modules/ol/ol.css';
 import '../styles/home.scss';
 import WindowDimension from '../hooks/WindowDimension';
 import MapDescriptionComponents from '../components/MapDescriptionComponents';

diff --git a/src/frontend/src/views/Submissions.tsx b/src/frontend/src/views/Submissions.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 // import '../styles/home.css'
-import '../../node_modules/ol/ol.css';
 import CoreModules from '../shared/CoreModules';
 // import { useLocation, useNavigate } from 'react-router-dom';
 import Avatar from '../assets/images/avatar.png';

diff --git a/src/frontend/src/views/Tasks.tsx b/src/frontend/src/views/Tasks.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 // import '../styles/home.css'
-import '../../node_modules/ol/ol.css';
 import CoreModules from '../shared/CoreModules';
 import AssetModules from '../shared/AssetModules';
 // import { useLocation, useNavigate } from 'react-router-dom';