Add Telemetry Events to ECE (#8993)

changelog/add-8948-ece-telemetry-events

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add telemetry events from PRBs into ECE.

client/express-checkout/blocks/components/express-checkout-component.js

@@ -27,6 +27,7 @@ const ExpressCheckoutComponent = ( {
 		buttonOptions,
 		onButtonClick,
 		onConfirm,
+		onReady,
 		onCancel,
 		elements,
 	} = useExpressCheckout( {
@@ -49,6 +50,7 @@ const ExpressCheckoutComponent = ( {
 			options={ buttonOptions }
 			onClick={ onButtonClick }
 			onConfirm={ onConfirm }
+			onReady={ onReady }
 			onCancel={ onCancel }
 			onShippingAddressChange={ onShippingAddressChange }
 			onShippingRateChange={ onShippingRateChange }

client/express-checkout/blocks/hooks/use-express-checkout.js

@@ -1,15 +1,21 @@
-/* global wcpayExpressCheckoutParams */
-
 /**
  * External dependencies
  */
 import { useCallback } from '@wordpress/element';
 import { useStripe, useElements } from '@stripe/react-stripe-js';
+/**
+ * Internal dependencies
+ */
 import {
 	getExpressCheckoutButtonStyleSettings,
+	getExpressCheckoutData,
 	normalizeLineItems,
 } from 'wcpay/express-checkout/utils';
-import { onConfirmHandler } from 'wcpay/express-checkout/event-handlers';
+import {
+	onClickHandler,
+	onConfirmHandler,
+	onReadyHandler,
+} from 'wcpay/express-checkout/event-handlers';
 
 export const useExpressCheckout = ( {
 	api,
@@ -44,7 +50,8 @@ export const useExpressCheckout = ( {
 				emailRequired: true,
 				shippingAddressRequired: shippingData?.needsShipping,
 				phoneNumberRequired:
-					wcpayExpressCheckoutParams?.checkout?.needs_payer_phone,
+					getExpressCheckoutData( 'checkout' )?.needs_payer_phone ??
+					false,
 				shippingRates: shippingData?.shippingRates[ 0 ]?.shipping_rates?.map(
 					( r ) => {
 						return {
@@ -55,8 +62,13 @@ export const useExpressCheckout = ( {
 					}
 				),
 			};
-			event.resolve( options );
+
+			// Click event from WC Blocks.
 			onClick();
+			// Global click event handler from WooPayments to ECE.
+			onClickHandler( event );
+
+			event.resolve( options );
 		},
 		[
 			onClick,
@@ -81,6 +93,7 @@ export const useExpressCheckout = ( {
 		buttonOptions,
 		onButtonClick,
 		onConfirm,
+		onReady: onReadyHandler,
 		onCancel,
 		elements,
 	};

client/express-checkout/event-handlers.js

@@ -2,11 +2,16 @@
  * Internal dependencies
  */
 import {
+	getErrorMessageFromNotice,
 	normalizeOrderData,
 	normalizeShippingAddress,
 	normalizeLineItems,
+	getExpressCheckoutData,
 } from './utils';
-import { getErrorMessageFromNotice } from './utils/index';
+import {
+	trackExpressCheckoutButtonClick,
+	trackExpressCheckoutButtonLoad,
+} from './tracking';
 
 export const shippingAddressChangeHandler = async ( api, event, elements ) => {
 	try {
@@ -99,3 +104,25 @@ export const onConfirmHandler = async (
 		return abortPayment( event, e.message );
 	}
 };
+
+export const onReadyHandler = async function ( { availablePaymentMethods } ) {
+	if ( availablePaymentMethods ) {
+		const enabledMethods = Object.entries( availablePaymentMethods )
+			// eslint-disable-next-line no-unused-vars
+			.filter( ( [ _, isEnabled ] ) => isEnabled )
+			// eslint-disable-next-line no-unused-vars
+			.map( ( [ methodName, _ ] ) => methodName );
+
+		trackExpressCheckoutButtonLoad( {
+			paymentMethods: enabledMethods,
+			source: getExpressCheckoutData( 'button_context' ),
+		} );
+	}
+};
+
+export const onClickHandler = async function ( { expressPaymentType } ) {
+	trackExpressCheckoutButtonClick(
+		expressPaymentType,
+		getExpressCheckoutData( 'button_context' )
+	);
+};

client/express-checkout/index.js

@@ -13,7 +13,9 @@ import {
 	normalizeLineItems,
 } from './utils/index';
 import {
+	onClickHandler,
 	onConfirmHandler,
+	onReadyHandler,
 	shippingAddressChangeHandler,
 	shippingRateChangeHandler,
 } from './event-handlers';
@@ -262,6 +264,7 @@ jQuery( ( $ ) => {
 					shippingRates,
 				};
 				wcpayECE.block();
+				onClickHandler( event );
 				event.resolve( clickOptions );
 			} );
 
@@ -287,6 +290,8 @@ jQuery( ( $ ) => {
 			eceButton.on( 'cancel', async () => {
 				wcpayECE.unblock();
 			} );
+
+			eceButton.on( 'ready', onReadyHandler );
 		},
 
 		getSelectedProductData: () => {

client/express-checkout/tracking.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+import { recordUserEvent } from 'tracks';
+
+// Track the button click event.
+export const trackExpressCheckoutButtonClick = ( paymentMethod, source ) => {
+	const expressPaymentTypeEvents = {
+		google_pay: 'gpay_button_click',
+		apple_pay: 'applepay_button_click',
+	};
+
+	const event = expressPaymentTypeEvents[ paymentMethod ];
+	if ( ! event ) return;
+
+	recordUserEvent( event, { source } );
+};
+
+// 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
+);