update google analytics

package.json

@@ -55,7 +55,7 @@
     "prop-types": "~15.8.1",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
-    "react-ga": "~3.3.0",
+    "react-ga4": "~2.0.0",
     "react-katex": "^3.0.1",
     "react-router-dom": "~5.3.0",
     "react-test-renderer": "~16.14.0",

src/central_limit_theorem/CentralLimitGraph.jsx

@@ -4,7 +4,7 @@ let config = {
     matrix: 'Array'
 };
 const math = create(all, config);
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import {
     createHistogramArray, getHistogramMaxima,
     createScatterPlotHistogram } from '../utils.js';

src/clt_least_squares/CLTLeastSquares.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { Nav } from '../Nav.jsx';
 import { InputForm } from './InputForm';
 import { PopulationGraph } from './PopulationGraph';

src/estimation_least_squares/LeastSquares.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { Nav } from '../Nav.jsx';
 
 import { RegressionForm } from './RegressionForm';

src/linear_regression_model/LinearRegressionModel.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import PropTypes from 'prop-types';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Nav } from '../Nav.jsx';

src/withTracker.jsx

@@ -4,20 +4,17 @@
  */
 
 import React, { Component } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from "react-ga4";
 
-ReactGA.initialize('UA-51144540-29', {
-    testMode: process.env.NODE_ENV === 'test',
-});
-ReactGA.set({ anonymizeIp: true })
+const options = {
+    gtagOptions: {anonymizeIp: true},
+    testMode: process.env.NODE_ENV === 'test'
+}
+ReactGA.initialize('G-VX2F4J3PWZ', options);
 
 export default function withTracker(WrappedComponent, options = {}) {
     const trackPage = (page) => {
-        ReactGA.set({
-            page,
-            ...options
-        });
-        ReactGA.pageview(page);
+        ReactGA.send({ hitType: "pageview", page: page, ...options });
     };
 
     const HOC = class extends Component {