From 23a6c893cae433c1643dad09124aa142c4541dd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Thu, 16 Apr 2020 10:33:17 -0300 Subject: [PATCH] Update/tracking fix inserter menu no results issue (#41168) * tracking: track Inserter Menu search using Slot * tracking: remove picker-search handler * tracking: register track inserter menu plugin * tracking: track no-results with a temp hacky fix * tracking: add a 7.8.1 fallback * tracking: fix checking plugin version bug * tracking: debug plugin version * tracking: update deendencies in Inserter Menu * Update apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js Co-Authored-By: Dave Smith * tracking: fix typo Co-authored-by: Dave Smith --- apps/wpcom-block-editor/src/wpcom/editor.js | 18 +++ .../tracking/delegate-event-tracking.js | 7 +- .../wpcom-block-picker-search-term-handler.js | 70 ---------- .../wpcom-navigation-menu-search-handler.js | 121 ++++++++++++++++++ 4 files changed, 140 insertions(+), 76 deletions(-) delete mode 100644 apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-picker-search-term-handler.js create mode 100644 apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js diff --git a/apps/wpcom-block-editor/src/wpcom/editor.js b/apps/wpcom-block-editor/src/wpcom/editor.js index d46e0a54a3826..f8be243d225d2 100644 --- a/apps/wpcom-block-editor/src/wpcom/editor.js +++ b/apps/wpcom-block-editor/src/wpcom/editor.js @@ -1,3 +1,13 @@ +/* eslint-disable import/no-extraneous-dependencies */ + +/** + * WordPress dependencies + */ + +import { registerPlugin } from '@wordpress/plugins'; + +/* eslint-enable import/no-extraneous-dependencies */ + /** * Internal dependencies */ @@ -5,3 +15,11 @@ import './features/deprecate-coblocks-buttons'; import './features/fix-block-invalidation-errors'; import './features/reorder-block-categories'; import './features/tracking'; + +import InserterMenuTrackingEvent from './features/tracking/wpcom-navigation-menu-search-handler'; + +registerPlugin( 'track-inserter-menu-events', { + render() { + return ; + }, +} ); diff --git a/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js b/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js index ed77895912a26..7e945553d0d08 100644 --- a/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js +++ b/apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js @@ -6,7 +6,6 @@ import debugFactory from 'debug'; /** * Internal dependencies */ -import wpcomBlockPickerSearchTerm from './wpcom-block-picker-search-term-handler'; import wpcomBlockEditorCloseClick from './wpcom-block-editor-close-click'; import wpcomInserterInlineSearchTerm from './wpcom-inserter-inline-search-term'; @@ -19,11 +18,7 @@ const debug = debugFactory( 'wpcom-block-editor:tracking' ); * * @type {Array} */ -const EVENTS_MAPPING = [ - wpcomBlockEditorCloseClick(), - wpcomBlockPickerSearchTerm(), - wpcomInserterInlineSearchTerm(), -]; +const EVENTS_MAPPING = [ wpcomBlockEditorCloseClick(), wpcomInserterInlineSearchTerm() ]; /** * Checks the event for a selector which matches diff --git a/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-picker-search-term-handler.js b/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-picker-search-term-handler.js deleted file mode 100644 index 8f0e0c947b2aa..0000000000000 --- a/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-block-picker-search-term-handler.js +++ /dev/null @@ -1,70 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ - -/** - * External dependencies - */ -import { debounce } from 'lodash'; -import debug from 'debug'; - -/** - * WordPress dependencies - */ -import { select } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import tracksRecordEvent from './track-record-event'; - -const tracksDebug = debug( 'wpcom-block-editor:analytics:tracks:block-search' ); - -let lastSearchTerm; -const trackSearchTerm = ( event, target ) => { - const key = event.key || event.keyCode; - const search_term = ( target.value || '' ).trim().toLowerCase(); - - if ( lastSearchTerm === search_term && 'Enter' !== key ) { - return tracksDebug( 'Same term: %o, type %o key. Skip.', search_term, key ); - } - lastSearchTerm = search_term; - - if ( search_term.length < 3 ) { - return; - } - - const eventProperties = { - search_term, - context: 'inserter_menu', - }; - - /* - * Populate event properties with `selected_block` - * if there is a selected block in the editor. - */ - const selectedBlock = select( 'core/block-editor' ).getSelectedBlock(); - if ( selectedBlock ) { - eventProperties.selected_block = selectedBlock.name; - } - - tracksRecordEvent( 'wpcom_block_picker_search_term', { ...eventProperties } ); - - // Create a separate event for search with no results to make it easier to filter by them - const hasResults = document.querySelectorAll( '.block-editor-inserter__no-results' ).length === 0; - if ( hasResults ) { - return; - } - - tracksRecordEvent( 'wpcom_block_picker_no_results', { ...eventProperties } ); -}; - -/** - * Return the event definition object to track `wpcom_block_picker_no_results`. - * Also, it tracks `wpcom_block_picker_no_results` is the searcher doesn't return any result. - * - * @returns {{handler: Function, selector: string, type: string}} event object definition. - */ -export default () => ( { - selector: '.block-editor-inserter__search', - type: 'keyup', - handler: debounce( trackSearchTerm, 500 ), -} ); diff --git a/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js b/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js new file mode 100644 index 0000000000000..66fb9a6a32041 --- /dev/null +++ b/apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js @@ -0,0 +1,121 @@ +/* eslint-disable import/no-extraneous-dependencies */ +/** + * External dependencies + */ +import { debounce } from 'lodash'; +import debugFactory from 'debug'; + +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { __experimentalInserterMenuExtension as InserterMenuExtension } from '@wordpress/block-editor'; + +/* eslint-enable import/no-extraneous-dependencies */ + +/** + * Internal dependencies + */ +import tracksRecordEvent from './track-record-event'; + +// let's remove this line once the core version updates. +const debug = debugFactory( 'wpcom-block-editor:tracking:inserter-menu' ); + +const InserterMenuTrackingEvent = function() { + const [ searchTerm, setSearchTerm ] = useState( '' ); + const { selectedBlock } = useSelect( select => ( { + selectedBlock: select( 'core/block-editor' ).getSelectedBlock(), + } ) ); + + const pluginVersion = window.wpcomGutenberg ? window.wpcomGutenberg.pluginVersion : null; + + const debouncedSetFilterValue = debounce( ( search_term, has_items ) => { + setSearchTerm( search_term ); + + if ( search_term.length < 3 ) { + return; + } + + const eventProperties = { + search_term, + context: 'inserter_menu', + selected_block: selectedBlock ? selectedBlock.name : null, + }; + + tracksRecordEvent( 'wpcom_block_picker_search_term', eventProperties ); + + /* + * Let's delegate registering no-results search event + * to the temporary solution below if the core version + * is equal to 7.8.1. + */ + if ( pluginVersion && pluginVersion === '7.8.1' ) { + return null; + } + + // let's remove this line once the core version updates. + debug( '%o: tracking with Slot parameter', pluginVersion ); + + if ( has_items ) { + return; + } + + tracksRecordEvent( 'wpcom_block_picker_no_results', eventProperties ); + }, 500 ); + + /* + * Hacky temporal solution to detect no-results search result. + * Unfortunately, __experimentalInserterMenuExtension has a bug + * in the 7.8.1 core version. + * The `hasItems` property is always true so it isn't possible + * to rely on this value. + * + * @TODO: The following is a temporary solution and it should be removed + * and replaced by the usage of the `hasItems` property, + * once a new version of core is available in dotcom. + */ + useEffect( () => { + // Skip whether isn't the 7.8.1 version. + if ( pluginVersion && pluginVersion !== '7.8.1' ) { + return; + } + // let's remove this line once the core version updates. + debug( '%o: tracking inspecting DOM tree', pluginVersion ); + + if ( ! searchTerm || searchTerm.length < 3 ) { + return; + } + + const eventProperties = { + search_term: searchTerm, + context: 'inserter_menu', + selected_block: selectedBlock ? selectedBlock.name : null, + }; + + const hasResultsEl = document.querySelectorAll( '.block-editor-inserter__results' ); + const hasNoResultsEl = + document.querySelectorAll( '.block-editor-inserter__no-results' ).length !== 0; + + if ( + hasNoResultsEl || + ( hasResultsEl && hasResultsEl[ 0 ] && hasResultsEl[ 0 ].children.length === 0 ) + ) { + tracksRecordEvent( 'wpcom_block_picker_no_results', eventProperties ); + } + }, [ searchTerm, pluginVersion, selectedBlock ] ); + + return ( + + { ( { filterValue, hasItems } ) => { + if ( searchTerm !== filterValue ) { + debouncedSetFilterValue( filterValue, hasItems ); + } + + return null; + } } + + ); +}; + +export default InserterMenuTrackingEvent;