Add Tracks events for product inventory tab (#37202)

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

@@ -18,6 +18,11 @@ import { waitUntilElementIsPresent } from './utils';
 const isElementVisible = ( element: HTMLElement ) =>
 	! ( window.getComputedStyle( element ).display === 'none' );
 
+const getProductType = () => {
+	return ( document.querySelector( '#product-type' ) as HTMLInputElement )
+		?.value;
+};
+
 const getProductData = () => {
 	const isBlockEditor =
 		document.querySelectorAll( '.block-editor' ).length > 0;
@@ -50,9 +55,7 @@ const getProductData = () => {
 	const productData = {
 		product_id: ( document.querySelector( '#post_ID' ) as HTMLInputElement )
 			?.value,
-		product_type: (
-			document.querySelector( '#product-type' ) as HTMLInputElement
-		 )?.value,
+		product_type: getProductType(),
 		is_downloadable: (
 			document.querySelector( '#_downloadable' ) as HTMLInputElement
 		 )?.checked
@@ -199,6 +202,94 @@ const prefixObjectKeys = (
 	);
 };
 
+/**
+ * Gets the tab name for a tab element.
+ *
+ * @param  tab Tab element to get slug for.
+ * @return string
+ */
+const getTabName = ( tab: Element ) => {
+	const optionsSuffix = '_options';
+
+	const optionsClassNames = Array.from( tab.classList ).filter(
+		( className ) => className.endsWith( optionsSuffix )
+	);
+
+	if ( optionsClassNames.length > 0 ) {
+		const className = optionsClassNames[ 0 ];
+
+		return className.slice( 0, -optionsSuffix.length );
+	}
+
+	return '';
+};
+
+/**
+ * Gets additional data associated with a product tab click.
+ *
+ * @param  tabName The name of the tab to get data for.
+ * @return object
+ */
+const getDataForProductTabClickEvent = ( tabName: string ) => {
+	const data: Record< string, boolean | string > = {};
+
+	data.product_type = getProductType();
+
+	if ( tabName === 'inventory' ) {
+		data.is_store_stock_management_enabled =
+			document.querySelector( '#_manage_stock' ) !== null;
+	}
+
+	return data;
+};
+
+/**
+ * Initializes the product tabs Tracks events.
+ */
+const initProductTabsTracks = () => {
+	const tabs = document.querySelectorAll( '.product_data_tabs > li' );
+
+	tabs.forEach( ( tab ) => {
+		const tabName = getTabName( tab );
+
+		tab.querySelector( 'a' )?.addEventListener( 'click', () => {
+			recordEvent( 'product_tab_click', {
+				product_tab: tabName,
+				...getDataForProductTabClickEvent( tabName ),
+			} );
+		} );
+	} );
+};
+
+/**
+ * Initializes the inventory tab Tracks events.
+ */
+const initInventoryTabTracks = () => {
+	document
+		.querySelector( '#_manage_stock' )
+		?.addEventListener( 'click', ( event ) => {
+			recordEvent( 'product_manage_stock_click', {
+				is_enabled: ( event.target as HTMLInputElement )?.checked,
+			} );
+		} );
+
+	document
+		.querySelector( '#_manage_stock_disabled' )
+		?.addEventListener( 'click', () => {
+			recordEvent(
+				'product_manage_stock_disabled_store_settings_link_click'
+			);
+		} );
+
+	document
+		.querySelector( '#inventory_product_data .notice a' )
+		?.addEventListener( 'click', () => {
+			recordEvent(
+				'product_inventory_variations_notice_learn_more_click'
+			);
+		} );
+};
+
 /**
  * Initialize all product screen tracks.
  */
@@ -465,6 +556,9 @@ export const initProductScreenTracks = () => {
 				recordEvent( 'product_view_product_dismiss', getProductData() );
 			} );
 	} );
+
+	initProductTabsTracks();
+	initInventoryTabTracks();
 };
 
 export function addExitPageListener( pageId: string ) {

plugins/woocommerce/changelog/add-product-inventory-tracks

@@ -0,0 +1,4 @@
+Significance: minor
+Type: tweak
+
+Add Tracks events for product inventory tab interactions.