Track payment request button load events

changelog/add-prb-load-tracks

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Track payment-request-button loads

client/payment-request/blocks/payment-request-express.js

@@ -1,3 +1,5 @@
+/* global wcpayPaymentRequestParams */
+
 /**
  * External dependencies
  */
@@ -9,6 +11,7 @@ import { Elements, PaymentRequestButtonElement } from '@stripe/react-stripe-js';
 import { useInitialization } from './use-initialization';
 import { getPaymentRequestData } from '../utils';
 import wcpayTracks from 'tracks';
+import { useEffect, useState } from 'react';
 
 /**
  * PaymentRequestExpressComponent
@@ -24,6 +27,7 @@ const PaymentRequestExpressComponent = ( {
 	setExpressPaymentError,
 	onClick,
 	onClose,
+	onPaymentRequestAvailable,
 } ) => {
 	// TODO: Don't display custom button when result.requestType
 	// is `apple_pay` or `google_pay`.
@@ -68,6 +72,7 @@ const PaymentRequestExpressComponent = ( {
 		} else if ( result.googlePay ) {
 			paymentRequestType = 'google_pay';
 		}
+		onPaymentRequestAvailable( paymentRequestType );
 	} );
 
 	const onPaymentRequestButtonClick = () => {
@@ -80,7 +85,9 @@ const PaymentRequestExpressComponent = ( {
 
 		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
 			const event = paymentRequestTypeEvents[ paymentRequestType ];
-			wcpayTracks.recordUserEvent( event, { source: 'checkout' } );
+			wcpayTracks.recordUserEvent( event, {
+				source: wcpayPaymentRequestParams?.button_context,
+			} );
 		}
 	};
 
@@ -104,9 +111,36 @@ const PaymentRequestExpressComponent = ( {
  */
 export const PaymentRequestExpress = ( props ) => {
 	const { stripe } = props;
+	const [ paymentRequestType, setPaymentRequestType ] = useState( false );
+
+	const handlePaymentRequestAvailability = ( paymentType ) => {
+		setPaymentRequestType( paymentType );
+	};
+
+	useEffect( () => {
+		if ( paymentRequestType ) {
+			const paymentRequestTypeEvents = {
+				google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_LOAD,
+				apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_LOAD,
+			};
+
+			if (
+				paymentRequestTypeEvents.hasOwnProperty( paymentRequestType )
+			) {
+				const event = paymentRequestTypeEvents[ paymentRequestType ];
+				wcpayTracks.recordUserEvent( event, {
+					source: wcpayPaymentRequestParams?.button_context,
+				} );
+			}
+		}
+	}, [ paymentRequestType ] );
+
 	return (
 		<Elements stripe={ stripe }>
-			<PaymentRequestExpressComponent { ...props } />
+			<PaymentRequestExpressComponent
+				{ ...props }
+				onPaymentRequestAvailable={ handlePaymentRequestAvailability }
+			/>
 		</Elements>
 	);
 };

client/payment-request/index.js

@@ -4,6 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { doAction } from '@wordpress/hooks';
+import { debounce } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -65,6 +66,19 @@ jQuery( ( $ ) => {
 		}
 	};
 
+	// Track the payment request button load event.
+	const trackPaymentRequestButtonLoad = debounce( ( source ) => {
+		const paymentRequestTypeEvents = {
+			google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_LOAD,
+			apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_LOAD,
+		};
+
+		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
+			const event = paymentRequestTypeEvents[ paymentRequestType ];
+			wcpayTracks.recordUserEvent( event, { source } );
+		}
+	}, 1000 );
+
 	/**
 	 * Object to handle Stripe payment forms.
 	 */
@@ -236,6 +250,10 @@ jQuery( ( $ ) => {
 					paymentRequestType: paymentRequestType,
 				} );
 
+				trackPaymentRequestButtonLoad(
+					wcpayPaymentRequestParams.button_context
+				);
+
 				wcpayPaymentRequest.attachPaymentRequestButtonEventListeners(
 					prButton,
 					paymentRequest

client/tracks/index.js

@@ -61,6 +61,7 @@ function recordUserEvent( eventName, eventProperties, isLegacy = false ) {
 
 const events = {
 	APPLEPAY_BUTTON_CLICK: 'applepay_button_click',
+	APPLEPAY_BUTTON_LOAD: 'applepay_button_load',
 	CONNECT_ACCOUNT_CLICKED: 'wcpay_connect_account_clicked',
 	CONNECT_ACCOUNT_VIEW: 'page_view',
 	CONNECT_ACCOUNT_LEARN_MORE: 'wcpay_welcome_learn_more',
@@ -76,6 +77,7 @@ const events = {
 	DISPUTE_INQUIRY_REFUND_MODAL_VIEW:
 		'wcpay_dispute_inquiry_refund_modal_view',
 	GOOGLEPAY_BUTTON_CLICK: 'gpay_button_click',
+	GOOGLEPAY_BUTTON_LOAD: 'gpay_button_load',
 	OVERVIEW_BALANCES_CURRENCY_CLICK:
 		'wcpay_overview_balances_currency_tab_click',
 	OVERVIEW_DEPOSITS_VIEW_HISTORY_CLICK: