Add tracking when opening or searching in the Command Palette

[Aljullu]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #41837.

This PR adds tracking when the user opens the Command Palette and makes a search in it.

cc @pmcpinto

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

0. To test tracking, open the browser console (F12) and run localStorage.setItem( 'debug', 'wc-admin:*' );.
1. Go to the post editor (Posts > Add New).
2. Press Ctrl+K to open the Command Palette.
3. Verify an event is triggered when the Command Palette was opened (in the browser console you will see wc-admin:tracks recordevent wcadmin_woocommerce_command_palette_open).
4. Type a search term in the Command Palette. Ie, products.
5. An event should be triggered with the search term (in the browser console you will see wc-admin:tracks recordevent wcadmin_woocommerce_command_palette_search { value: "products", origin: "post-editor" }).

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

Add tracking when opening or searching in the Command Palette

[github-actions]

Hi @dinhtungdu,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Hi @dinhtungdu,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 88e468a

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	258	0	0	3	0	261	14m 52s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[dinhtungdu]

Code looks and tests good in my test so I'm pre-approving! Thank you for working on this.

I have a question on the palette open event. Do we record where (which screen/page) the palette is opened? From the debug value I didn't see any data related to the current screen. I also see a property named shouldRecord set to false, which is a bit confusion and makes me wonder if the event was recorded or not.

[Aljullu]

Thanks for the review, @dinhtungdu!

I have a question on the palette open event. Do we record where (which screen/page) the palette is opened?

Good idea! I added an origin property to all events which contains the origin editor, which can be: post-editor, page-editor, wp_template-editor or wp_template_part-editor. I wasn't sure if we should unify those last two into site-editor, but I felt it made more sense to always include the post type being edited. This way, if in the future the Command Palette is displayed in the Product editor, we can have product-editor as an origin.

Btw, I added this property to all events, not only the open one. That means also when submitting one command or when searching. I think it might be useful in those cases as well, but cc'ing @pmcpinto in case he has other thoughts.

I also see a property named shouldRecord set to false, which is a bit confusion and makes me wonder if the event was recorded or not.

I think that's expected if you are in development mode or don't have tracking enabled:

woocommerce/packages/js/tracks/src/index.ts

Lines 38 to 42 in be79b98

	shouldRecord:
	! isDevelopmentMode &&
	!! window._tkq &&
	!! window.wcTracks &&
	!! window.wcTracks.isEnabled,

[dinhtungdu]

The update looks good to me! Tested and I can confirm it's working, the origin data is tracked correctly.