diff --git a/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx b/support-frontend/assets/components/paymentMethodSelector/PaymentMethodSelectorContainer.tsx index 698b482a96..302ac253ed 100644 --- 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 = { @@ -64,7 +64,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 index 165491f8b1..f6969a191c 100644 --- 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 index 686406df88..f5f8a77548 100644 --- 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); }} /> diff --git a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx index 69a5db77f0..d400b58adb 100644 --- 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); }} />