QM Generic Checkout Updates : Payment Method Selected (#6406)

* rename sendEventContributionPaymentMethod to sendEventPaymentMethodSelected * call sendEventPaymentMethodSelected * call sendEventPaymentMethodSelected on Stripe Express Checkout Element click * remove logging
guardian · Oct 14, 2024 · 6fb67be · 6fb67be
1 parent 8d9681b
commit 6fb67be
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx b/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx
@@ -12,7 +12,7 @@ import {
 	trackComponentClick,
 	trackComponentInsert,
 } from 'helpers/tracking/behaviour';
-import { sendEventContributionPaymentMethod } from 'helpers/tracking/quantumMetric';
+import { sendEventPaymentMethodSelected } from 'helpers/tracking/quantumMetric';
 import type { PaymentMethodSelectorProps } from './paymentMethodSelector';
 
 type PaymentMethodSelectorContainerProps = {
@@ -52,7 +52,7 @@ function PaymentMethodSelectorContainer({
 
 		if (event === 'select') {
 			trackComponentClick(trackingId);
-			sendEventContributionPaymentMethod(paymentMethod);
+			sendEventPaymentMethodSelected(paymentMethod);
 			dispatch(setPaymentMethod({ paymentMethod }));
 		} else {
 			trackComponentInsert(trackingId);

diff --git a/support-frontend/assets/helpers/tracking/quantumMetric.ts b/support-frontend/assets/helpers/tracking/quantumMetric.ts
@@ -334,8 +334,8 @@ function sendEventContributionCartValue(
 	});
 }
 
-function sendEventContributionPaymentMethod(
-	paymentMethod: PaymentMethod | null,
+function sendEventPaymentMethodSelected(
+	paymentMethod: PaymentMethod | 'StripeExpressCheckoutElement' | null,
 ): void {
 	if (paymentMethod) {
 		void ifQmPermitted(() => {
@@ -446,7 +446,7 @@ export {
 	sendEventSubscriptionCheckoutConversion,
 	sendEventContributionCheckoutConversion,
 	sendEventContributionCartValue,
-	sendEventContributionPaymentMethod,
+	sendEventPaymentMethodSelected,
 	sendEventConversionPaymentMethod,
 	sendEventAcquisitionDataFromQueryParamEvent,
 };
diff --git a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx
@@ -96,6 +96,7 @@ import {
 	getSupportAbTests,
 } from 'helpers/tracking/acquisitions';
 import { trackComponentClick } from 'helpers/tracking/behaviour';
+import { sendEventPaymentMethodSelected } from 'helpers/tracking/quantumMetric';
 import { isProd } from 'helpers/urls/url';
 import { logException } from 'helpers/utilities/logger';
 import type { GeoId } from 'pages/geoIdConfig';
@@ -1119,6 +1120,12 @@ function CheckoutComponent({
 										const options = {
 											emailRequired: true,
 										};
+
+										// Track payment method selection with QM
+										sendEventPaymentMethodSelected(
+											'StripeExpressCheckoutElement',
+										);
+
 										resolve(options);
 									}}
 									onConfirm={async (event) => {
@@ -1576,6 +1583,9 @@ function CheckoutComponent({
 													}
 													onChange={() => {
 														setPaymentMethod(validPaymentMethod);
+
+														// Track payment method selection with QM
+														sendEventPaymentMethodSelected(validPaymentMethod);
 													}}
 												/>
 											</PaymentMethodRadio>

diff --git a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx
@@ -71,6 +71,7 @@ import {
 	getReferrerAcquisitionData,
 } from 'helpers/tracking/acquisitions';
 import { trackComponentLoad } from 'helpers/tracking/behaviour';
+import { sendEventPaymentMethodSelected } from 'helpers/tracking/quantumMetric';
 import { payPalCancelUrl, payPalReturnUrl } from 'helpers/urls/routes';
 import { logException } from 'helpers/utilities/logger';
 import { type GeoId, getGeoIdConfig } from 'pages/geoIdConfig';
@@ -582,6 +583,12 @@ function OneTimeCheckoutComponent({
 										const options = {
 											emailRequired: true,
 										};
+
+										// Track payment method selection with QM
+										sendEventPaymentMethodSelected(
+											'StripeExpressCheckoutElement',
+										);
+
 										resolve(options);
 									}
 								}}
@@ -740,6 +747,9 @@ function OneTimeCheckoutComponent({
 													}
 													onChange={() => {
 														setPaymentMethod(validPaymentMethod);
+
+														// Track payment method selection with QM
+														sendEventPaymentMethodSelected(validPaymentMethod);
 													}}
 												/>
 											</PaymentMethodRadio>