Add to notification and send object back for putting in the gtag

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>

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) => {

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 ${

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 {