Update WCPay Tracks events props (#48901)

* Add path and source props to incentive CTA clicked Tracks event

* Minor inline docs fixes

* Fix wording mistake

* Add from param to Payments settings CTA URL

* Add from param to incentive CTA URL

* refact: Clearer logic for incentive page tracking

* Add changelog

* Fix incentives page tests

plugins/woocommerce-admin/client/payments-welcome/index.tsx

@@ -37,10 +37,29 @@ const ConnectAccountPage = () => {
 				'admin.php?wcpay-connect=1&promo=' +
 				encodeURIComponent( incentive.id ) +
 				'&_wpnonce=' +
-				getAdminSetting( 'wcpay_welcome_page_connect_nonce' ),
+				getAdminSetting( 'wcpay_welcome_page_connect_nonce' ) +
+				'&from=WCADMIN_PAYMENT_INCENTIVE',
 		};
 	} );
 
+	const determineTrackingSource = () => {
+		const urlParams = new URLSearchParams( window.location.search );
+		const from = urlParams.get( 'from' ) || '';
+
+		// Determine where the user came from.
+		let source = 'wcadmin';
+		switch ( from ) {
+			case 'WCADMIN_PAYMENT_TASK':
+				source = 'wcadmin-payment-task';
+				break;
+			case 'WCADMIN_PAYMENT_SETTINGS':
+				source = 'wcadmin-settings-page';
+				break;
+		}
+
+		return source;
+	};
+
 	/**
 	 * Record page view and save viewed timestamp.
 	 */
@@ -48,6 +67,7 @@ const ConnectAccountPage = () => {
 		recordEvent( 'page_view', {
 			path: 'payments_connect_core_test',
 			incentive_id: incentive.id,
+			source: determineTrackingSource(),
 		} );
 		updateOptions( {
 			wcpay_welcome_page_viewed_timestamp: Math.floor(
@@ -68,12 +88,19 @@ const ConnectAccountPage = () => {
 		}
 	};
 
-	const handleSetup = async () => {
+	const trackConnectAccountClicked = () => {
-		setSubmitted( true );
 		recordEvent( 'wcpay_connect_account_clicked', {
 			wpcom_connection: isJetpackConnected ? 'Yes' : 'No',
 			incentive_id: incentive.id,
+			path: 'payments_connect_core_test',
+			source: determineTrackingSource(),
 		} );
+	};
+
+	const handleSetup = async () => {
+		setSubmitted( true );
+
+		trackConnectAccountClicked();
 
 		const pluginsToInstall = [ ...enabledApms ].map(
 			( apm ) => apm.extension

plugins/woocommerce-admin/client/payments-welcome/test/connect-account-page.test.tsx

@@ -61,6 +61,7 @@ describe( 'Connect Account Page', () => {
 		expect( recordEvent ).toHaveBeenCalledWith( 'page_view', {
 			path: 'payments_connect_core_test',
 			incentive_id: 'incentiveId',
+			source: 'wcadmin',
 		} );
 	} );
 
@@ -73,6 +74,8 @@ describe( 'Connect Account Page', () => {
 			{
 				wpcom_connection: 'Yes',
 				incentive_id: 'incentiveId',
+				path: 'payments_connect_core_test',
+				source: 'wcadmin',
 			}
 		);
 	} );

plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js

@@ -31,10 +31,10 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => {
 	const isWooPayEligible = getAdminSetting( 'isWooPayEligible' );
 
 	const { createNotice } = useDispatch( 'core/notices' );
-	// When the WC Pay is installed and onSetupCallback is null
+	// When WCPay is installed and onSetupCallback is null
 	// Overwrite onSetupCallback to redirect to the setup page
 	// when the user clicks on the "Finish setup" button.
-	// WC Pay doesn't need to be configured in WCA.
+	// WCPay doesn't need to be configured in WCA.
 	// It should be configured in its onboarding flow.
 	if ( installed && onSetupCallback === null ) {
 		onSetupCallback = () => {

plugins/woocommerce-admin/client/task-lists/fills/woocommerce-payments.tsx

@@ -30,7 +30,7 @@ const WoocommercePaymentsTaskItem = () => {
 				} ) => JSX.Element;
 			} ) => (
 				<DefaultTaskItem
-					// intercept the click on the task list item so that we don't have to see a intermediate page before installing woocommerce payments
+					// Intercept the click on the task list item so that we don't have to see an intermediate page before installing WooPayments.
 					onClick={ () => {
 						return new Promise( ( resolve, reject ) => {
 							return installActivateAndConnectWcpay(

plugins/woocommerce/changelog/update-wcpay-tracks-events-props

@@ -0,0 +1,5 @@
+Significance: patch
+Type: tweak
+Comment: Minor updates to WooPayments incentives page tracking props.
+
+

plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php

@@ -189,17 +189,20 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
 										break;
 									case 'action':
 										$setup_url = admin_url( 'admin.php?page=wc-settings&tab=checkout&section=' . strtolower( $gateway->id ) );
-										// Override the behaviour for WooPayments plugin.
+										// Override the behaviour for the WooPayments plugin.
 										if (
 											// Keep old brand name for backwards compatibility.
 											( 'WooCommerce Payments' === $method_title || 'WooPayments' === $method_title ) &&
 											class_exists( 'WC_Payments_Account' )
 										) {
 											if ( ! WooCommercePayments::is_connected() || WooCommercePayments::is_account_partially_onboarded() ) {
-												// The CTA text and label is "Finish set up" if the account is not connected or not completely onboarded.
+												// The CTA text and label is "Finish setup" if the account is not connected or not completely onboarded.
-												$setup_url = WC_Payments_Account::get_connect_url(); // Plugin will handle the redirection to the connect page or directly to the provider (e.g. Stripe).
+												// Plugin will handle the redirection to the connect page or directly to the provider (e.g. Stripe).
+												$setup_url = WC_Payments_Account::get_connect_url();
+												// Add the `from` parameter to the URL, so we know where the user came from.
+												$setup_url = add_query_arg( 'from', 'WCADMIN_PAYMENT_SETTINGS', $setup_url );
 												/* Translators: %s Payment gateway name. */
-												echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Set up the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Finish set up', 'woocommerce' ) . '</a>';
+												echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Set up the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Finish setup', 'woocommerce' ) . '</a>';
 											} else {
 												// If the account is fully onboarded, the CTA text and label is "Manage" regardless gateway is enabled or not.
 												/* Translators: %s Payment gateway name. */
@@ -210,7 +213,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
 											echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Manage the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Manage', 'woocommerce' ) . '</a>';
 										} else {
 											/* Translators: %s Payment gateway name. */
-											echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Set up the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Finish set up', 'woocommerce' ) . '</a>';
+											echo '<a class="button alignright" aria-label="' . esc_attr( sprintf( __( 'Set up the "%s" payment method', 'woocommerce' ), $method_title ) ) . '" href="' . esc_url( $setup_url ) . '">' . esc_html__( 'Finish setup', 'woocommerce' ) . '</a>';
 										}
 										break;
 									case 'status':