Upgrade to google analytics 4 (oncokb#990)

Co-authored-by: Calvin Lu <[email protected]>

package.json

@@ -51,6 +51,7 @@
     "react-day-picker": "^7.4.8",
     "react-document-title": "^2.0.3",
     "react-dom": "16.13.1",
+    "react-ga4": "^2.1.0",
     "react-highlight-words": "^0.16.0",
     "react-hot-loader": "4.12.20",
     "react-html-parser": "^2.0.2",

src/main/webapp/app/App.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import ReactGA from 'react-ga4';
+
 import Main from './Main';
 import AppStore, { IAppConfig } from 'app/store/AppStore';
 import AuthenticationStore from 'app/store/AuthenticationStore';
@@ -13,9 +15,8 @@ import { PAGE_TITLE, PAGE_ROUTE } from 'app/config/constants';
 import { action } from 'mobx';
 import autobind from 'autobind-decorator';
 import { getPageTitle } from 'app/shared/utils/Utils';
-import Reaptcha from 'reaptcha';
 import { setRecaptchaToken } from './indexUtils';
-import { COILinkout } from './pages/teamPage/COILinkout';
+import { AppConfig } from 'app/appConfig';
 
 export type Stores = {
   appStore: AppStore;
@@ -94,6 +95,11 @@ class App extends React.Component {
 
     this.checkHash(history);
 
+    // Install Google Analytics 4 if GA project id is configured on server side
+    if (AppConfig.serverConfig?.googleAnalyticsProjectId) {
+      ReactGA.initialize(AppConfig.serverConfig.googleAnalyticsProjectId);
+    }
+
     return (
       <DocumentTitle title={getPageTitle(PAGE_TITLE.HOME, false)}>
         <>

src/main/webapp/index.html

@@ -120,7 +120,7 @@ <h1>You must enable javascript to view this page.</h1>
       /*]]>*/
 
     </script>
-    <script type="text/javascript" language="javascript">
+    <script type="text/javascript">
         window.onload=function() {
             setTimeout(showError, 4000);
         };
@@ -143,18 +143,5 @@ <h1>You must enable javascript to view this page.</h1>
             }
         </script>
     -->
-
-    <!-- Google Analytics -->
-    <script>
-      if (window.serverConfig && window.serverConfig.googleAnalyticsProjectId) {
-        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-          function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-          e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-          e.src='https://www.google-analytics.com/analytics.js';
-          r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-        ga('create', window.serverConfig.googleAnalyticsProjectId);
-        ga('send', 'pageview');
-      }
-    </script>
 </body>
 </html>

yarn.lock

@@ -14901,6 +14901,11 @@ react-file-download@^0.3.2:
   resolved "https://registry.yarnpkg.com/react-file-download/-/react-file-download-0.3.5.tgz#7a4e75874528806bfa53ddddd98b4da427d3a897"
   integrity sha1-ek51h0UogGv6U93d2YtNpCfTqJc=
 
+react-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
+
 react-highlight-words@^0.16.0:
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.16.0.tgz#4b4b9824e3d2b98789d3e3b3aedb5e961ae1b7cf"