use react-ga

client/package.json

@@ -3,7 +3,6 @@
     "version": "3.19.22",
     "private": true,
     "dependencies": {
-        "@analytics/google-analytics": "^0.5.3",
         "@chakra-ui/icons": "^1.0.14",
         "@chakra-ui/react": "^1.6.5",
         "@datepicker-react/hooks": "^2.8.0",
@@ -13,7 +12,6 @@
         "@hookform/resolvers": "^2.8.1",
         "@react-hook/window-size": "^1.0.12",
         "@welldone-software/why-did-you-render": "^3.5.0",
-        "analytics": "^0.7.5",
         "debounce-promise": "^3.1.2",
         "easy-peasy": "^4.0.1",
         "emailjs-com": "^2.6.4",
@@ -32,6 +30,7 @@
         "react-cool-dimensions": "^2.0.7",
         "react-dom": "^17.0.2",
         "react-firebase-hooks": "^3.0.4",
+        "react-ga": "^3.3.0",
         "react-hook-form": "^7.8.4",
         "react-icons": "^4.2.0",
         "react-moment": "0.9.7",

client/src/components/AuthButton.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import * as yup from 'yup';
 import { Input, Button, Center, Text, Box } from '@chakra-ui/react';
 import { FormControl, FormErrorMessage } from '@chakra-ui/form-control';
-
+import ReactGA from 'react-ga';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { setEmailToLocalStorage } from './Paywall/Paywall.utils';
@@ -139,14 +139,18 @@ export const AuthButton = ({ isRestore }) => {
     const { handleSubmit } = methods;
 
     const onSubmitFn = async (values: LoginFormInputs) => {
-        console.info('Send email', values);
+        ReactGA.event({
+            category: 'Paywall',
+            action: `User pressed Login`,
+        });
+
         try {
             await sendEmail(values.email);
             setEmailToLocalStorage(values.email);
             setStep(STEP_EMAIL_SENT);
         } catch (e) {
             console.error('Error sending email', e);
-            alert(e.message);
+            alert(e?.message);
         }
     };
 

client/src/components/Paywall/Paywall.tsx

@@ -6,7 +6,7 @@ import { Loader } from '../Loader';
 import { UserContext } from './UserProvider';
 import { auth, firestore } from '../../utils/firebase.utils';
 import { APP_RETURN_URL } from './Paywall.utils';
-
+import ReactGA from 'react-ga';
 import { useCollectionData } from 'react-firebase-hooks/firestore';
 
 const PremiumButton: React.FC<any> = ({ onRestoreClick, ...rest }) => {
@@ -85,6 +85,11 @@ const AddSubsciptionButton: React.FC<any> = () => {
         }
 
         try {
+            ReactGA.event({
+                category: 'Paywall',
+                action: `User pressed Subscribe`,
+            });
+
             setIsLoading(true);
 
             const product = products?.find(item => item.active);
@@ -169,6 +174,8 @@ const STEP_LOGIN = 1;
 const STEP_RESTORE = 2;
 const STEP_END = 3;
 
+const StepTexts = { [STEP_BEGIN]: 'BEGIN', [STEP_LOGIN]: 'LOGIN', [STEP_RESTORE]: 'RESTORE', [STEP_END]: 'END' };
+
 export const Paywall: React.FC<any> = ({ children, ...rest }) => {
     const [step, setStep] = React.useState(STEP_BEGIN);
     const { firebaseUser } = React.useContext(UserContext);
@@ -181,6 +188,13 @@ export const Paywall: React.FC<any> = ({ children, ...rest }) => {
         }
     }, [firebaseUser]);
 
+    React.useEffect(() => {
+        ReactGA.event({
+            category: 'Paywall',
+            action: `User went to ${StepTexts[step]} step`,
+        });
+    }, [step]);
+
     return (
         <Box
             borderRadius="lg"

client/src/index.tsx

@@ -7,12 +7,28 @@ import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
 import { mainStore } from './store/mainStore';
 import '@fontsource/inter';
 import { theme } from './theme/theme';
+import ReactGA from 'react-ga';
+
+const isDev = process.env.NODE_ENV !== 'production';
+
+const trackingId: string = process.env.REACT_APP_TRACKING_ID || '';
+
+ReactGA.initialize(trackingId, { debug: isDev });
+
+ReactGA.set({
+    appVersion: process.env.REACT_APP_VERSION,
+    anonymizeIp: true,
+    checkProtocolTask: null,
+    checkStorageTask: null,
+    historyImportTask: null,
+});
 
 (window as any).CSPSettings = {
     nonce: 'nonce',
 };
 
-if (process.env.NODE_ENV !== 'production') {
+if (isDev) {
+    console.info('Development!');
     const whyDidYouRender = require('@welldone-software/why-did-you-render');
     whyDidYouRender(React);
 }

client/src/routes/TrayAppPage.tsx

@@ -8,14 +8,14 @@ import { Logger } from '../logger';
 import { useWindowFocused } from '../hooks/windowFocusedHook';
 import { throttle } from 'lodash';
 import deepEqual from 'fast-deep-equal/es6';
-import { analytics } from '../analytics';
 import { Box } from '@chakra-ui/layout';
 import { Divider } from '@chakra-ui/react';
 import { ITrackItem } from '../@types/ITrackItem';
 import { OnlineChart } from '../components/TrayLayout/OnlineChart';
 import { useStoreActions, useStoreState } from '../store/easyPeasy';
 import { useInterval } from '../hooks/intervalHook';
 import { TrayItemEdit } from './tray/TrayItemEdit';
+import ReactGA from 'react-ga';
 
 const EMPTY_ARRAY = [];
 const BG_SYNC_DELAY_MS = 10000;
@@ -61,7 +61,11 @@ const TrayAppPageTemp = () => {
         if (windowIsActive) {
             Logger.debug('Window active:', windowIsActive);
             // loadLastLogItemsThrottled();
-            analytics.track('trayOpened', { version: process.env.REACT_APP_VERSION });
+
+            ReactGA.event({
+                category: 'Tray',
+                action: `Opened Tray`,
+            });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [windowIsActive]);

client/src/useGoogleAnalytics.tsx

@@ -1,15 +1,13 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-
-import { analytics } from './analytics';
+import ReactGA from 'react-ga';
 
 export function useGoogleAnalytics() {
     const location = useLocation();
 
     useEffect(() => {
-        analytics.page({
-            path: location.pathname,
-            search: location.search,
-        });
+        console.info('Setting page', location.pathname);
+        ReactGA.set({ path: location.pathname, search: location.search }); // Update the user's current page
+        ReactGA.pageview(location.pathname); // Record a pageview for the given page
     }, [location]);
 }

client/yarn.lock

@@ -11097,6 +11097,11 @@ [email protected]:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-hook-form@^7.8.4:
   version "7.12.2"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.12.2.tgz#2660afbf03c4ef360a9314ebf46ce3d972296c77"