Merge branch 'questionnaire' into 'main'

feat: add react-ga4

See merge request witapp/aura-webapp!35

package-lock.json

@@ -19,6 +19,7 @@
         "react": "^18.2.0",
         "react-circular-progressbar": "^2.1.0",
         "react-dom": "^18.2.0",
+        "react-ga4": "^2.1.0",
         "react-i18next": "^12.3.1",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.11.2",
@@ -2868,6 +2869,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+    },
     "node_modules/react-i18next": {
       "version": "12.3.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz",
@@ -5388,6 +5394,11 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+    },
     "react-i18next": {
       "version": "12.3.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-i18next": "^12.3.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",

src/components/App/index.tsx

@@ -90,6 +90,9 @@ import EmailConfirmPage from "../pages/EmailConfirm";
 import OnboardingPage from "../pages/Onboarding";
 import TrialChoicePage from "../pages/TrialChoice";
 import TrialPaymentPage from "../pages/TrialPayment";
+import ReactGA from "react-ga4";
+
+ReactGA.initialize("G-00S3ECJGSJ");
 
 function App(): JSX.Element {
   const [isSpecialOfferOpen, setIsSpecialOfferOpen] = useState<boolean>(false);
@@ -100,6 +103,14 @@ function App(): JSX.Element {
   const dispatch = useDispatch();
   const { token, user } = useAuth();
 
+  useEffect(() => {
+    ReactGA.send({
+      hitType: "pageview",
+      page: document.location.pathname + document.location.search,
+      title: "Custom Title",
+    });
+  }, []);
+
   const closeSpecialOfferAttention = () => {
     setIsSpecialOfferOpen(false);
     navigate(routes.client.auth());

src/init.tsx

@@ -53,12 +53,12 @@ const init = async () => {
   };
   smartLook();
 
-  const googleManager = () => {
+  // const googleManager = () => {
-    const script = document.createElement("script");
+  //   const script = document.createElement("script");
-    script.setAttribute("src", "/metrics/google-manager.js");
+  //   script.setAttribute("src", "/metrics/google-manager.js");
-    document.head.appendChild(script);
+  //   document.head.appendChild(script);
-  };
+  // };
-  googleManager();
+  // googleManager();
   
   return (
     <React.Fragment>