From 140d1db2cce9a05d7baa9a18e6a9142f896a9aa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Mon, 18 Dec 2023 14:36:53 +0100 Subject: [PATCH] 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 --- .../command-palette-analytics/index.js | 7 ++- .../wp-admin-scripts/command-palette/index.js | 54 +++++++++++++++++-- .../register-command-with-tracking.js | 2 + .../command-palette/use-edited-post-type.js | 35 ++++++++++++ ...1838-update-41837-command-palette-tracking | 4 ++ 5 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/use-edited-post-type.js create mode 100644 plugins/woocommerce/changelog/41838-update-41837-command-palette-tracking diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette-analytics/index.js b/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette-analytics/index.js index 3d8c3ee35d7..f04a592f368 100644 --- a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette-analytics/index.js +++ b/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, } ); } ); } diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/index.js b/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/index.js index 9e905fcab95..31cfcbaf68c 100644 --- a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/index.js +++ b/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, } ); } ); } diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/register-command-with-tracking.js b/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/register-command-with-tracking.js index b1313cc6e7c..4c5f2df0231 100644 --- a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/register-command-with-tracking.js +++ b/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 ); diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/use-edited-post-type.js b/plugins/woocommerce-admin/client/wp-admin-scripts/command-palette/use-edited-post-type.js new file mode 100644 index 00000000000..8977ab9d43a --- /dev/null +++ b/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 }; +}; diff --git a/plugins/woocommerce/changelog/41838-update-41837-command-palette-tracking b/plugins/woocommerce/changelog/41838-update-41837-command-palette-tracking new file mode 100644 index 00000000000..c88d8d0ccf9 --- /dev/null +++ b/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 +