From 73eba9252764c196aa0a1995b3036bad358f36a3 Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Thu, 8 Aug 2024 18:43:22 -0400
Subject: [PATCH 1/8] Add to notification and send object back for putting in
 the gtag

---
 .../templates/checkout_interstitial.html      |  6 ------
 .../src/components/NotificationContainer.js   |  4 ++++
 frontend/public/src/components/TopBar.js      |  2 +-
 frontend/public/src/lib/notificationsApi.js   | 21 ++++++++++++++++++-
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/ecommerce/templates/checkout_interstitial.html b/ecommerce/templates/checkout_interstitial.html
index 6706435a9..af309783c 100644
--- a/ecommerce/templates/checkout_interstitial.html
+++ b/ecommerce/templates/checkout_interstitial.html
@@ -15,12 +15,6 @@ <h1 class="mt-4">Redirecting to the payment processor...</h1>
                             <input type="hidden" readonly="readonly" name="{{ key }}" value="{{ value }}" />
                             {% endfor %}
                         </form>
-                    {% if ga_purchase_flag %}
-                        {{ ga_purchase_payload | json_script:"ga-purchase-payload" }}
-                        <script type="text/javascript">
-                            gtag("event", "purchase", JSON.parse(document.getElementById('ga-purchase-payload').textContent));
-                        </script>
-                    {% endif %}
                         <script type="text/javascript">
                             document.getElementById('checkout_form').submit();
                         </script>
diff --git a/frontend/public/src/components/NotificationContainer.js b/frontend/public/src/components/NotificationContainer.js
index e1a013680..d83022432 100644
--- a/frontend/public/src/components/NotificationContainer.js
+++ b/frontend/public/src/components/NotificationContainer.js
@@ -5,6 +5,7 @@ import { compose } from "redux"
 import { partial } from "ramda"
 // $FlowFixMe
 import { Alert } from "reactstrap"
+import ga from "react-ga"
 
 import { removeUserNotification } from "../actions"
 import {
@@ -15,6 +16,7 @@ import {
 } from "../lib/util"
 import { getNotificationAlertProps } from "../lib/notificationsApi"
 import { notificationTypeMap, TextNotification } from "./notifications"
+import { checkFeatureFlag } from "../lib/util"
 
 import type { UserNotificationMapping } from "../reducers/notifications"
 
@@ -58,6 +60,8 @@ export class NotificationContainer extends React.Component<Props, State> {
     const { userNotifications } = this.props
     const { hiddenNotifications } = this.state
 
+    const ga_feature_flag = checkFeatureFlag("", )
+
     return (
       <div className="notifications order-2" id="notifications-container">
         {Object.keys(userNotifications).map((notificationKey, i) => {
diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js
index 789e7a2db..14fbdd0b9 100644
--- a/frontend/public/src/components/TopBar.js
+++ b/frontend/public/src/components/TopBar.js
@@ -31,7 +31,7 @@ const TopBar = ({ currentUser }: Props) => {
   return (
     <header className="site-header new-design d-flex d-flex flex-column">
       {showComponent ? (
-        <NotificationContainer id="notifications-container" />
+        <NotificationContainer id="notifications-container" currentUser={currentUser} />
       ) : null}
       <nav
         className={`order-1 sub-nav navbar navbar-expand-md top-navbar ${
diff --git a/frontend/public/src/lib/notificationsApi.js b/frontend/public/src/lib/notificationsApi.js
index efd369a8f..d1710195e 100644
--- a/frontend/public/src/lib/notificationsApi.js
+++ b/frontend/public/src/lib/notificationsApi.js
@@ -19,10 +19,12 @@ import {
   USER_MSG_TYPE_COURSE_NON_UPGRADABLE,
   USER_MSG_TYPE_DISCOUNT_INVALID
 } from "../constants"
+import { checkFeatureFlag } from "../lib/util"
 
 type UserMessage = {
   type: string,
-  text: string
+  text: string,
+  gaObject?: Object
 }
 
 export function getStoredUserMessage(): UserMessage | null {
@@ -31,9 +33,26 @@ export function getStoredUserMessage(): UserMessage | null {
     return null
   }
   const userMsgObject = JSON.parse(decodeURIComponent(userMsgValue))
+  const ga_purchase_feature_flag = checkFeatureFlag(ENABLE_GOOGLE_ANALYTICS_DATA_PUSH)
+  if (ga_purchase_feature_flag) {
+    const user_action = determineUserActionForGoogleAnalytics(userMsgObject)
+    if (user_action) {
+      userMsgObject.gaObject = user_action
+    }
+  }
   return parseStoredUserMessage(userMsgObject)
 }
 
+export function determineUserActionForGoogleAnalytics(userMsgJson: Object) {
+  const msgType = userMsgJson.type || null
+  if (!msgType) {
+    return null
+  }
+  if (msgType === USER_MSG_TYPE_PAYMENT_ACCEPTED) {
+    return userMsgJson.gaObject
+  }
+}
+
 export function parseStoredUserMessage(
   userMsgJson: Object
 ): UserMessage | null {

From 211ff4cfaf8af58b8d6ec34facd61a2a775f0c55 Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 12:20:39 -0400
Subject: [PATCH 2/8] Update ga to handle ecommerce events

---
 frontend/public/package.json                  |  1 +
 .../src/components/NotificationContainer.js   | 14 +++++++---
 frontend/public/src/constants.js              |  4 +++
 frontend/public/src/containers/App.js         |  3 ++-
 frontend/public/src/lib/notificationsApi.js   | 26 ++++++++-----------
 frontend/public/src/util/gaUtils.js           | 17 ++++++++++++
 frontend/public/src/util/withTracker.js       |  7 ++---
 yarn.lock                                     |  8 ++++++
 8 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 frontend/public/src/util/gaUtils.js

diff --git a/frontend/public/package.json b/frontend/public/package.json
index b32e36950..61aed481a 100644
--- a/frontend/public/package.json
+++ b/frontend/public/package.json
@@ -87,6 +87,7 @@
     "react-document-title": "2.0.3",
     "react-dom": "16.14.0",
     "react-ga": "2.7.0",
+    "react-ga4": "^2.1.0",
     "react-google-recaptcha": "1.1.0",
     "react-hot-loader": "4.13.1",
     "react-markdown": "5.0.3",
diff --git a/frontend/public/src/components/NotificationContainer.js b/frontend/public/src/components/NotificationContainer.js
index d83022432..4faf6cefe 100644
--- a/frontend/public/src/components/NotificationContainer.js
+++ b/frontend/public/src/components/NotificationContainer.js
@@ -5,7 +5,6 @@ import { compose } from "redux"
 import { partial } from "ramda"
 // $FlowFixMe
 import { Alert } from "reactstrap"
-import ga from "react-ga"
 
 import { removeUserNotification } from "../actions"
 import {
@@ -14,11 +13,13 @@ import {
   newSetWithout,
   timeoutPromise
 } from "../lib/util"
-import { getNotificationAlertProps } from "../lib/notificationsApi"
+import { determineUserActionForGoogleAnalytics, getNotificationAlertProps } from "../lib/notificationsApi"
 import { notificationTypeMap, TextNotification } from "./notifications"
 import { checkFeatureFlag } from "../lib/util"
+import { sendGAEcommerceEvent } from "../util/gaUtils"
 
 import type { UserNotificationMapping } from "../reducers/notifications"
+import {GOOGLE_ANALYTICS_EVENT_TYPE} from "../constants";
 
 const DEFAULT_REMOVE_DELAY_MS = 1000
 
@@ -58,9 +59,16 @@ export class NotificationContainer extends React.Component<Props, State> {
 
   render() {
     const { userNotifications } = this.props
+    const { currentUser } = this.props
     const { hiddenNotifications } = this.state
 
-    const ga_feature_flag = checkFeatureFlag("", )
+    const ga_feature_flag = checkFeatureFlag("mitxonline-4099-dedp-google-analytics", currentUser)
+    if (ga_feature_flag) {
+      let gaEcommerceEventType = determineUserActionForGoogleAnalytics(currentUser)
+      if (gaEcommerceEventType === GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"]) {
+        sendGAEcommerceEvent(gaEcommerceEventType, event)
+      }
+    }
 
     return (
       <div className="notifications order-2" id="notifications-container">
diff --git a/frontend/public/src/constants.js b/frontend/public/src/constants.js
index 6f2c80aa1..899f1182d 100644
--- a/frontend/public/src/constants.js
+++ b/frontend/public/src/constants.js
@@ -173,3 +173,7 @@ export const NODETYPE_COURSE = "course"
 
 export const NODEOPER_ALL = "all_of"
 export const NODEOPER_MIN = "min_number_of"
+
+export const GOOGLE_ANALYTICS_EVENT_TYPE = {
+  GA_PURCHASE: "purchase",
+}
diff --git a/frontend/public/src/containers/App.js b/frontend/public/src/containers/App.js
index 1b5496df6..1ee80bf5e 100644
--- a/frontend/public/src/containers/App.js
+++ b/frontend/public/src/containers/App.js
@@ -43,8 +43,9 @@ type Props = {
 export class App extends React.Component<Props, void> {
   componentDidMount() {
     const { addUserNotification } = this.props
+    const { currentUser } = this.props
 
-    const userMsg = getStoredUserMessage()
+    const userMsg = getStoredUserMessage(currentUser)
     if (userMsg) {
       addUserNotification({
         "loaded-user-msg": {
diff --git a/frontend/public/src/lib/notificationsApi.js b/frontend/public/src/lib/notificationsApi.js
index d1710195e..6e65024f7 100644
--- a/frontend/public/src/lib/notificationsApi.js
+++ b/frontend/public/src/lib/notificationsApi.js
@@ -19,7 +19,6 @@ import {
   USER_MSG_TYPE_COURSE_NON_UPGRADABLE,
   USER_MSG_TYPE_DISCOUNT_INVALID
 } from "../constants"
-import { checkFeatureFlag } from "../lib/util"
 
 type UserMessage = {
   type: string,
@@ -27,29 +26,26 @@ type UserMessage = {
   gaObject?: Object
 }
 
-export function getStoredUserMessage(): UserMessage | null {
+function ingestUserMessage(): userJson | null {
   const userMsgValue = getCookie(USER_MSG_COOKIE_NAME)
   if (!userMsgValue || isEmptyText(userMsgValue)) {
     return null
   }
-  const userMsgObject = JSON.parse(decodeURIComponent(userMsgValue))
-  const ga_purchase_feature_flag = checkFeatureFlag(ENABLE_GOOGLE_ANALYTICS_DATA_PUSH)
-  if (ga_purchase_feature_flag) {
-    const user_action = determineUserActionForGoogleAnalytics(userMsgObject)
-    if (user_action) {
-      userMsgObject.gaObject = user_action
-    }
-  }
+  return JSON.parse(decodeURIComponent(userMsgValue))
+}
+
+export function getStoredUserMessage(): UserMessage | null {
+  const userMsgObject = ingestUserMessage()
   return parseStoredUserMessage(userMsgObject)
 }
 
-export function determineUserActionForGoogleAnalytics(userMsgJson: Object) {
+export function determineUserActionForGoogleAnalytics() {
+  const userMsg = ingestUserMessage()
+  if (!userMsg) return null
   const msgType = userMsgJson.type || null
-  if (!msgType) {
-    return null
-  }
+  if (!msgType) return null
   if (msgType === USER_MSG_TYPE_PAYMENT_ACCEPTED) {
-    return userMsgJson.gaObject
+    return "purchase"
   }
 }
 
diff --git a/frontend/public/src/util/gaUtils.js b/frontend/public/src/util/gaUtils.js
new file mode 100644
index 000000000..cd7b91d72
--- /dev/null
+++ b/frontend/public/src/util/gaUtils.js
@@ -0,0 +1,17 @@
+import ga4 from "react-ga4"
+
+export function sendGAEvent({ category, action, label }) {
+  let event = {
+    category: category,
+    action: action,
+    label: label,
+  }
+  if (value !== undefined) {
+    event.value = value
+  }
+  ga4.event(event)
+}
+
+export function sendGAEcommerceEvent({ event_type, event_data }) {
+  ga4.gtag("event", event_type, event_data)
+}
diff --git a/frontend/public/src/util/withTracker.js b/frontend/public/src/util/withTracker.js
index 8c396ad77..1d943217b 100644
--- a/frontend/public/src/util/withTracker.js
+++ b/frontend/public/src/util/withTracker.js
@@ -3,19 +3,20 @@
 
 // From https://github.com/ReactTraining/react-router/issues/4278#issuecomment-299692502
 import React from "react"
-import ga from "react-ga"
+import ga4 from "react-ga4"
 
 const withTracker = (WrappedComponent: Class<React.Component<*, *>>) => {
   const debug = SETTINGS.reactGaDebug === "true"
 
   if (SETTINGS.gaTrackingID) {
-    ga.initialize(SETTINGS.gaTrackingID, { debug: debug })
+    ga4.initialize(SETTINGS.gaTrackingID, {debug: debug})
   }
 
   const HOC = (props: Object) => {
     const page = props.location.pathname
+    const title = props.location.title
     if (SETTINGS.gaTrackingID) {
-      ga.pageview(page)
+      ga4.send({hitType: "pageview", page: page, title: title})
     }
     return <WrappedComponent {...props} />
   }
diff --git a/yarn.lock b/yarn.lock
index fa3f17543..dff8419d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15151,6 +15151,7 @@ __metadata:
     react-document-title: 2.0.3
     react-dom: 16.14.0
     react-ga: 2.7.0
+    react-ga4: ^2.1.0
     react-google-recaptcha: 1.1.0
     react-hot-loader: 4.13.1
     react-markdown: 5.0.3
@@ -18554,6 +18555,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-ga4@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "react-ga4@npm:2.1.0"
+  checksum: f7fb41141418d4ad14756f1126a1e9958db37d4d84ae6cd798043dc03a390b6dba74d69311af0349f0b9580a43bda8930138194ccc29c4100efe446e2d6eb057
+  languageName: node
+  linkType: hard
+
 "react-ga@npm:2.7.0":
   version: 2.7.0
   resolution: "react-ga@npm:2.7.0"

From aeb0e37caa5b4a80c1961a5f084711919cb81b0a Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 13:10:13 -0400
Subject: [PATCH 3/8] move to outer app.js

---
 ecommerce/views/v0/__init__.py                     |  1 +
 .../public/src/components/NotificationContainer.js | 14 +-------------
 frontend/public/src/containers/App.js              | 13 +++++++++++++
 frontend/public/src/lib/notificationsApi.js        |  7 +++++--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/ecommerce/views/v0/__init__.py b/ecommerce/views/v0/__init__.py
index a263cfcef..a0b528778 100644
--- a/ecommerce/views/v0/__init__.py
+++ b/ecommerce/views/v0/__init__.py
@@ -573,6 +573,7 @@ def post_checkout_redirect(self, order_state, order, request):
                 {
                     "type": USER_MSG_TYPE_PAYMENT_ACCEPTED,
                     "run": order.lines.first().purchased_object.course.title,
+                    "order": order.reference_number,
                 },
             )
         else:
diff --git a/frontend/public/src/components/NotificationContainer.js b/frontend/public/src/components/NotificationContainer.js
index 4faf6cefe..e1a013680 100644
--- a/frontend/public/src/components/NotificationContainer.js
+++ b/frontend/public/src/components/NotificationContainer.js
@@ -13,13 +13,10 @@ import {
   newSetWithout,
   timeoutPromise
 } from "../lib/util"
-import { determineUserActionForGoogleAnalytics, getNotificationAlertProps } from "../lib/notificationsApi"
+import { getNotificationAlertProps } from "../lib/notificationsApi"
 import { notificationTypeMap, TextNotification } from "./notifications"
-import { checkFeatureFlag } from "../lib/util"
-import { sendGAEcommerceEvent } from "../util/gaUtils"
 
 import type { UserNotificationMapping } from "../reducers/notifications"
-import {GOOGLE_ANALYTICS_EVENT_TYPE} from "../constants";
 
 const DEFAULT_REMOVE_DELAY_MS = 1000
 
@@ -59,17 +56,8 @@ export class NotificationContainer extends React.Component<Props, State> {
 
   render() {
     const { userNotifications } = this.props
-    const { currentUser } = this.props
     const { hiddenNotifications } = this.state
 
-    const ga_feature_flag = checkFeatureFlag("mitxonline-4099-dedp-google-analytics", currentUser)
-    if (ga_feature_flag) {
-      let gaEcommerceEventType = determineUserActionForGoogleAnalytics(currentUser)
-      if (gaEcommerceEventType === GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"]) {
-        sendGAEcommerceEvent(gaEcommerceEventType, event)
-      }
-    }
-
     return (
       <div className="notifications order-2" id="notifications-container">
         {Object.keys(userNotifications).map((notificationKey, i) => {
diff --git a/frontend/public/src/containers/App.js b/frontend/public/src/containers/App.js
index 1ee80bf5e..01fd73cdd 100644
--- a/frontend/public/src/containers/App.js
+++ b/frontend/public/src/containers/App.js
@@ -10,6 +10,7 @@ import urljoin from "url-join"
 import users, { currentUserSelector } from "../lib/queries/users"
 import { routes } from "../lib/urls"
 import {
+  determineUserActionForGoogleAnalytics,
   getStoredUserMessage,
   removeStoredUserMessage
 } from "../lib/notificationsApi"
@@ -32,6 +33,9 @@ import CatalogPage from "./pages/CatalogPage"
 
 import type { Match, Location } from "react-router"
 import type { CurrentUser } from "../flow/authTypes"
+import {checkFeatureFlag} from "../lib/util";
+import {GOOGLE_ANALYTICS_EVENT_TYPE} from "../constants";
+import {sendGAEcommerceEvent} from "../util/gaUtils";
 
 type Props = {
   match: Match,
@@ -45,6 +49,15 @@ export class App extends React.Component<Props, void> {
     const { addUserNotification } = this.props
     const { currentUser } = this.props
 
+    const ga_feature_flag = checkFeatureFlag("mitxonline-4099-dedp-google-analytics", currentUser)
+    if (ga_feature_flag) {
+      let gaEcommerceEventObject = determineUserActionForGoogleAnalytics(currentUser)
+      if (gaEcommerceEventObject.action === GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"]) {
+        let event = gaEcommerceEventObject.order
+        sendGAEcommerceEvent(gaEcommerceEventObject.action, event)
+      }
+    }
+
     const userMsg = getStoredUserMessage(currentUser)
     if (userMsg) {
       addUserNotification({
diff --git a/frontend/public/src/lib/notificationsApi.js b/frontend/public/src/lib/notificationsApi.js
index 6e65024f7..aa825ff16 100644
--- a/frontend/public/src/lib/notificationsApi.js
+++ b/frontend/public/src/lib/notificationsApi.js
@@ -42,10 +42,13 @@ export function getStoredUserMessage(): UserMessage | null {
 export function determineUserActionForGoogleAnalytics() {
   const userMsg = ingestUserMessage()
   if (!userMsg) return null
-  const msgType = userMsgJson.type || null
+  const msgType = userMsg.type || null
   if (!msgType) return null
   if (msgType === USER_MSG_TYPE_PAYMENT_ACCEPTED) {
-    return "purchase"
+    return {
+      action: GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"],
+      order: userMsg.order
+    }
   }
 }
 

From e630d34b8b55163507eee9e79378cfca42c61def Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 14:18:20 -0400
Subject: [PATCH 4/8] changes for formatting

---
 frontend/public/src/containers/App.js       | 14 +++++++-------
 frontend/public/src/lib/notificationsApi.js |  5 ++++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/public/src/containers/App.js b/frontend/public/src/containers/App.js
index 01fd73cdd..91654c09d 100644
--- a/frontend/public/src/containers/App.js
+++ b/frontend/public/src/containers/App.js
@@ -33,9 +33,9 @@ import CatalogPage from "./pages/CatalogPage"
 
 import type { Match, Location } from "react-router"
 import type { CurrentUser } from "../flow/authTypes"
-import {checkFeatureFlag} from "../lib/util";
-import {GOOGLE_ANALYTICS_EVENT_TYPE} from "../constants";
-import {sendGAEcommerceEvent} from "../util/gaUtils";
+import {checkFeatureFlag} from "../lib/util"
+import {GOOGLE_ANALYTICS_EVENT_TYPE} from "../constants"
+import {sendGAEcommerceEvent} from "../util/gaUtils"
 
 type Props = {
   match: Match,
@@ -49,11 +49,11 @@ export class App extends React.Component<Props, void> {
     const { addUserNotification } = this.props
     const { currentUser } = this.props
 
-    const ga_feature_flag = checkFeatureFlag("mitxonline-4099-dedp-google-analytics", currentUser)
-    if (ga_feature_flag) {
-      let gaEcommerceEventObject = determineUserActionForGoogleAnalytics(currentUser)
+    const gaFeatureFlag = checkFeatureFlag("mitxonline-4099-dedp-google-analytics", currentUser)
+    if (gaFeatureFlag) {
+      const gaEcommerceEventObject = determineUserActionForGoogleAnalytics(currentUser)
       if (gaEcommerceEventObject.action === GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"]) {
-        let event = gaEcommerceEventObject.order
+        const event = gaEcommerceEventObject.order
         sendGAEcommerceEvent(gaEcommerceEventObject.action, event)
       }
     }
diff --git a/frontend/public/src/lib/notificationsApi.js b/frontend/public/src/lib/notificationsApi.js
index aa825ff16..df02a13d8 100644
--- a/frontend/public/src/lib/notificationsApi.js
+++ b/frontend/public/src/lib/notificationsApi.js
@@ -4,6 +4,7 @@ import { isEmptyText } from "./util"
 import {
   ALERT_TYPE_DANGER,
   ALERT_TYPE_SUCCESS,
+  GOOGLE_ANALYTICS_EVENT_TYPE,
   USER_MSG_COOKIE_NAME,
   USER_MSG_TYPE_COMPLETED_AUTH,
   USER_MSG_TYPE_ENROLL_BLOCKED,
@@ -23,7 +24,6 @@ import {
 type UserMessage = {
   type: string,
   text: string,
-  gaObject?: Object
 }
 
 function ingestUserMessage(): userJson | null {
@@ -36,6 +36,9 @@ function ingestUserMessage(): userJson | null {
 
 export function getStoredUserMessage(): UserMessage | null {
   const userMsgObject = ingestUserMessage()
+  if (!userMsgObject) {
+    return null
+  }
   return parseStoredUserMessage(userMsgObject)
 }
 

From c1fdd7b3faae646690b40ada00aaa4172385416c Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 14:30:34 -0400
Subject: [PATCH 5/8] remove unused package

---
 frontend/public/package.json |  1 -
 yarn.lock                    | 11 -----------
 2 files changed, 12 deletions(-)

diff --git a/frontend/public/package.json b/frontend/public/package.json
index 61aed481a..18a60a6d7 100644
--- a/frontend/public/package.json
+++ b/frontend/public/package.json
@@ -86,7 +86,6 @@
     "react-device-detect": "1.17.0",
     "react-document-title": "2.0.3",
     "react-dom": "16.14.0",
-    "react-ga": "2.7.0",
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "1.1.0",
     "react-hot-loader": "4.13.1",
diff --git a/yarn.lock b/yarn.lock
index dff8419d8..986729338 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15150,7 +15150,6 @@ __metadata:
     react-device-detect: 1.17.0
     react-document-title: 2.0.3
     react-dom: 16.14.0
-    react-ga: 2.7.0
     react-ga4: ^2.1.0
     react-google-recaptcha: 1.1.0
     react-hot-loader: 4.13.1
@@ -18562,16 +18561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-ga@npm:2.7.0":
-  version: 2.7.0
-  resolution: "react-ga@npm:2.7.0"
-  peerDependencies:
-    prop-types: ^15.6.0
-    react: ^15.6.2 || ^16.0
-  checksum: 15d8571c156edfaa204ff0041db7a901b0eeca3e3b21774e918269b0fe48204bb5b6a3df882caea5e0077aa3a32be39a48e7082e556563338f2a78b402a59463
-  languageName: node
-  linkType: hard
-
 "react-google-recaptcha@npm:1.1.0":
   version: 1.1.0
   resolution: "react-google-recaptcha@npm:1.1.0"

From 0ef7509dc0afe4615353319f47018638a93ca288 Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 14:34:06 -0400
Subject: [PATCH 6/8] formatting in gaUtils.js

---
 frontend/public/src/util/gaUtils.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/public/src/util/gaUtils.js b/frontend/public/src/util/gaUtils.js
index cd7b91d72..678aeef8b 100644
--- a/frontend/public/src/util/gaUtils.js
+++ b/frontend/public/src/util/gaUtils.js
@@ -1,10 +1,10 @@
 import ga4 from "react-ga4"
 
-export function sendGAEvent({ category, action, label }) {
+export function sendGAEvent({ category, action, label, value }) {
   let event = {
     category: category,
-    action: action,
-    label: label,
+    action:   action,
+    label:    label,
   }
   if (value !== undefined) {
     event.value = value
@@ -12,6 +12,6 @@ export function sendGAEvent({ category, action, label }) {
   ga4.event(event)
 }
 
-export function sendGAEcommerceEvent({ event_type, event_data }) {
-  ga4.gtag("event", event_type, event_data)
+export function sendGAEcommerceEvent({ eventType, eventData }) {
+  ga4.gtag("event", eventType, eventData)
 }

From 8e1b9e78e838bb6c89c5cad07e999104b38e29f5 Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 14:56:59 -0400
Subject: [PATCH 7/8] lint

---
 frontend/public/src/lib/notificationsApi.js | 2 +-
 frontend/public/src/util/gaUtils.js         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/public/src/lib/notificationsApi.js b/frontend/public/src/lib/notificationsApi.js
index df02a13d8..2345daaa6 100644
--- a/frontend/public/src/lib/notificationsApi.js
+++ b/frontend/public/src/lib/notificationsApi.js
@@ -50,7 +50,7 @@ export function determineUserActionForGoogleAnalytics() {
   if (msgType === USER_MSG_TYPE_PAYMENT_ACCEPTED) {
     return {
       action: GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"],
-      order: userMsg.order
+      order:  userMsg.order
     }
   }
 }
diff --git a/frontend/public/src/util/gaUtils.js b/frontend/public/src/util/gaUtils.js
index 678aeef8b..75f3eeef3 100644
--- a/frontend/public/src/util/gaUtils.js
+++ b/frontend/public/src/util/gaUtils.js
@@ -1,7 +1,7 @@
 import ga4 from "react-ga4"
 
 export function sendGAEvent({ category, action, label, value }) {
-  let event = {
+  const event = {
     category: category,
     action:   action,
     label:    label,

From ac3e83b43c7158931808aa7ba57ffa287c2805c8 Mon Sep 17 00:00:00 2001
From: jenniw <jenniw@mit.edu>
Date: Mon, 12 Aug 2024 15:04:44 -0400
Subject: [PATCH 8/8] fmt

---
 frontend/public/src/components/TopBar.js    |  5 ++++-
 frontend/public/src/constants.js            |  2 +-
 frontend/public/src/containers/App.js       | 19 +++++++++++++------
 frontend/public/src/lib/notificationsApi.js |  2 +-
 frontend/public/src/util/gaUtils.js         |  2 +-
 frontend/public/src/util/withTracker.js     |  4 ++--
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js
index 14fbdd0b9..656650b7c 100644
--- a/frontend/public/src/components/TopBar.js
+++ b/frontend/public/src/components/TopBar.js
@@ -31,7 +31,10 @@ const TopBar = ({ currentUser }: Props) => {
   return (
     <header className="site-header new-design d-flex d-flex flex-column">
       {showComponent ? (
-        <NotificationContainer id="notifications-container" currentUser={currentUser} />
+        <NotificationContainer
+          id="notifications-container"
+          currentUser={currentUser}
+        />
       ) : null}
       <nav
         className={`order-1 sub-nav navbar navbar-expand-md top-navbar ${
diff --git a/frontend/public/src/constants.js b/frontend/public/src/constants.js
index 899f1182d..a084f1ed2 100644
--- a/frontend/public/src/constants.js
+++ b/frontend/public/src/constants.js
@@ -175,5 +175,5 @@ export const NODEOPER_ALL = "all_of"
 export const NODEOPER_MIN = "min_number_of"
 
 export const GOOGLE_ANALYTICS_EVENT_TYPE = {
-  GA_PURCHASE: "purchase",
+  GA_PURCHASE: "purchase"
 }
diff --git a/frontend/public/src/containers/App.js b/frontend/public/src/containers/App.js
index 91654c09d..6af9442a8 100644
--- a/frontend/public/src/containers/App.js
+++ b/frontend/public/src/containers/App.js
@@ -33,9 +33,9 @@ import CatalogPage from "./pages/CatalogPage"
 
 import type { Match, Location } from "react-router"
 import type { CurrentUser } from "../flow/authTypes"
-import {checkFeatureFlag} from "../lib/util"
-import {GOOGLE_ANALYTICS_EVENT_TYPE} from "../constants"
-import {sendGAEcommerceEvent} from "../util/gaUtils"
+import { checkFeatureFlag } from "../lib/util"
+import { GOOGLE_ANALYTICS_EVENT_TYPE } from "../constants"
+import { sendGAEcommerceEvent } from "../util/gaUtils"
 
 type Props = {
   match: Match,
@@ -49,10 +49,17 @@ export class App extends React.Component<Props, void> {
     const { addUserNotification } = this.props
     const { currentUser } = this.props
 
-    const gaFeatureFlag = checkFeatureFlag("mitxonline-4099-dedp-google-analytics", currentUser)
+    const gaFeatureFlag = checkFeatureFlag(
+      "mitxonline-4099-dedp-google-analytics",
+      currentUser
+    )
     if (gaFeatureFlag) {
-      const gaEcommerceEventObject = determineUserActionForGoogleAnalytics(currentUser)
-      if (gaEcommerceEventObject.action === GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"]) {
+      const gaEcommerceEventObject =
+        determineUserActionForGoogleAnalytics(currentUser)
+      if (
+        gaEcommerceEventObject.action ===
+        GOOGLE_ANALYTICS_EVENT_TYPE["GA_PURCHASE"]
+      ) {
         const event = gaEcommerceEventObject.order
         sendGAEcommerceEvent(gaEcommerceEventObject.action, event)
       }
diff --git a/frontend/public/src/lib/notificationsApi.js b/frontend/public/src/lib/notificationsApi.js
index 2345daaa6..013a70f17 100644
--- a/frontend/public/src/lib/notificationsApi.js
+++ b/frontend/public/src/lib/notificationsApi.js
@@ -23,7 +23,7 @@ import {
 
 type UserMessage = {
   type: string,
-  text: string,
+  text: string
 }
 
 function ingestUserMessage(): userJson | null {
diff --git a/frontend/public/src/util/gaUtils.js b/frontend/public/src/util/gaUtils.js
index 75f3eeef3..3a42c608d 100644
--- a/frontend/public/src/util/gaUtils.js
+++ b/frontend/public/src/util/gaUtils.js
@@ -4,7 +4,7 @@ export function sendGAEvent({ category, action, label, value }) {
   const event = {
     category: category,
     action:   action,
-    label:    label,
+    label:    label
   }
   if (value !== undefined) {
     event.value = value
diff --git a/frontend/public/src/util/withTracker.js b/frontend/public/src/util/withTracker.js
index 1d943217b..ba97dfab3 100644
--- a/frontend/public/src/util/withTracker.js
+++ b/frontend/public/src/util/withTracker.js
@@ -9,14 +9,14 @@ const withTracker = (WrappedComponent: Class<React.Component<*, *>>) => {
   const debug = SETTINGS.reactGaDebug === "true"
 
   if (SETTINGS.gaTrackingID) {
-    ga4.initialize(SETTINGS.gaTrackingID, {debug: debug})
+    ga4.initialize(SETTINGS.gaTrackingID, { debug: debug })
   }
 
   const HOC = (props: Object) => {
     const page = props.location.pathname
     const title = props.location.title
     if (SETTINGS.gaTrackingID) {
-      ga4.send({hitType: "pageview", page: page, title: title})
+      ga4.send({ hitType: "pageview", page: page, title: title })
     }
     return <WrappedComponent {...props} />
   }