Adding ces exit prompt when product importer abandoned (#35996)

plugins/woocommerce-admin/client/customer-effort-score-tracks/customer-effort-score-exit-page.ts

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { dispatch, resolveSelect } from '@wordpress/data';
+import { getQuery } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -42,7 +43,7 @@ export const getExitPageData = () => {
  * @param {string} pageId of page exited early.
  */
 export const addExitPage = ( pageId: string ) => {
-	if ( ! window.localStorage ) {
+	if ( ! ( window.localStorage && allowTracking ) ) {
 		return;
 	}
 
@@ -93,8 +94,8 @@ export const addCustomerEffortScoreExitPageListener = (
 	pageId: string,
 	hasUnsavedChanges: () => boolean
 ) => {
-	eventListeners[ pageId ] = ( event ) => {
+	eventListeners[ pageId ] = () => {
-		if ( hasUnsavedChanges() && allowTracking ) {
+		if ( hasUnsavedChanges() ) {
 			addExitPage( pageId );
 		}
 	};
@@ -230,19 +231,63 @@ function getExitPageCESCopy( pageId: string ): {
 					'woocommerce'
 				),
 			};
+		case 'import_products':
+			return {
+				action: pageId,
+				icon: '🔄',
+				noticeLabel: __(
+					'How is your experience with importing products?',
+					'woocommerce'
+				),
+				title: __(
+					`How's your experience with importing products?`,
+					'woocommerce'
+				),
+				description: __(
+					'We noticed you started importing products, then left. How was it? Your feedback will help create a better experience for thousands of merchants like you.',
+					'woocommerce'
+				),
+				firstQuestion: __(
+					'The product import screen is easy to use',
+					'woocommerce'
+				),
+				secondQuestion: __(
+					"The product import screen's functionality meets my needs",
+					'woocommerce'
+				),
+			};
 		default:
 			return null;
 	}
 }
 
+/**
+ * Stores trigger conditions for exit page actions.
+ *
+ * @param {string} pageId page id.
+ */
+function getShouldExitPageFire( pageId: string ) {
+	const conditionPageMap: Record< string, () => boolean > = {
+		import_products: () =>
+			( getQuery() as { page: string } ).page !== 'product_importer',
+	};
+
+	return conditionPageMap[ pageId ] ? conditionPageMap[ pageId ]() : true;
+}
+
 /**
  * Checks the exit page list and triggers a CES survey for the first item in the list.
  */
 export function triggerExitPageCesSurvey() {
 	const exitPageItems: string[] = getExitPageData();
-	if ( exitPageItems && exitPageItems.length > 0 ) {
+	if ( exitPageItems?.length ) {
+		if ( ! getShouldExitPageFire( exitPageItems[ 0 ] ) ) {
+			return;
+		}
+
 		const copy = getExitPageCESCopy( exitPageItems[ 0 ] );
-		if ( copy && copy.title.length > 0 ) {
+
+		if ( copy?.title?.length ) {
 			dispatch( 'wc/customer-effort-score' ).addCesSurvey( {
 				...copy,
 				pageNow: window.pagenow,

plugins/woocommerce-admin/client/wp-admin-scripts/product-import-tracking/index.ts

@@ -0,0 +1 @@
+export * from './product-import-tracking';

plugins/woocommerce-admin/client/wp-admin-scripts/product-import-tracking/product-import-tracking.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { getQuery } from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import {
+	addExitPage,
+	removeExitPage,
+} from '~/customer-effort-score-tracks/customer-effort-score-exit-page';
+
+const ACTION_NAME = 'import_products';
+
+( () => {
+	const query: { step?: string; page?: string } = getQuery();
+
+	if ( query.page !== 'product_importer' ) {
+		return;
+	}
+
+	if ( query.step === 'done' ) {
+		removeExitPage( ACTION_NAME );
+		return;
+	}
+
+	addExitPage( ACTION_NAME );
+} )();

plugins/woocommerce-admin/webpack.config.js

@@ -59,6 +59,7 @@ const wpAdminScripts = [
 	'wc-addons-tour',
 	'settings-tracking',
 	'order-tracking',
+	'product-import-tracking',
 ];
 const getEntryPoints = () => {
 	const entryPoints = {

plugins/woocommerce/changelog/add-35126_ces_exit_prompt_import

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Run ces exit prompt when product import abandoned.

plugins/woocommerce/includes/tracks/events/class-wc-products-tracking.php

@@ -26,6 +26,7 @@ class WC_Products_Tracking {
 		add_action( 'edited_product_cat', array( $this, 'track_product_category_updated' ) );
 		add_action( 'add_meta_boxes_product', array( $this, 'track_product_updated_client_side' ), 10 );
 		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_product_tracking_scripts' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_product_import_scripts' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_attribute_tracking_scripts' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'possibly_add_tag_tracking_scripts' ) );
 	}
@@ -330,6 +331,11 @@ class WC_Products_Tracking {
 		) {
 			return 'edit';
 		}
+
+		if ( 'product_page_product_importer' === $hook ) {
+			return 'import';
+		}
+
 		// phpcs:enable
 
 		return false;
@@ -356,6 +362,22 @@ class WC_Products_Tracking {
 		);
 	}
 
+	/**
+	 * Adds the tracking scripts for product setting pages.
+	 *
+	 * @param string $hook Page hook.
+	 */
+	public function possibly_add_product_import_scripts( $hook ) {
+		$product_screen = $this->get_product_screen( $hook );
+
+		if ( 'import' !== $product_screen ) {
+			return;
+		}
+
+		WCAdminAssets::register_script( 'wp-admin-scripts', 'product-import-tracking', false );
+
+	}
+
 	/**
 	 * Adds the tracking scripts for product attributes filtering actions.
 	 *