From 858ad7eaaeb57ff5da45e4a23d3833379e3c5584 Mon Sep 17 00:00:00 2001 From: Rafael Zaleski <rafaelzaleski@users.noreply.github.com> Date: Thu, 27 Jun 2024 17:57:44 -0300 Subject: [PATCH] Add Telemetry Events to ECE (#8993) --- changelog/add-8948-ece-telemetry-events | 4 +++ .../components/express-checkout-component.js | 2 ++ .../blocks/hooks/use-express-checkout.js | 23 +++++++++--- client/express-checkout/event-handlers.js | 29 ++++++++++++++- client/express-checkout/index.js | 5 +++ client/express-checkout/tracking.js | 36 +++++++++++++++++++ 6 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 changelog/add-8948-ece-telemetry-events create mode 100644 client/express-checkout/tracking.js diff --git a/changelog/add-8948-ece-telemetry-events b/changelog/add-8948-ece-telemetry-events new file mode 100644 index 00000000000..51a4cc03c24 --- /dev/null +++ b/changelog/add-8948-ece-telemetry-events @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add telemetry events from PRBs into ECE. diff --git a/client/express-checkout/blocks/components/express-checkout-component.js b/client/express-checkout/blocks/components/express-checkout-component.js index 3c53945c2a0..58ea5d96dfc 100644 --- a/client/express-checkout/blocks/components/express-checkout-component.js +++ b/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 } diff --git a/client/express-checkout/blocks/hooks/use-express-checkout.js b/client/express-checkout/blocks/hooks/use-express-checkout.js index ee5f7be6ed4..a587fd7a9e9 100644 --- a/client/express-checkout/blocks/hooks/use-express-checkout.js +++ b/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, }; diff --git a/client/express-checkout/event-handlers.js b/client/express-checkout/event-handlers.js index cd45606992b..ad8b23f52e4 100644 --- a/client/express-checkout/event-handlers.js +++ b/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' ) + ); +}; diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js index 45fea02f042..e994a81bd8e 100644 --- a/client/express-checkout/index.js +++ b/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: () => { diff --git a/client/express-checkout/tracking.js b/client/express-checkout/tracking.js new file mode 100644 index 00000000000..862f6fc587e --- /dev/null +++ b/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 +);