Add shopper Tracks events

changelog/add-shopper-tracks-events

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add Shopper Tracks events

client/checkout/woopay/email-input-iframe.js

@@ -340,6 +340,8 @@ export const handleWooPayEmailInput = async (
 			parentDiv.removeChild( errorMessage );
 		}
 
+		wcpayTracks.recordUserEvent( wcpayTracks.events.WOOPAY_EMAIL_CHECK );
+
 		request(
 			buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'get_woopay_signature' ),
 			{

client/components/woopay/save-user/agreement.js

@@ -4,6 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
+import wcpayTracks from 'tracks';
 
 const Agreement = () => {
 	return (
@@ -19,6 +20,12 @@ const Agreement = () => {
 							target="_blank"
 							href="https://wordpress.com/tos/"
 							rel="noopener noreferrer"
+							onClick={ () => {
+								wcpayTracks.recordUserEvent(
+									wcpayTracks.events
+										.WOOPAY_SAVE_MY_INFO_TOS_CLICK
+								);
+							} }
 						>
 							{ __( 'Terms of Service', 'woocommerce-payments' ) }
 						</a>
@@ -28,6 +35,12 @@ const Agreement = () => {
 							target="_blank"
 							href="https://automattic.com/privacy/"
 							rel="noopener noreferrer"
+							onClick={ () => {
+								wcpayTracks.recordUserEvent(
+									wcpayTracks.events
+										.WOOPAY_SAVE_MY_INFO_PRIVACY_CLICK
+								);
+							} }
 						>
 							{ __( 'Privacy Policy', 'woocommerce-payments' ) }
 						</a>

client/components/woopay/save-user/checkout-page-save-user.js

@@ -30,6 +30,8 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	const [ isPhoneValid, onPhoneValidationChange ] = useState( null );
 	const [ userDataSent, setUserDataSent ] = useState( false );
 	const [ isInfoFlyoutVisible, setIsInfoFlyoutVisible ] = useState( false );
+	const [ hasShownInfoFlyout, setHasShownInfoFlyout ] = useState( false );
+
 	const setInfoFlyoutVisible = useCallback(
 		() => setIsInfoFlyoutVisible( true ),
 		[]
@@ -114,6 +116,18 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		);
 	};
 
+	useEffect( () => {
+		// Record Tracks event when user hovers over the info icon for the first time.
+		if ( isInfoFlyoutVisible && ! hasShownInfoFlyout ) {
+			setHasShownInfoFlyout( true );
+			wcpayTracks.recordUserEvent(
+				wcpayTracks.events.WOOPAY_SAVE_MY_INFO_TOOLTIP_HOVER
+			);
+		} else if ( ! isInfoFlyoutVisible && ! hasShownInfoFlyout ) {
+			setHasShownInfoFlyout( false );
+		}
+	}, [ isInfoFlyoutVisible, hasShownInfoFlyout ] );
+
 	useEffect( () => {
 		const formSubmitButton = isBlocksCheckout
 			? document.querySelector(
@@ -261,6 +275,12 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 											target="_blank"
 											href="https://woocommerce.com/document/woopay-customer-documentation/"
 											rel="noopener noreferrer"
+											onClick={ () => {
+												wcpayTracks.recordUserEvent(
+													wcpayTracks.events
+														.WOOPAY_SAVE_MY_INFO_TOOLTIP_LEARN_MORE_CLICK
+												);
+											} }
 										>
 											{ __(
 												'Learn more',

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

@@ -8,6 +8,7 @@ import { Elements, PaymentRequestButtonElement } from '@stripe/react-stripe-js';
  */
 import { useInitialization } from './use-initialization';
 import { getPaymentRequestData } from '../utils';
+import wcpayTracks from 'tracks';
 
 /**
  * PaymentRequestExpressComponent
@@ -53,9 +54,39 @@ const PaymentRequestExpressComponent = ( {
 		return null;
 	}
 
+	let paymentRequestType = '';
+
+	// Check the availability of the Payment Request API first.
+	paymentRequest.canMakePayment().then( ( result ) => {
+		if ( ! result ) {
+			return;
+		}
+
+		// Set the payment request type.
+		if ( result.applePay ) {
+			paymentRequestType = 'apple_pay';
+		} else if ( result.googlePay ) {
+			paymentRequestType = 'google_pay';
+		}
+	} );
+
+	const onPaymentRequestButtonClick = () => {
+		onButtonClick();
+
+		const paymentRequestTypeEvents = {
+			google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_CLICK,
+			apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_CLICK,
+		};
+
+		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
+			const event = paymentRequestTypeEvents[ paymentRequestType ];
+			wcpayTracks.recordUserEvent( event, { source: 'checkout' } );
+		}
+	};
+
 	return (
 		<PaymentRequestButtonElement
-			onClick={ onButtonClick }
+			onClick={ onPaymentRequestButtonClick }
 			options={ {
 				style: paymentRequestButtonStyle,
 				paymentRequest,

client/payment-request/index.js

@@ -15,6 +15,7 @@ import {
 	payForOrderHandler,
 } from './event-handlers.js';
 import '../checkout/express-checkout-buttons.scss';
+import wcpayTracks from 'tracks';
 
 import { getPaymentRequest, displayLoginConfirmation } from './utils';
 
@@ -47,6 +48,19 @@ jQuery( ( $ ) => {
 
 	let paymentRequestType;
 
+	// Track the payment request button click event.
+	const trackPaymentRequestButtonClick = ( source ) => {
+		const paymentRequestTypeEvents = {
+			google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_CLICK,
+			apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_CLICK,
+		};
+
+		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
+			const event = paymentRequestTypeEvents[ paymentRequestType ];
+			wcpayTracks.recordUserEvent( event, { source } );
+		}
+	};
+
 	/**
 	 * Object to handle Stripe payment forms.
 	 */
@@ -341,6 +355,8 @@ jQuery( ( $ ) => {
 			const addToCartButton = $( '.single_add_to_cart_button' );
 
 			prButton.on( 'click', ( evt ) => {
+				trackPaymentRequestButtonClick( 'product' );
+
 				// If login is required for checkout, display redirect confirmation dialog.
 				if ( wcpayPaymentRequestParams.login_confirmation ) {
 					evt.preventDefault();
@@ -459,6 +475,9 @@ jQuery( ( $ ) => {
 					evt.preventDefault();
 					displayLoginConfirmation( paymentRequestType );
 				}
+				trackPaymentRequestButtonClick(
+					wcpayPaymentRequestParams.button_context
+				);
 			} );
 		},
 

client/tracks/index.js

@@ -60,6 +60,7 @@ function recordUserEvent( eventName, eventProperties, isLegacy = false ) {
 }
 
 const events = {
+	APPLEPAY_BUTTON_CLICK: 'applepay_button_click',
 	CONNECT_ACCOUNT_CLICKED: 'wcpay_connect_account_clicked',
 	CONNECT_ACCOUNT_VIEW: 'page_view',
 	CONNECT_ACCOUNT_LEARN_MORE: 'wcpay_welcome_learn_more',
@@ -74,6 +75,7 @@ const events = {
 	DISPUTE_INQUIRY_REFUND_CLICK: 'wcpay_dispute_inquiry_refund_click',
 	DISPUTE_INQUIRY_REFUND_MODAL_VIEW:
 		'wcpay_dispute_inquiry_refund_modal_view',
+	GOOGLEPAY_BUTTON_CLICK: 'gpay_button_click',
 	ORDER_DISPUTE_NOTICE_BUTTON_CLICK:
 		'wcpay_order_dispute_notice_action_click',
 	OVERVIEW_BALANCES_CURRENCY_CLICK:
@@ -104,6 +106,7 @@ const events = {
 	SUBSCRIPTIONS_ACCOUNT_NOT_CONNECTED_PRODUCT_MODAL_DISMISS:
 		'wcpay_subscriptions_account_not_connected_product_modal_dismiss',
 	TRANSACTIONS_DOWNLOAD_CSV_CLICK: 'wcpay_transactions_download_csv_click',
+	WOOPAY_EMAIL_CHECK: 'checkout_email_address_woopay_check',
 	WOOPAY_OFFERED: 'woopay_offered',
 	WOOPAY_OTP_START: 'woopay_otp_prompt_start',
 	WOOPAY_OTP_COMPLETE: 'woopay_otp_prompt_complete',
@@ -113,6 +116,12 @@ const events = {
 	WOOPAY_BUTTON_LOAD: 'woopay_button_load',
 	WOOPAY_BUTTON_CLICK: 'woopay_button_click',
 	WOOPAY_SAVE_MY_INFO_CLICK: 'checkout_save_my_info_click',
+	WOOPAY_SAVE_MY_INFO_TOS_CLICK: 'checkout_save_my_info_tos_click',
+	WOOPAY_SAVE_MY_INFO_PRIVACY_CLICK:
+		'checkout_save_my_info_privacy_policy_click',
+	WOOPAY_SAVE_MY_INFO_TOOLTIP_HOVER: 'checkout_save_my_info_tooltip_hover',
+	WOOPAY_SAVE_MY_INFO_TOOLTIP_LEARN_MORE_CLICK:
+		'checkout_save_my_info_tooltip_learn_more_click',
 	// Onboarding flow.
 	ONBOARDING_FLOW_STARTED: 'wcpay_onboarding_flow_started',
 	ONBOARDING_FLOW_MODE_SELECTED: 'wcpay_onboarding_flow_mode_selected',

includes/class-wc-payments-payment-request-button-handler.php

@@ -678,6 +678,31 @@ public function is_available_at( $location ) {
 		return false;
 	}
 
+	/**
+	 * Gets the context for where the button is being displayed.
+	 *
+	 * @return string
+	 */
+	public function get_button_context() {
+		if ( $this->is_product() ) {
+			return 'product';
+		}
+
+		if ( $this->is_cart() ) {
+			return 'cart';
+		}
+
+		if ( $this->is_checkout() ) {
+			return 'checkout';
+		}
+
+		if ( $this->is_pay_for_order_page() ) {
+			return 'pay_for_order';
+		}
+
+		return '';
+	}
+
 	/**
 	 * Get product from product page or product_page shortcode.
 	 *
@@ -753,6 +778,7 @@ public function scripts() {
 			'button'             => $this->get_button_settings(),
 			'login_confirmation' => $this->get_login_confirmation_settings(),
 			'is_product_page'    => $this->is_product(),
+			'button_context'     => $this->get_button_context(),
 			'is_pay_for_order'   => $this->is_pay_for_order_page(),
 			'has_block'          => has_block( 'woocommerce/cart' ) || has_block( 'woocommerce/checkout' ),
 			'product'            => $this->get_product_data(),

includes/class-woopay-tracker.php

@@ -63,7 +63,10 @@ public function __construct( $http ) {
 
 		// Actions that should result in recorded Tracks events.
 		add_action( 'woocommerce_after_checkout_form', [ $this, 'classic_checkout_start' ] );
+		add_action( 'woocommerce_after_cart', [ $this, 'classic_cart_page_view' ] );
+		add_action( 'woocommerce_after_single_product', [ $this, 'classic_product_page_view' ] );
 		add_action( 'woocommerce_blocks_enqueue_checkout_block_scripts_after', [ $this, 'blocks_checkout_start' ] );
+		add_action( 'woocommerce_blocks_enqueue_cart_block_scripts_after', [ $this, 'blocks_cart_page_view' ] );
 		add_action( 'woocommerce_checkout_order_processed', [ $this, 'checkout_order_processed' ] );
 		add_action( 'woocommerce_blocks_checkout_order_processed', [ $this, 'checkout_order_processed' ] );
 		add_action( 'woocommerce_payments_save_user_in_woopay', [ $this, 'must_save_payment_method_to_platform' ] );
@@ -384,6 +387,42 @@ public function blocks_checkout_start() {
 		);
 	}
 
+	/**
+	 * Record a Tracks event that the classic cart page has loaded.
+	 */
+	public function classic_cart_page_view() {
+		$this->maybe_record_wcpay_shopper_event(
+			'cart_page_view',
+			[
+				'theme_type' => 'short_code',
+			]
+		);
+	}
+
+	/**
+	 * Record a Tracks event that the blocks cart page has loaded.
+	 */
+	public function blocks_cart_page_view() {
+		$this->maybe_record_wcpay_shopper_event(
+			'cart_page_view',
+			[
+				'theme_type' => 'blocks',
+			]
+		);
+	}
+
+	/**
+	 * Record a Tracks event that the classic cart product has loaded.
+	 */
+	public function classic_product_page_view() {
+		$this->maybe_record_wcpay_shopper_event(
+			'product_page_view',
+			[
+				'theme_type' => 'short_code',
+			]
+		);
+	}
+
 	/**
 	 * Record a Tracks event that the order has been processed.
 	 */