Add missing tracks events to product editor #38728

joshuatf · 2023-06-14T23:57:26Z

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:

Adds tracks discussed in the issue as well as missing properties to fill in missing gaps in tracks data. Also creates a source property to better identify where events are triggered from.

@pmcpinto made the following changes to the events suggested:

product_add_description_button -> product_add_description_click
product_add_attribute_button -> product_add_attributes_click (note I made the assumption that this event is fired when the "Add attributes" button is clicked to open the attributes modal)
product_dropdown_option -> product_dropdown_option_click (options: feedback | classic_editor)

Closes #38637 .

How to test the changes in this Pull Request:

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

Go to WooCommerce -> Settings -> Advanced -> Features and enable the new product editing experience
Open your console and enter localStorage.setItem( 'debug', 'wc-admin:tracks' );
Navigate to "Add products"
Attempt to run all the events noted in Fix instrumentation gaps for phase 1 #38637
Make sure those events run in the console. Note that wcadmin_product_add_publish will fire on the backend and can be found under WooCommerce -> Status -> Logs and finding the latest tracks-2023-xx-xx logs.

github-actions · 2023-06-14T23:57:54Z

Hi @octaedro,

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

joshuatf · 2023-06-14T23:59:40Z

packages/js/components/src/media-uploader/media-uploader.tsx

@@ -34,6 +34,7 @@ type MediaUploaderProps = {
 		message: string;
 		file: File;
 	} ) => void;
+	onMediaGalleryOpen?: () => void;


Added onMediaGalleryOpen since onClick is ambiguous in this case and limits how we redesign this component in the future.

@pmcpinto There's also click behavior on the background that opens a file uploader, but currently this only fires on the button click which opens the media gallery). Let me know if you'd like both.

joshuatf · 2023-06-15T00:00:56Z

packages/js/product-editor/src/components/header/preview-button/preview-button.tsx

@@ -23,6 +25,9 @@ export function PreviewButton( {
 	const previewButtonProps = usePreview( {
 		productStatus,
 		...props,
+		onClick() {
+			recordEvent( 'product_preview_changes', { source: TRACKS_SOURCE } );


I'm wondering if we want this source added to all events and if so, whether or not we should create a new recordProductEvent (or enhance the current one we have) that wraps this and helps adding the source.

Also, I'm wondering if the source property should be _source to help prevent potential conflicts.

I like the idea of adding the source directly into the recordProductEvent. Renaming source to _source makes a lot of sense as well.

github-actions · 2023-06-15T00:34:44Z

Test Results Summary

Commit SHA: 979301b

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 11s
E2E Tests	190	0	0	18	0	208	14m 5s

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.

octaedro · 2023-06-15T01:13:44Z

packages/js/product-editor/src/blocks/images/edit.tsx

@@ -87,6 +87,11 @@ export function Edit() {
 						multipleSelect={ true }
 						onError={ () => null }
 						onFileUploadChange={ onFileUpload }
+						onMediaGalleryOpen={ () => {
+							recordEvent(
+								'product_images_media_gallery_open'


I think that the proposed name was wcadmin_product_add_image_button, however wcadmin_product_images_media_gallery_open is more specific.
Pinging @pmcpinto to let him know that we renamed the event.

octaedro

Great job @joshuatf! The code looks good and is testing well here 🚀

octaedro · 2023-06-15T01:34:21Z

I'm seeing a couple of minor lint errors here and here.

pmcpinto · 2023-06-15T08:42:03Z

@pmcpinto made the following changes to the events suggested:
product_add_description_button -> product_add_description_click
product_add_attribute_button -> product_add_attributes_click (note I made the assumption that this event is fired when > the "Add attributes" button is clicked to open the attributes modal)
product_dropdown_option -> product_dropdown_option_click (options: feedback | classic_editor)

The changes look good to me.

@pmcpinto There's also click behavior on the background that opens a file uploader, but currently this only fires on the button click which opens the media gallery). Let me know if you'd like both.

We don't need that one for now.

Thanks for taking care of this so quickly.

joshuatf

Had to rebase which then brought on some overlapping events. This should probably get another look before I merge, cc @pmcpinto @octaedro

joshuatf · 2023-06-15T23:27:20Z

plugins/woocommerce-admin/client/products/fills/more-menu-items/about-the-editor-menu-item.tsx

 } ) => {
 	const [ isGuideOpen, setIsGuideOpen ] = useState( false );
 	const { isNewUser } = usePublishedProductsCount();
 	return (
 		<>
 			<MenuItem
 				onClick={ () => {
-					recordEvent(
-						'block_product_editor_about_the_editor_menu_item_clicked'


@pmcpinto Worth noting that this was overlapped with the product_dropdown_option_click so I removed this event.

joshuatf · 2023-06-15T23:28:39Z

plugins/woocommerce-admin/client/products/fills/product-block-editor-fills.tsx

+			<ClassicEditorMenuItem
+				productId={ id }
+				onClick={ () => {
+					recordClick( 'classic_editor' );


This event also has a lot of overlap with product_editor_options_turn_off_editor_click, but the latter has product_id, product_type, and product_status.

Do we need both events, @pmcpinto?

Thanks for the heads up. I didn't know this event existed. Having one is enough and I feel it's better to consolidate it under wcadmin_product_dropdown_option. What do you think?

Agreed! I'll update this.

@pmcpinto Replaced product_editor_options_turn_off_editor_click with wcadmin_product_dropdown_option. Also added product_type and product_status to all of the dropdown option events.

I did not include product_id in the event data as I'm not sure how useful it is, but please let me know if that's something that's used for joining data in tracks and I can include it here.

@pmcpinto Replaced product_editor_options_turn_off_editor_click with wcadmin_product_dropdown_option. Also added product_type and product_status to all of the dropdown option events.

I did not include product_id in the event data as I'm not sure how useful it is, but please let me know if that's something that's used for joining data in tracks and I can include it here.

Thanks for the heads up. It's ok to skip product_id

octaedro

Good job @joshuatf! I just tested this PR after the rebase and the changes. LGTM

* Only record product update on already published products * Add source into published product tracks event * Add missing tracks options to product update event * Track tab clicks in the editor * Add source to tab clicks * Record tracks on preview click * Add events for media gallery, description, and attributes * Add tracks events to more menu * Replace new_product_page with source * Add changelog entry * Fix lint errors * Add tracks for About the Editor menu item * Add onClick event to AboutTheEditor menu item * Use dropdown option event for classic editor menu click

* Add missing tracks events to product editor (#38728) * Only record product update on already published products * Add source into published product tracks event * Add missing tracks options to product update event * Track tab clicks in the editor * Add source to tab clicks * Record tracks on preview click * Add events for media gallery, description, and attributes * Add tracks events to more menu * Replace new_product_page with source * Add changelog entry * Fix lint errors * Add tracks for About the Editor menu item * Add onClick event to AboutTheEditor menu item * Use dropdown option event for classic editor menu click * Prep for cherry pick 38728 --------- Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> Co-authored-by: WooCommerce Bot <no-reply@woocommerce.com>

joshuatf requested a review from a team June 14, 2023 23:57

joshuatf self-assigned this Jun 14, 2023

github-actions bot added focus: react admin [team:Ghidorah] package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jun 14, 2023

joshuatf commented Jun 15, 2023

View reviewed changes

octaedro requested review from octaedro and removed request for a team June 15, 2023 00:31

octaedro reviewed Jun 15, 2023

View reviewed changes

octaedro approved these changes Jun 15, 2023

View reviewed changes

joshuatf added 12 commits June 15, 2023 16:03

Only record product update on already published products

d15e9de

Add source into published product tracks event

8fb7bb1

Add missing tracks options to product update event

7d61ca7

Track tab clicks in the editor

100aa3e

Add source to tab clicks

84b85e5

Record tracks on preview click

3e5772b

Add events for media gallery, description, and attributes

78c3205

Add tracks events to more menu

961c0d4

Replace new_product_page with source

4636742

Add changelog entry

858d564

Fix lint errors

4d6dad9

Add tracks for About the Editor menu item

9f7bb7e

joshuatf force-pushed the fix/38637 branch from 41a6f9a to 9f7bb7e Compare June 15, 2023 23:19

Add onClick event to AboutTheEditor menu item

3b4cae6

joshuatf commented Jun 15, 2023

View reviewed changes

Use dropdown option event for classic editor menu click

979301b

octaedro approved these changes Jun 20, 2023

View reviewed changes

joshuatf merged commit 6bbc4da into trunk Jun 21, 2023
17 checks passed

joshuatf deleted the fix/38637 branch June 21, 2023 16:38

github-actions bot added this to the 8.0.0 milestone Jun 21, 2023

jonathansadowski modified the milestones: 8.0.0, 7.9.0 Jun 21, 2023

github-actions bot mentioned this pull request Jun 21, 2023

Cherry pick 38728 into release/7.9 #38863

Merged

github-actions bot mentioned this pull request Jun 21, 2023

Delete changelog files based on PR 38728 #38864

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add missing tracks events to product editor #38728

Add missing tracks events to product editor #38728

joshuatf commented Jun 14, 2023

github-actions bot commented Jun 14, 2023 •

edited

joshuatf Jun 14, 2023

joshuatf Jun 15, 2023

joshuatf Jun 15, 2023

octaedro Jun 15, 2023

github-actions bot commented Jun 15, 2023 •

edited

octaedro Jun 15, 2023

octaedro left a comment

octaedro commented Jun 15, 2023

pmcpinto commented Jun 15, 2023

joshuatf left a comment

joshuatf Jun 15, 2023

joshuatf Jun 15, 2023

pmcpinto Jun 16, 2023

joshuatf Jun 19, 2023

joshuatf Jun 20, 2023

pmcpinto Jun 21, 2023

octaedro left a comment

Add missing tracks events to product editor #38728

Add missing tracks events to product editor #38728

Conversation

joshuatf commented Jun 14, 2023

Submission Review Guidelines:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

github-actions bot commented Jun 14, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jun 15, 2023 • edited

Test Results Summary

Choose a reason for hiding this comment

octaedro left a comment

Choose a reason for hiding this comment

octaedro commented Jun 15, 2023

pmcpinto commented Jun 15, 2023

joshuatf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

octaedro left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 14, 2023 •

edited

github-actions bot commented Jun 15, 2023 •

edited