Ensure ECE button load events are triggered for multiple buttons on t…

…he same page (#9845)
Automattic · Nov 29, 2024 · e0b69be · e0b69be
1 parent b0b67af
commit e0b69be
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 32 deletions.
diff --git a/changelog/fix-9795-debounce-of-ece-load-events b/changelog/fix-9795-debounce-of-ece-load-events
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ensure ECE button load events are triggered for multiple buttons on the same page.
diff --git a/client/express-checkout/tracking.js b/client/express-checkout/tracking.js
@@ -17,20 +17,29 @@ export const trackExpressCheckoutButtonClick = ( paymentMethod, source ) => {
 	recordUserEvent( event, { source } );
 };
 
+const debouncedTrackApplePayButtonLoad = debounce( ( { source } ) => {
+	recordUserEvent( 'applepay_button_load', { source } );
+}, 1000 );
+
+const debouncedTrackGooglePayButtonLoad = debounce( ( { source } ) => {
+	recordUserEvent( 'gpay_button_load', { source } );
+}, 1000 );
+
 // Track the button load event.
-export const trackExpressCheckoutButtonLoad = debounce(
-	( { paymentMethods, source } ) => {
-		const expressPaymentTypeEvents = {
-			googlePay: 'gpay_button_load',
-			applePay: 'applepay_button_load',
-		};
-
-		for ( const paymentMethod of paymentMethods ) {
-			const event = expressPaymentTypeEvents[ paymentMethod ];
-			if ( ! event ) continue;
-
-			recordUserEvent( event, { source } );
-		}
-	},
-	1000
-);
+export const trackExpressCheckoutButtonLoad = ( {
+	paymentMethods,
+	source,
+} ) => {
+	const expressPaymentTypeEvents = {
+		googlePay: debouncedTrackGooglePayButtonLoad,
+		applePay: debouncedTrackApplePayButtonLoad,
+	};
+
+	for ( const paymentMethod of paymentMethods ) {
+		const debouncedTrackFunction =
+			expressPaymentTypeEvents[ paymentMethod ];
+		if ( ! debouncedTrackFunction ) continue;
+
+		debouncedTrackFunction( { source } );
+	}
+};
diff --git a/client/tokenized-express-checkout/tracking.js b/client/tokenized-express-checkout/tracking.js
@@ -17,20 +17,29 @@ export const trackExpressCheckoutButtonClick = ( paymentMethod, source ) => {
 	recordUserEvent( event, { source } );
 };
 
+const debouncedTrackApplePayButtonLoad = debounce( ( { source } ) => {
+	recordUserEvent( 'applepay_button_load', { source } );
+}, 1000 );
+
+const debouncedTrackGooglePayButtonLoad = debounce( ( { source } ) => {
+	recordUserEvent( 'gpay_button_load', { source } );
+}, 1000 );
+
 // Track the button load event.
-export const trackExpressCheckoutButtonLoad = debounce(
-	( { paymentMethods, source } ) => {
-		const expressPaymentTypeEvents = {
-			googlePay: 'gpay_button_load',
-			applePay: 'applepay_button_load',
-		};
-
-		for ( const paymentMethod of paymentMethods ) {
-			const event = expressPaymentTypeEvents[ paymentMethod ];
-			if ( ! event ) continue;
-
-			recordUserEvent( event, { source } );
-		}
-	},
-	1000
-);
+export const trackExpressCheckoutButtonLoad = ( {
+	paymentMethods,
+	source,
+} ) => {
+	const expressPaymentTypeEvents = {
+		googlePay: debouncedTrackGooglePayButtonLoad,
+		applePay: debouncedTrackApplePayButtonLoad,
+	};
+
+	for ( const paymentMethod of paymentMethods ) {
+		const debouncedTrackFunction =
+			expressPaymentTypeEvents[ paymentMethod ];
+		if ( ! debouncedTrackFunction ) continue;
+
+		debouncedTrackFunction( { source } );
+	}
+};