From 4a72b4f834d10ef268acb8b4d123521edca2150b Mon Sep 17 00:00:00 2001 From: GHaberis Date: Mon, 14 Oct 2024 12:49:39 +0100 Subject: [PATCH 1/4] rename sendEventContributionPaymentMethod to sendEventPaymentMethodSelected --- .../paymentMethodSelector/PaymentMethodSelectorContainer.tsx | 4 ++-- support-frontend/assets/helpers/tracking/quantumMetric.ts | 5 +++-- support-frontend/assets/pages/[countryGroupId]/checkout.tsx | 2 ++ 3 files changed, 7 insertions(+), 4 deletions(-) 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..381ad4253b 100644 --- a/support-frontend/assets/helpers/tracking/quantumMetric.ts +++ b/support-frontend/assets/helpers/tracking/quantumMetric.ts @@ -119,6 +119,7 @@ function sendEvent( ? 64 : 0; if (window.QuantumMetricAPI?.isOn()) { + console.log('sendEvent --->', id, qmCartValueEventId, value); window.QuantumMetricAPI.sendEvent(id, qmCartValueEventId, value); } } @@ -334,7 +335,7 @@ function sendEventContributionCartValue( }); } -function sendEventContributionPaymentMethod( +function sendEventPaymentMethodSelected( paymentMethod: PaymentMethod | null, ): void { if (paymentMethod) { @@ -446,7 +447,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..66a44d9c8b 100644 --- a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx @@ -1576,6 +1576,8 @@ function CheckoutComponent({ } onChange={() => { setPaymentMethod(validPaymentMethod); + + console.log('sendEvent?', validPaymentMethod); }} /> From 090aaad67edbd0dfaa88e4bf9fa03ee7c6c0e137 Mon Sep 17 00:00:00 2001 From: GHaberis Date: Mon, 14 Oct 2024 12:54:06 +0100 Subject: [PATCH 2/4] call sendEventPaymentMethodSelected --- support-frontend/assets/pages/[countryGroupId]/checkout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx index 66a44d9c8b..8b946a0586 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'; @@ -1577,7 +1578,8 @@ function CheckoutComponent({ onChange={() => { setPaymentMethod(validPaymentMethod); - console.log('sendEvent?', validPaymentMethod); + // Track payment method update with QM + sendEventPaymentMethodSelected(validPaymentMethod); }} /> From 16c5b4a631ace61a4e2de16dd93058ebbd670fb4 Mon Sep 17 00:00:00 2001 From: GHaberis Date: Mon, 14 Oct 2024 13:01:35 +0100 Subject: [PATCH 3/4] call sendEventPaymentMethodSelected on Stripe Express Checkout Element click --- support-frontend/assets/helpers/tracking/quantumMetric.ts | 2 +- .../assets/pages/[countryGroupId]/checkout.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/support-frontend/assets/helpers/tracking/quantumMetric.ts b/support-frontend/assets/helpers/tracking/quantumMetric.ts index 381ad4253b..3dbbe9364d 100644 --- a/support-frontend/assets/helpers/tracking/quantumMetric.ts +++ b/support-frontend/assets/helpers/tracking/quantumMetric.ts @@ -336,7 +336,7 @@ function sendEventContributionCartValue( } function sendEventPaymentMethodSelected( - paymentMethod: PaymentMethod | null, + paymentMethod: PaymentMethod | 'StripeExpressCheckoutElement' | null, ): void { if (paymentMethod) { void ifQmPermitted(() => { diff --git a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx index 8b946a0586..f5f8a77548 100644 --- a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx @@ -1120,6 +1120,12 @@ function CheckoutComponent({ const options = { emailRequired: true, }; + + // Track payment method selection with QM + sendEventPaymentMethodSelected( + 'StripeExpressCheckoutElement', + ); + resolve(options); }} onConfirm={async (event) => { @@ -1578,7 +1584,7 @@ function CheckoutComponent({ onChange={() => { setPaymentMethod(validPaymentMethod); - // Track payment method update with QM + // Track payment method selection with QM sendEventPaymentMethodSelected(validPaymentMethod); }} /> From 5d71d6648d04944c0fb483ed0b9b07f5a618d9fa Mon Sep 17 00:00:00 2001 From: GHaberis Date: Mon, 14 Oct 2024 14:11:44 +0100 Subject: [PATCH 4/4] remove logging --- .../assets/helpers/tracking/quantumMetric.ts | 1 - .../assets/pages/[countryGroupId]/oneTimeCheckout.tsx | 10 ++++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/support-frontend/assets/helpers/tracking/quantumMetric.ts b/support-frontend/assets/helpers/tracking/quantumMetric.ts index 3dbbe9364d..f6969a191c 100644 --- a/support-frontend/assets/helpers/tracking/quantumMetric.ts +++ b/support-frontend/assets/helpers/tracking/quantumMetric.ts @@ -119,7 +119,6 @@ function sendEvent( ? 64 : 0; if (window.QuantumMetricAPI?.isOn()) { - console.log('sendEvent --->', id, qmCartValueEventId, value); window.QuantumMetricAPI.sendEvent(id, qmCartValueEventId, value); } } 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); }} />