From a4701c8494862d669fcab66368066b8ab68a563c Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 11 Mar 2021 18:52:54 +0800 Subject: [PATCH] Add CES survey for adding product categories, tags, and attributes (https://github.com/woocommerce/woocommerce-admin/pull/6418) * Add CES survey for adding product categories and tags * Update readme and testing instructions * Add CES survey for adding product attributes * Change logic to use number of rows in tags table * Replace addslashes with esc_js, use JS variables pagenow and adminpage --- .../woocommerce-admin/TESTING-INSTRUCTIONS.md | 20 +++ plugins/woocommerce-admin/readme.txt | 1 + .../Features/CustomerEffortScoreTracks.php | 137 +++++++++++++++--- 3 files changed, 139 insertions(+), 19 deletions(-) diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index 159f53d17ae..221ef0aabf1 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md @@ -219,6 +219,26 @@ Scenario #2 - Upload CSV file and finish the import process. - Observe CES prompt "How easy was it to import products?" is displayed. +### Add CES survey for adding product categories and tags #6418 +- Make sure tracking is enabled in settings. +- Delete the option `woocommerce_ces_shown_for_actions` to make sure CES prompt triggers when updating settings. +- Enable the logging of Tracks events to your browser dev console `localStorage.setItem( 'debug', 'wc-admin:tracks' );` + +**Testing product categories:** +- Go to Products > Categories. +- Add a new category. +- Observe CES prompt "How easy was it to add a product category?" is displayed. + +**Testing product tags:** +- Go to Products > Tags. +- Add a new tag. +- Observe CES prompt "How easy was it to add a product tag?" is displayed. + +**Testing product attributes:** +- Go to Products > Attributes. +- Add a new attribute. +- Observe CES prompt "How easy was it to add a product attribute?" is displayed. + ## 2.1.2 ### Add Guards to "Deactivate Plugin" Note Handlers #6532 diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 80785851127..c336b109ee8 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/plugins/woocommerce-admin/readme.txt @@ -113,6 +113,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt - Add: Add Ireland to Square payment method #6559 - Add: CES survey for search product, order, customer #6420 - Add: CES survey for importing products #6419 +- Add: CES survey for adding product categories, tags, and attributes #6418 == 2.1.0 3/10/2021 == diff --git a/plugins/woocommerce-admin/src/Features/CustomerEffortScoreTracks.php b/plugins/woocommerce-admin/src/Features/CustomerEffortScoreTracks.php index 688996aefde..5f35310c2ec 100644 --- a/plugins/woocommerce-admin/src/Features/CustomerEffortScoreTracks.php +++ b/plugins/woocommerce-admin/src/Features/CustomerEffortScoreTracks.php @@ -34,11 +34,26 @@ class CustomerEffortScoreTracks { */ const SETTINGS_CHANGE_ACTION_NAME = 'settings_change'; + /** + * Action name for add product categories. + */ + const ADD_PRODUCT_CATEGORIES_ACTION_NAME = 'add_product_categories'; + + /** + * Action name for add product tags. + */ + const ADD_PRODUCT_TAGS_ACTION_NAME = 'add_product_tags'; + + /* + * Action name for add product attributes. + */ + const ADD_PRODUCT_ATTRIBUTES_ACTION_NAME = 'add_product_attributes'; + /** * Action name for import products. */ const IMPORT_PRODUCTS_ACTION_NAME = 'import_products'; - + /** * Action name for search. */ @@ -78,30 +93,59 @@ class CustomerEffortScoreTracks { return; } - add_action( - 'admin_init', - array( - $this, - 'maybe_clear_ces_tracks_queue', - ) - ); - - add_action( - 'woocommerce_update_options', - array( - $this, - 'run_on_update_options', - ), - 10, - 3 - ); + add_action( 'admin_init', array( $this, 'maybe_clear_ces_tracks_queue' ) ); + add_action( 'woocommerce_update_options', array( $this, 'run_on_update_options' ), 10, 3 ); + add_action( 'product_cat_add_form', array( $this, 'add_script_track_product_categories' ), 10, 3 ); + add_action( 'product_tag_add_form', array( $this, 'add_script_track_product_tags' ), 10, 3 ); + add_action( 'woocommerce_attribute_added', array( $this, 'run_on_add_product_attributes' ), 10, 3 ); add_action( 'load-edit.php', array( $this, 'run_on_load_edit_php' ), 10, 3 ); - add_action( 'product_page_product_importer', array( $this, 'run_on_product_import' ), 10, 3 ); $this->onsubmit_label = __( 'Thank you for your feedback!', 'woocommerce-admin' ); } + /** + * Returns a generated script for tracking tags added on edit-tags.php page. + * CES survey is triggered via direct access to wc/customer-effort-score store + * via wp.data.dispatch method. + * + * Due to lack of options to directly hook ourselves into the ajax post request + * initiated by edit-tags.php page, we infer a successful request by observing + * an increase of the number of rows in tags table + * + * @param string $action Action name for the survey. + * @param string $label Label for the snackbar. + * + * @return string Generated JavaScript to append to page. + */ + private function get_script_track_edit_php( $action, $label ) { + return sprintf( + "(function( $ ) { + 'use strict'; + // Hook on submit button and sets a 500ms interval function + // to determine successful add tag or otherwise. + $('#addtag #submit').on( 'click', function() { + const initialCount = $('.tags tbody > tr').length; + const interval = setInterval( function() { + if ( $('.tags tbody > tr').length > initialCount ) { + // New tag detected. + clearInterval( interval ); + wp.data.dispatch('wc/customer-effort-score').addCesSurvey( '%s', '%s', window.pagenow, window.adminpage, '%s' ); + } else { + // Form is no longer loading, most likely failed. + if ( $( '#addtag .submit .spinner.is-active' ).length < 1 ) { + clearInterval( interval ); + } + } + }, 500 ); + }); + })( jQuery );", + esc_js( $action ), + esc_js( $label ), + esc_js( $this->onsubmit_label ) + ); + } + /** * Get the current published product count. * @@ -248,6 +292,38 @@ class CustomerEffortScoreTracks { update_option( self::CLEAR_CES_TRACKS_QUEUE_FOR_PAGE_OPTION_NAME, false ); } + /** + * Appends a script to footer to trigger CES on adding product categories. + */ + public function add_script_track_product_categories() { + if ( $this->has_been_shown( self::ADD_PRODUCT_CATEGORIES_ACTION_NAME ) ) { + return; + } + + wc_enqueue_js( + $this->get_script_track_edit_php( + self::ADD_PRODUCT_CATEGORIES_ACTION_NAME, + __( 'How easy was it to add product category?', 'woocommerce-admin' ) + ) + ); + } + + /** + * Appends a script to footer to trigger CES on adding product tags. + */ + public function add_script_track_product_tags() { + if ( $this->has_been_shown( self::ADD_PRODUCT_TAGS_ACTION_NAME ) ) { + return; + } + + wc_enqueue_js( + $this->get_script_track_edit_php( + self::ADD_PRODUCT_TAGS_ACTION_NAME, + __( 'How easy was it to add a product tag?', 'woocommerce-admin' ) + ) + ); + } + /** * Maybe enqueue the CES survey on product import, if step is done. */ @@ -304,6 +380,29 @@ class CustomerEffortScoreTracks { ); } + /** + * Enqueue the CES survey on adding new product attributes. + */ + public function run_on_add_product_attributes() { + if ( $this->has_been_shown( self::ADD_PRODUCT_ATTRIBUTES_ACTION_NAME ) ) { + return; + } + + $this->enqueue_to_ces_tracks( + array( + 'action' => self::ADD_PRODUCT_ATTRIBUTES_ACTION_NAME, + 'label' => __( + 'How easy was it to add a product attribute?', + 'woocommerce-admin' + ), + 'onsubmit_label' => $this->onsubmit_label, + 'pagenow' => 'product_page_product_attributes', + 'adminpage' => 'product_page_product_attributes', + 'props' => (object) array(), + ) + ); + } + /** * Determine on initiating CES survey on searching for product or orders. */