Add tracking when opening or searching in the Command Palette (#41838)

* Add tracking when opening or searching in the Command Palette

* Add changefile(s) from automation for the following project(s): woocommerce

* Add 'origin' property to all Command Palette events

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/wp-admin-scripts/command-palette-analytics/index.js

@@ -10,8 +10,9 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import { registerCommandWithTracking } from '../command-palette/register-command-with-tracking';
+import { useEditedPostType } from '../command-palette/use-edited-post-type';
 
-const registerWooCommerceAnalyticsCommand = ( { label, path } ) => {
+const registerWooCommerceAnalyticsCommand = ( { label, path, origin } ) => {
 	registerCommandWithTracking( {
 		name: `woocommerce${ path }`,
 		label: sprintf(
@@ -26,10 +27,13 @@ const registerWooCommerceAnalyticsCommand = ( { label, path } ) => {
 				path,
 			} );
 		},
+		origin,
 	} );
 };
 
 const WooCommerceAnalyticsCommands = () => {
+	const { editedPostType } = useEditedPostType();
+	const origin = editedPostType ? editedPostType + '-editor' : null;
 	if (
 		window.hasOwnProperty( 'wcCommandPaletteAnalytics' ) &&
 		window.wcCommandPaletteAnalytics.hasOwnProperty( 'reports' ) &&
@@ -41,6 +45,7 @@ const WooCommerceAnalyticsCommands = () => {
 			registerWooCommerceAnalyticsCommand( {
 				label: analyticsReport.title,
 				path: analyticsReport.path,
+				origin,
 			} );
 		} );
 	}

plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/index.js

@@ -4,11 +4,11 @@
 import { registerPlugin } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import { box, plus, settings } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { dispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs } from '@wordpress/url';
-import { queueRecordEvent } from '@woocommerce/tracks';
+import { recordEvent, queueRecordEvent } from '@woocommerce/tracks';
 import { store as commandsStore } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -16,8 +16,9 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { registerCommandWithTracking } from './register-command-with-tracking';
+import { useEditedPostType } from './use-edited-post-type';
 
-const registerWooCommerceSettingsCommand = ( { label, tab } ) => {
+const registerWooCommerceSettingsCommand = ( { label, tab, origin } ) => {
 	registerCommandWithTracking( {
 		name: `woocommerce/settings-${ tab }`,
 		label: sprintf(
@@ -32,12 +33,32 @@ const registerWooCommerceSettingsCommand = ( { label, tab } ) => {
 				tab,
 			} );
 		},
+		origin,
 	} );
 };
 
 // Code adapted from the equivalent in Gutenberg:
 // https://github.com/WordPress/gutenberg/blob/8863b49b7e686f555e8b8adf70cc588c4feebfbf/packages/core-commands/src/site-editor-navigation-commands.js#L36C7-L36C44
 function useProductCommandLoader( { search } ) {
+	const { editedPostType } = useEditedPostType();
+	const origin = editedPostType ? editedPostType + '-editor' : null;
+	// Track searched values. We add a 300 ms delay to avoid tracking while typing.
+	const trackingSearchTimeout = useRef( null );
+	useEffect( () => {
+		if ( search !== '' ) {
+			clearTimeout( trackingSearchTimeout.current );
+			trackingSearchTimeout.current = setTimeout( () => {
+				recordEvent( 'woocommerce_command_palette_search', {
+					value: search,
+					origin,
+				} );
+			}, 300 );
+		}
+		return () => {
+			clearTimeout( trackingSearchTimeout.current );
+		};
+	}, [ search, origin ] );
+
 	const postType = 'product';
 	const { records, isLoading } = useSelect(
 		( select ) => {
@@ -74,6 +95,7 @@ function useProductCommandLoader( { search } ) {
 				callback: ( { close } ) => {
 					queueRecordEvent( 'woocommerce_command_palette_submit', {
 						name: 'woocommerce/product',
+						origin,
 					} );
 
 					const args = {
@@ -86,7 +108,7 @@ function useProductCommandLoader( { search } ) {
 				},
 			};
 		} );
-	}, [ records ] );
+	}, [ records, origin ] );
 
 	return {
 		commands,
@@ -95,6 +117,25 @@ function useProductCommandLoader( { search } ) {
 }
 
 const WooCommerceCommands = () => {
+	const { editedPostType } = useEditedPostType();
+	const origin = editedPostType ? editedPostType + '-editor' : null;
+	const { isCommandPaletteOpen } = useSelect( ( select ) => {
+		const { isOpen } = select( commandsStore );
+		return {
+			isCommandPaletteOpen: isOpen(),
+		};
+	}, [] );
+	const wasCommandPaletteOpen = useRef( false );
+
+	useEffect( () => {
+		if ( isCommandPaletteOpen && ! wasCommandPaletteOpen.current ) {
+			recordEvent( 'woocommerce_command_palette_open', {
+				origin,
+			} );
+		}
+		wasCommandPaletteOpen.current = isCommandPaletteOpen;
+	}, [ isCommandPaletteOpen, origin ] );
+
 	registerCommandWithTracking( {
 		name: 'woocommerce/add-new-product',
 		label: __( 'Add new product', 'woocommerce' ),
@@ -104,6 +145,7 @@ const WooCommerceCommands = () => {
 				post_type: 'product',
 			} );
 		},
+		origin,
 	} );
 	registerCommandWithTracking( {
 		name: 'woocommerce/add-new-order',
@@ -115,6 +157,7 @@ const WooCommerceCommands = () => {
 				action: 'new',
 			} );
 		},
+		origin,
 	} );
 	registerCommandWithTracking( {
 		name: 'woocommerce/view-products',
@@ -125,6 +168,7 @@ const WooCommerceCommands = () => {
 				post_type: 'product',
 			} );
 		},
+		origin,
 	} );
 	registerCommandWithTracking( {
 		name: 'woocommerce/view-orders',
@@ -135,6 +179,7 @@ const WooCommerceCommands = () => {
 				page: 'wc-orders',
 			} );
 		},
+		origin,
 	} );
 	dispatch( commandsStore ).registerCommandLoader( {
 		name: 'woocommerce/product',
@@ -152,6 +197,7 @@ const WooCommerceCommands = () => {
 			registerWooCommerceSettingsCommand( {
 				label: settingsCommand.label,
 				tab: settingsCommand.key,
+				origin,
 			} );
 		} );
 	}

plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/register-command-with-tracking.js

@@ -11,6 +11,7 @@ export const registerCommandWithTracking = ( {
 	label,
 	icon,
 	callback,
+	origin,
 } ) => {
 	dispatch( commandsStore ).registerCommand( {
 		name,
@@ -19,6 +20,7 @@ export const registerCommandWithTracking = ( {
 		callback: ( ...args ) => {
 			queueRecordEvent( 'woocommerce_command_palette_submit', {
 				name,
+				origin,
 			} );
 
 			callback( ...args );

plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/use-edited-post-type.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+export const useEditedPostType = () => {
+	// This will return 'post' or 'page' when in the post/page editor.
+	const { currentPostType } = useSelect( ( select ) => {
+		const store = select( 'core/editor' );
+		if ( ! store ) {
+			return {
+				currentPostType: null,
+			};
+		}
+		const { getCurrentPostType } = store;
+		return {
+			currentPostType: getCurrentPostType(),
+		};
+	} );
+	// This will return 'wp_template' or 'wp_template_part' when in the Site Editor.
+	const { editedPostType } = useSelect( ( select ) => {
+		const store = select( 'core/edit-site' );
+		if ( ! store ) {
+			return {
+				editedPostType: null,
+			};
+		}
+		const { getEditedPostType } = store;
+		return {
+			editedPostType: getEditedPostType(),
+		};
+	} );
+
+	return { editedPostType: editedPostType || currentPostType };
+};

plugins/woocommerce/changelog/41838-update-41837-command-palette-tracking

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Add tracking when opening or searching in the Command Palette
+