Merge pull request #131 from KPMP/KPMP_3967_AddGA4Events

Kpmp 3967 add ga4 events
KPMP · Apr 21, 2023 · 54b75f0 · 54b75f0
2 parents b9a1e21 + a4aae6a
commit 54b75f0
Show file tree

Hide file tree

Showing 10 changed files with 1,658 additions and 636 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.2.0",
   "private": true,
   "devDependencies": {
-    "node-sass-chokidar": "1.5.0",
+    "node-sass-chokidar": "2.0.0",
     "npm-run-all": "4.1.5",
     "react-scripts": "4.0.3"
   },
@@ -12,9 +12,9 @@
     "@fortawesome/free-solid-svg-icons": "5.5.0",
     "@fortawesome/react-fontawesome": "0.1.3",
     "antd": "4.15.1",
-    "axios": "0.21.1",
+    "axios": "1.3.6",
     "bootstrap": "4.3.1",
-    "es6-shim": "0.35.4",
+    "es6-shim": "0.35.8",
     "history": "4.9.0",
     "html-react-parser": "0.13.0",
     "lodash": "4.17.21",
@@ -25,8 +25,8 @@
     "react-countdown": "2.3.2",
     "react-device-detect": "1.6.1",
     "react-dom": "17.0.1",
-    "react-ga": "3.3.0",
-    "react-player": "2.9.0",
+    "react-ga4": "2.1.0",
+    "react-player": "2.12.0",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
     "reactstrap": "8.8.1",

diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/App.js b/src/App.js
@@ -11,7 +11,7 @@ import loadedState from './initialState';
 import rootReducer from './reducers';
 import { Router, Switch, Route } from 'react-router-dom';
 import SlidePrintManager from './components/Slides/Menu/SlidePrintManager';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 import { createBrowserHistory }  from 'history';
 import ErrorBoundaryContainer from './components/Error/ErrorBoundaryContainer';
 import ErrorPage from './components/Error/ErrorPage';
@@ -27,12 +27,11 @@ const store = applyMiddleware(thunk)(createStore)(rootReducer, initialState, win
 const saveState = () => {
     window.sessionStorage.setItem('redux-store', JSON.stringify(store.getState()));
 };
-const GA_TRACKING_ID = 'UA-124331187-3';
+const GA_TRACKING_ID = 'G-1GQRYQ6B9C';
 
-ReactGA.initialize(GA_TRACKING_ID);
+ReactGA4.initialize(GA_TRACKING_ID,  { testMode: process.env.NODE_ENV === 'test' });
 function logPageView(location, action) {
-    ReactGA.set({ page: location.pathname + location.search });
-    ReactGA.pageview(location.pathname + location.search);
+    ReactGA4.send({ hitType: 'pageview', page: location.pathname + location.search });
 }
 const history = createBrowserHistory();
 history.listen((location, action) => {

diff --git a/src/components/Help/Help.js b/src/components/Help/Help.js
@@ -7,7 +7,7 @@ import WhatSeen from './WhatSeen';
 import CanIShare from './CanIShare';
 import MakeRecommendation from './MakeRecommendation';
 import PasswordIssues from './PasswordIssues';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 
 class Help extends Component {
 
@@ -18,13 +18,14 @@ class Help extends Component {
 
     componentDidMount() {
         document.body.classList.remove('slide-viewer-body');
-        let action = 'View Help';
+        let label = 'Help';
         if (this.props.slides === undefined || this.props.slides.length === 0) {
-            action = 'Sent to Help (no slides)'
+            label = 'No Slides'
         }
-        ReactGA.event({
+        ReactGA4.event({
 			category: 'Participant Portal',
-			action: action,
+			action:'Navigation',
+            label: label
 		});
     }
 

diff --git a/src/components/Help/WhatIsStaining.js b/src/components/Help/WhatIsStaining.js
@@ -29,7 +29,7 @@ class WhatIsStaining extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/pathologist-slide.png' />
+                                <img alt='hand holding slide' src='img/help/pathologist-slide.png' />
                             </Col>
                         </Row>
 

diff --git a/src/components/Help/WhatSeen.js b/src/components/Help/WhatSeen.js
@@ -21,7 +21,7 @@ class WhatSeen extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/figure_kidney.png' />
+                                <img alt="breakdown of kidney structure" src='img/help/figure_kidney.png' />
                             </Col>
                         </Row>
                         <Row>
@@ -36,7 +36,7 @@ class WhatSeen extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/figure_nephron.png' />
+                                <img alt='breakdown of nephron structure' src='img/help/figure_nephron.png' />
                             </Col>
                         </Row>
                         <Row>
@@ -47,7 +47,7 @@ class WhatSeen extends Component {
                                 </p>
                             </Col>
                             <Col lg='8' xs='12'>
-                                <img src='img/help/figure_wsi.png' />
+                                <img alt='anatomy of slide image' src='img/help/figure_wsi.png' />
                             </Col>
                         </Row>
                     </div>

diff --git a/src/components/Nav/NavBar.js b/src/components/Nav/NavBar.js
@@ -1,5 +1,5 @@
 // import React, { Component } from 'react';
-import { NavbarBrand, Collapse, Navbar, NavbarToggler, Nav, NavItem, Container, NavLink, NavbarText } from 'reactstrap';
+import { NavbarBrand, Collapse, Navbar, NavbarToggler, Nav, NavItem, Container, NavLink } from 'reactstrap';
 import React, { useState } from 'react';
 
 const NavBar = (props) => {

diff --git a/src/components/Slides/Menu/Header.js b/src/components/Slides/Menu/Header.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretLeft, faChevronRight, faChevronLeft, faPrint, faDownload } from '@fortawesome/free-solid-svg-icons';
 import { Col, Row } from 'reactstrap';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 import SlidePrintManager from './SlidePrintManager';
 import { getNextSlide, getPreviousSlide, downloadSlide } from '../slideHelpers.js';
 import { isMobile } from 'react-device-detect';
@@ -19,35 +19,39 @@ class Header extends Component {
         let nextSlide = getNextSlide(this.props.selectedPatient.slides, this.props.selectedPatient.selectedSlide);
         this.props.setSelectedSlide(nextSlide);
         this.props.toggleMenu(true);
-		ReactGA.event({
+		ReactGA4.event({
 			category: 'Participant Portal',
-			action: 'Select Slide',
+			action: 'Navigation',
+			label: 'Select Slide'
 		});
     }
 
     handlePreviousSlide() {
         let previousSlide = getPreviousSlide(this.props.selectedPatient.slides, this.props.selectedPatient.selectedSlide);
         this.props.setSelectedSlide(previousSlide);
         this.props.toggleMenu(true);
-		ReactGA.event({
+		ReactGA4.event({
 			category: 'Participant Portal',
-			action: 'Select slide',
+			action: 'Navigation',
+			label: 'Select Slide'
 		});
     }
 
     handleDownload() {
-        ReactGA.event({
+		let downloadFileName = this.props.selectedPatient.selectedSlide.slideName + ".jpg";
+        ReactGA4.event({
             category: 'Participant Portal',
-            action: 'Download Slide'
+            action: 'Download',
+			label: downloadFileName
         });
-    	let downloadFileName = this.props.selectedPatient.selectedSlide.slideName + ".jpg";
-    	downloadSlide(downloadFileName);
+		downloadSlide(downloadFileName);
     }
 
     onPrint() {
-        ReactGA.event({
+        ReactGA4.event({
             category: 'Participant Portal',
-            action: 'Print Slide'
+            action: 'Print',
+			label: this.props.selectedPatient.selectedSlide.slideName
         });
         SlidePrintManager.getInstance().beforePrint();
         setTimeout(window.print, 10);

diff --git a/src/components/Slides/Menu/SlideList.js b/src/components/Slides/Menu/SlideList.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Col, Row } from 'reactstrap';
 import Header from './Header';
-import ReactGA from 'react-ga';
+import { default as ReactGA4 } from 'react-ga4';
 
 class SlideList extends Component {
 
@@ -13,9 +13,10 @@ class SlideList extends Component {
     handleSelectSlide(slide) {
         this.props.setSelectedSlide(slide);
         this.props.toggleMenu(true);
-		ReactGA.event({
+		ReactGA4.event({
 			category: 'Participant Portal',
-			action: 'Select Slide',
+			action: 'Navigation',
+			label: 'Select Slide'
 		});
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ class WhatIsStaining extends Component { @@
                                     </p>
                                 </Col>
                                 <Col lg='8' xs='12'>
-                                    <img src='img/help/pathologist-slide.png' />
+                                    <img alt='hand holding slide' src='img/help/pathologist-slide.png' />
                                 </Col>
                             </Row>
@@ Expand Down @@