From 6c8de5459585c287ae00ebfa51f17534b642ac77 Mon Sep 17 00:00:00 2001 From: Sam <78538841+spwoodcock@users.noreply.github.com> Date: Tue, 12 Dec 2023 04:19:21 +0800 Subject: [PATCH] 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) --- src/frontend/index.html | 8 --- src/frontend/src/App.jsx | 72 +++++++++++++++++--- src/frontend/src/environment.ts | 1 + src/frontend/src/views/NewProjectDetails.jsx | 1 - src/frontend/src/views/ProjectDetails.jsx | 1 - src/frontend/src/views/Submissions.tsx | 1 - src/frontend/src/views/Tasks.tsx | 1 - 7 files changed, 65 insertions(+), 20 deletions(-) diff --git a/src/frontend/index.html b/src/frontend/index.html index 9e0c81828b..3cd0352ecd 100755 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -2,17 +2,9 @@ - - Field Mapping Tasking Manager diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx index f707da9432..cf116e3dcc 100755 --- a/src/frontend/src/App.jsx +++ b/src/frontend/src/App.jsx @@ -1,4 +1,4 @@ -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'; @@ -6,8 +6,8 @@ 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://35c80d0894e441f593c5ac5dfa1094a0@o68147.ingest.sentry.io/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( + + , 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 index b4a4e02954..a24d0ec7f3 100755 --- 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 index 2f59ad4eea..dbfb93bb04 100644 --- 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 index b809df7c31..dde433ab7b 100755 --- 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 index 102c6d5d4b..8adb588691 100755 --- 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 index 7188963c10..89faa8abd4 100644 --- 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';