From 6c9ece3352ed4625e520265a8e416817e6b824bc Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 10:31:15 -0700
Subject: [PATCH 1/7] Add gtagEvent helper function

---
 packages/client/src/helpers/gtag.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/helpers/gtag.js b/packages/client/src/helpers/gtag.js
index 0225ba6eb..418d3c5a3 100644
--- a/packages/client/src/helpers/gtag.js
+++ b/packages/client/src/helpers/gtag.js
@@ -2,6 +2,12 @@
 // Note that the 'set' command does not appear to do anything (despite Google documentation to the contrary) so all
 // runtime reconfiguration is being performed via 'config'.
 
+function gtag(...args) {
+  if (typeof window.gtag === 'function' && window.APP_CONFIG?.GOOGLE_TAG_ID) {
+    window.gtag(...args);
+  }
+}
+
 /**
  * If Google Analytics are enabled, calls the config command on the appropriate Google tag.
  * If called repeatedly, appears to update the config by performing a deep merge of the existing config with the new.
@@ -13,12 +19,10 @@
  */
 export function gtagConfig(config) {
   // See index.html for the definition of the gtag function.
-  if (typeof window.gtag === 'function' && window.APP_CONFIG?.GOOGLE_TAG_ID) {
-    window.gtag('config', window.APP_CONFIG.GOOGLE_TAG_ID, {
-      ...(window.APP_CONFIG?.GOOGLE_ANALYTICS_DEBUG ? { debug_mode: true } : {}),
-      ...config,
-    });
-  }
+  gtag('config', window.APP_CONFIG.GOOGLE_TAG_ID, {
+    ...(window.APP_CONFIG?.GOOGLE_ANALYTICS_DEBUG ? { debug_mode: true } : {}),
+    ...config,
+  });
 }
 
 export function setUserForGoogleAnalytics(user) {
@@ -30,3 +34,13 @@ export function setUserForGoogleAnalytics(user) {
     },
   });
 }
+
+/**
+ * Emits a Google Analytics GA4 custom event.
+ *
+ * @param {string} eventName Canonical name of the event to emit
+ * @param {object} eventParams Metadata to associate with this event
+ */
+export function gtagEvent(eventName, eventParams) {
+  gtag('event', eventName, eventParams);
+}

From 1a82690ec2ba453389089bb6aa2d787c313b65b0 Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 10:44:48 -0700
Subject: [PATCH 2/7] Add logging when gtag commands are emitted

---
 packages/client/src/helpers/gtag.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/client/src/helpers/gtag.js b/packages/client/src/helpers/gtag.js
index 418d3c5a3..7542d453e 100644
--- a/packages/client/src/helpers/gtag.js
+++ b/packages/client/src/helpers/gtag.js
@@ -5,6 +5,11 @@
 function gtag(...args) {
   if (typeof window.gtag === 'function' && window.APP_CONFIG?.GOOGLE_TAG_ID) {
     window.gtag(...args);
+    if (window.APP_CONFIG?.GOOGLE_ANALYTICS_DEBUG) {
+      console.log(`[Google Analytics] Emitted ${args[0]} with:`, ...args.slice(1));
+    }
+  } else if (window.APP_CONFIG?.GOOGLE_ANALYTICS_DEBUG) {
+    console.log(`[Google Analytics][DISABLED] Would have emitted ${args[0]} with:`, ...args.slice(1));
   }
 }
 

From 737879444323041527d7d2e3c21e0ad2ef923ae3 Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 10:57:19 -0700
Subject: [PATCH 3/7] Instrument three grants.gov, copy, and print buttons

---
 packages/client/src/helpers/gtag.js        | 3 ++-
 packages/client/src/views/GrantDetails.vue | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/helpers/gtag.js b/packages/client/src/helpers/gtag.js
index 7542d453e..08e22d15e 100644
--- a/packages/client/src/helpers/gtag.js
+++ b/packages/client/src/helpers/gtag.js
@@ -41,7 +41,8 @@ export function setUserForGoogleAnalytics(user) {
 }
 
 /**
- * Emits a Google Analytics GA4 custom event.
+ * Emits a Google Analytics GA4 custom event. Google also defines some reserved param names to be aware of,
+ * such as `event_callback` to execute code once the event has been logged: https://developers.google.com/tag-platform/gtagjs/reference/parameters
  *
  * @param {string} eventName Canonical name of the event to emit
  * @param {object} eventParams Metadata to associate with this event
diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
index a44ee4d09..300d8c3e8 100644
--- a/packages/client/src/views/GrantDetails.vue
+++ b/packages/client/src/views/GrantDetails.vue
@@ -49,6 +49,7 @@
             target="_blank"
             rel="noopener noreferrer"
             data-dd-action-name="view on grants.gov"
+            @click="onOpenGrantsGov"
           >
             <b-icon icon="box-arrow-up-right" aria-hidden="true" class="mr-2" />
             Apply on Grants.gov
@@ -164,6 +165,7 @@ import { debounce } from 'lodash';
 import { newTerminologyEnabled } from '@/helpers/featureFlags';
 import { formatCurrency } from '@/helpers/currency';
 import { titleize } from '@/helpers/form-helpers';
+import { gtagEvent } from '@/helpers/gtag';
 import { DateTime } from 'luxon';
 import UserAvatar from '@/components/UserAvatar.vue';
 
@@ -424,6 +426,7 @@ export default {
       });
     },
     copyUrl() {
+      gtagEvent('copy btn clicked');
       navigator.clipboard.writeText(window.location.href);
 
       // Show the success indicator
@@ -435,8 +438,14 @@ export default {
       );
     },
     printPage() {
+      gtagEvent('print btn clicked');
       window.print();
     },
+    onOpenGrantsGov() {
+      // Note that we can execute this as a side effect of clicking on the outbound link only because it's set to
+      // load in a new tab. If it opened in the same tab, it would open the new URL before the event is logged.
+      gtagEvent('grants.gov btn clicked');
+    },
     formatDate(dateString) {
       return DateTime.fromISO(dateString).toLocaleString(DateTime.DATE_MED);
     },

From 255ee091007fb2e937b322728eaa60d4a1e390bc Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 11:17:37 -0700
Subject: [PATCH 4/7] Instrument gtag events for assign/unassign and
 interested/uninterested

---
 packages/client/src/views/GrantDetails.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
index 300d8c3e8..e5aa8920f 100644
--- a/packages/client/src/views/GrantDetails.vue
+++ b/packages/client/src/views/GrantDetails.vue
@@ -382,7 +382,10 @@ export default {
           agencyId: this.selectedAgencyId,
           interestedCode: this.selectedInterestedCode,
         });
-        datadogRum.addAction('submit team status for grant', { team: { id: this.selectedAgencyId }, status: this.selectedInterestedCode, grant: { id: this.selectedGrant.grant_id } });
+        const eventName = 'submit team status for grant';
+        const statusName = this.interestedOptions.find((option) => option.id === this.selectedInterestedCode)?.name;
+        gtagEvent(eventName, { status_name: statusName });
+        datadogRum.addAction(eventName, { team: { id: this.selectedAgencyId }, status: this.selectedInterestedCode, grant: { id: this.selectedGrant.grant_id } });
         this.selectedInterestedCode = null;
       }
     },
@@ -393,14 +396,19 @@ export default {
         interestedCode: agency.interested_code_id,
       });
       this.selectedGrant.interested_agencies = await this.getInterestedAgencies({ grantId: this.selectedGrant.grant_id });
-      datadogRum.addAction('remove team status for grant', { team: { id: agency.agency_id }, status: agency.interested_code_id, grant: { id: this.selectedGrant.grant_id } });
+      const eventName = 'remove team status for grant';
+      gtagEvent(eventName);
+      datadogRum.addAction(eventName, { team: { id: agency.agency_id }, status: agency.interested_code_id, grant: { id: this.selectedGrant.grant_id } });
     },
     async assignAgenciesToGrant() {
       await this.assignAgenciesToGrantAction({
         grantId: this.selectedGrant.grant_id,
         agencyIds: this.assignedAgencies.map((agency) => agency.id).concat(this.selectedAgencyToAssign.id),
       });
-      datadogRum.addAction('assign team to grant', { team: { id: this.selectedAgencyToAssign.id }, grant: { id: this.selectedGrant.grant_id } });
+      const eventName = 'assign team to grant';
+      const eventParams = { team: { id: this.selectedAgencyToAssign.id }, grant: { id: this.selectedGrant.grant_id } };
+      gtagEvent(eventName, eventParams);
+      datadogRum.addAction(eventName, eventParams);
       this.selectedAgencyToAssign = null;
       this.assignedAgencies = await this.getGrantAssignedAgencies({ grantId: this.selectedGrant.grant_id });
     },
@@ -410,7 +418,10 @@ export default {
         agencyIds: [agency.id],
       });
       this.assignedAgencies = await this.getGrantAssignedAgencies({ grantId: this.selectedGrant.grant_id });
-      datadogRum.addAction('remove team assignment from grant', { team: { id: this.selectedAgencyId }, grant: { id: this.selectedGrant.grant_id } });
+      const eventName = 'remove team assignment from grant';
+      const eventParams = { team: { id: this.selectedAgencyId }, grant: { id: this.selectedGrant.grant_id } };
+      gtagEvent(eventName, eventParams);
+      datadogRum.addAction(eventName, eventParams);
     },
     isAbleToUnmark(agencyId) {
       return this.agencies.some((agency) => agency.id === agencyId);

From 7f5f9f798aab2c156dbfae17811aad5b62af7184 Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 11:19:11 -0700
Subject: [PATCH 5/7] Bugfix for unassign agency team id

---
 packages/client/src/views/GrantDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
index e5aa8920f..b65b7e34c 100644
--- a/packages/client/src/views/GrantDetails.vue
+++ b/packages/client/src/views/GrantDetails.vue
@@ -419,7 +419,7 @@ export default {
       });
       this.assignedAgencies = await this.getGrantAssignedAgencies({ grantId: this.selectedGrant.grant_id });
       const eventName = 'remove team assignment from grant';
-      const eventParams = { team: { id: this.selectedAgencyId }, grant: { id: this.selectedGrant.grant_id } };
+      const eventParams = { team: { id: agency.id }, grant: { id: this.selectedGrant.grant_id } };
       gtagEvent(eventName, eventParams);
       datadogRum.addAction(eventName, eventParams);
     },

From 5f12e7a4c5ff30457bcb6ad861204eed54045e63 Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 14:20:20 -0700
Subject: [PATCH 6/7] Update and unify params sent to DD vs GA

---
 packages/client/src/views/GrantDetails.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
index b65b7e34c..c0644082c 100644
--- a/packages/client/src/views/GrantDetails.vue
+++ b/packages/client/src/views/GrantDetails.vue
@@ -383,9 +383,11 @@ export default {
           interestedCode: this.selectedInterestedCode,
         });
         const eventName = 'submit team status for grant';
-        const statusName = this.interestedOptions.find((option) => option.id === this.selectedInterestedCode)?.name;
-        gtagEvent(eventName, { status_name: statusName });
-        datadogRum.addAction(eventName, { team: { id: this.selectedAgencyId }, status: this.selectedInterestedCode, grant: { id: this.selectedGrant.grant_id } });
+        const eventParams = {
+          status_name: this.interestedOptions.find((option) => option.id === this.selectedInterestedCode)?.name,
+        };
+        gtagEvent(eventName, eventParams);
+        datadogRum.addAction(eventName, eventParams);
         this.selectedInterestedCode = null;
       }
     },
@@ -398,7 +400,7 @@ export default {
       this.selectedGrant.interested_agencies = await this.getInterestedAgencies({ grantId: this.selectedGrant.grant_id });
       const eventName = 'remove team status for grant';
       gtagEvent(eventName);
-      datadogRum.addAction(eventName, { team: { id: agency.agency_id }, status: agency.interested_code_id, grant: { id: this.selectedGrant.grant_id } });
+      datadogRum.addAction(eventName);
     },
     async assignAgenciesToGrant() {
       await this.assignAgenciesToGrantAction({
@@ -406,9 +408,8 @@ export default {
         agencyIds: this.assignedAgencies.map((agency) => agency.id).concat(this.selectedAgencyToAssign.id),
       });
       const eventName = 'assign team to grant';
-      const eventParams = { team: { id: this.selectedAgencyToAssign.id }, grant: { id: this.selectedGrant.grant_id } };
-      gtagEvent(eventName, eventParams);
-      datadogRum.addAction(eventName, eventParams);
+      gtagEvent(eventName);
+      datadogRum.addAction(eventName);
       this.selectedAgencyToAssign = null;
       this.assignedAgencies = await this.getGrantAssignedAgencies({ grantId: this.selectedGrant.grant_id });
     },
@@ -419,9 +420,8 @@ export default {
       });
       this.assignedAgencies = await this.getGrantAssignedAgencies({ grantId: this.selectedGrant.grant_id });
       const eventName = 'remove team assignment from grant';
-      const eventParams = { team: { id: agency.id }, grant: { id: this.selectedGrant.grant_id } };
-      gtagEvent(eventName, eventParams);
-      datadogRum.addAction(eventName, eventParams);
+      gtagEvent(eventName);
+      datadogRum.addAction(eventName);
     },
     isAbleToUnmark(agencyId) {
       return this.agencies.some((agency) => agency.id === agencyId);

From 786695f3a11f48c636ea8a4d6ace90ea379f5102 Mon Sep 17 00:00:00 2001
From: Jeff Mohan <jeffsmohan@gmail.com>
Date: Tue, 12 Mar 2024 14:22:39 -0700
Subject: [PATCH 7/7] Add DD data- attributes for tracking

---
 packages/client/src/views/GrantDetails.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
index c0644082c..74a94a0f1 100644
--- a/packages/client/src/views/GrantDetails.vue
+++ b/packages/client/src/views/GrantDetails.vue
@@ -58,6 +58,7 @@
             <b-button
               class="w-50 flex-shrink-1 mr-3"
               variant="outline-primary"
+              data-dd-action-name="print btn"
               @click="printPage"
             >
               <b-icon icon="printer-fill" aria-hidden="true" class="mr-2" />
@@ -66,6 +67,7 @@
             <b-button
               class="w-50 flex-shrink-1"
               :variant="copyUrlSuccessTimeout === null ? 'outline-primary' : 'outline-success'"
+              data-dd-action-name="copy btn"
               @click="copyUrl"
             >
               <b-icon :icon="copyUrlSuccessTimeout === null ? 'files' : 'check2'" aria-hidden="true" class="mr-2" />