Complete GA integration

packages/webapp/src/app.tsx

@@ -14,8 +14,9 @@ import AppI18n, { Locales } from './classes/app-i18n';
 import MapsPage from './components/maps-page';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
-import GoogleAnalytics from 'react-ga';
+import ReactGA from 'react-ga';
 import EditorPage from './components/editor-page';
+import AppConfig from './classes/app-config';
 
 
 declare module '@mui/styles/defaultTheme' {
@@ -23,11 +24,8 @@ declare module '@mui/styles/defaultTheme' {
     interface DefaultTheme extends Theme { }
 }
 
-
 // Google Analytics Initialization.
-GoogleAnalytics.initialize('UA-2347723-1');
-GoogleAnalytics.pageview(window.location.pathname + window.location.search);
-
+ReactGA.initialize(AppConfig.getGoogleAnalyticsAccount());
 
 const queryClient = new QueryClient({
     defaultOptions: {

packages/webapp/src/components/editor-page/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ActionDispatcher from '../maps-page/action-dispatcher';
 import { ActionType } from '../maps-page/action-chooser';
 import Editor from '@wisemapping/editor';
 import AppI18n from '../../classes/app-i18n';
 import { useSelector } from 'react-redux';
 import { hotkeysEnabled } from '../../redux/editorSlice';
+import ReactGA from 'react-ga';
 
 export type EditorPropsType = {
     mapId: number;
@@ -14,9 +15,12 @@ export type EditorPropsType = {
 const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
     const [activeDialog, setActiveDialog] = React.useState<ActionType | null>(null);
     const hotkeys = useSelector(hotkeysEnabled);
-    // Load user locale ...
     const userLocale = AppI18n.getUserLocale();
 
+    useEffect(() => {
+        ReactGA.pageview(window.location.pathname + window.location.search);
+    }, []);
+
     return <>
         <Editor {...props} onAction={setActiveDialog} locale={userLocale.code} hotkeys={hotkeys} />
         {

packages/webapp/src/components/forgot-password-page/index.tsx

@@ -12,6 +12,7 @@ import { activeInstance } from '../../redux/clientSlice';
 import Input from '../form/input';
 import GlobalError from '../form/global-error';
 import SubmitButton from '../form/submit-button';
+import ReactGA from 'react-ga';
 
 import Typography from '@mui/material/Typography';
 
@@ -77,7 +78,8 @@ const ForgotPasswordPage = (): React.ReactElement => {
     const intl = useIntl();
     useEffect(() => {
         document.title = intl.formatMessage({ id: 'forgot.page-title', defaultMessage: 'Forgot Password | WiseMapping' });
-    });
+        ReactGA.pageview(window.location.pathname + window.location.search);
+    },[]);
 
     return (
         <div>

packages/webapp/src/components/login-page/index.tsx

@@ -10,6 +10,7 @@ import FormContainer from '../layout/form-container';
 import Typography from '@mui/material/Typography';
 import FormControl from '@mui/material/FormControl';
 import Link from '@mui/material/Link';
+import ReactGA from 'react-ga';
 
 type ConfigStatusProps = {
     enabled?: boolean;
@@ -68,7 +69,8 @@ const LoginPage = (): React.ReactElement => {
 
     useEffect(() => {
         document.title = intl.formatMessage({id:'login.page-title',defaultMessage:'Login | WiseMapping'});
-    });
+        ReactGA.pageview(window.location.pathname + window.location.search);
+    },[]);
 
     return (
         <div>

packages/webapp/src/components/maps-page/index.tsx

@@ -41,6 +41,8 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import logoIcon from './logo-small.svg';
 import poweredByIcon from './pwrdby-white.svg';
 import LabelDeleteConfirm from './maps-list/label-delete-confirm';
+import ReactGA from 'react-ga';
+
 
 export type Filter = GenericFilter | LabelFilter;
 
@@ -81,6 +83,7 @@ const MapsPage = (): ReactElement => {
             id: 'maps.page-title',
             defaultMessage: 'My Maps | WiseMapping',
         });
+        ReactGA.pageview(window.location.pathname + window.location.search);
     }, []);
 
     const mutation = useMutation((id: number) => client.deleteLabel(id), {
@@ -261,14 +264,14 @@ const MapsPage = (): ReactElement => {
                     <MapsList filter={filter} />
                 </main>
             </div>
-            { labelToDelete && <LabelDeleteConfirm
+            {labelToDelete && <LabelDeleteConfirm
                 onClose={() => setLabelToDelete(null)}
                 onConfirm={() => {
                     handleLabelDelete(labelToDelete);
                     setLabelToDelete(null);
                 }}
                 label={labels.find(l => l.id === labelToDelete)}
-            /> }
+            />}
         </IntlProvider>
     );
 };

packages/webapp/src/components/registration-page/index.tsx

@@ -17,6 +17,7 @@ import SubmitButton from '../form/submit-button';
 import Typography from '@mui/material/Typography';
 import FormControl from '@mui/material/FormControl';
 import AppConfig from '../../classes/app-config';
+import ReactGA from 'react-ga';
 
 export type Model = {
     email: string;
@@ -164,7 +165,8 @@ const RegistationPage = (): React.ReactElement => {
             id: 'registration.page-title',
             defaultMessage: 'Registration | WiseMapping',
         });
-    });
+        ReactGA.pageview(window.location.pathname + window.location.search);
+    },[]);
 
     return (
         <div>