Merge pull request woocommerce/woocommerce-admin#2633 from woocommerce/add/2604-tracks-priority-2

Add priority 2 Tracks events

plugins/woocommerce-admin/client/analytics/components/report-filters/index.js

@@ -54,6 +54,9 @@ export default class ReportFilters extends Component {
 			case 'clear_all':
 				recordEvent( 'analytics_filters_clear_all', { report } );
 				break;
+			case 'match':
+				recordEvent( 'analytics_filters_all_any', { report, value: data.match } );
+				break;
 		}
 	}
 

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -38,11 +38,13 @@ class ReportTable extends Component {
 
 		this.onColumnsChange = this.onColumnsChange.bind( this );
 		this.onPageChange = this.onPageChange.bind( this );
+		this.onSort = this.onSort.bind( this );
 		this.scrollPointRef = createRef();
+		this.trackTableSearch = this.trackTableSearch.bind( this );
 	}
 
-	onColumnsChange( shownColumns ) {
-		const { columnPrefsKey, getHeadersContent, updateCurrentUserData } = this.props;
+	onColumnsChange( shownColumns, toggledColumn ) {
+		const { columnPrefsKey, endpoint, getHeadersContent, updateCurrentUserData } = this.props;
 		const columns = getHeadersContent().map( header => header.key );
 		const hiddenColumns = columns.filter( column => ! shownColumns.includes( column ) );
 
@@ -52,6 +54,16 @@ class ReportTable extends Component {
 			};
 			updateCurrentUserData( userDataFields );
 		}
+
+		if ( toggledColumn ) {
+			const eventProps = {
+				report: endpoint,
+				column: toggledColumn,
+				status: shownColumns.includes( toggledColumn ) ? 'on' : 'off',
+			};
+
+			recordEvent( 'analytics_table_header_toggle', eventProps );
+		}
 	}
 
 	onPageChange() {
@@ -66,6 +78,26 @@ class ReportTable extends Component {
 		}
 	}
 
+	trackTableSearch() {
+		const { endpoint } = this.props;
+
+		// @todo: decide if this should only fire for new tokens (not any/all changes).
+		recordEvent( 'analytics_table_filter', { report: endpoint } );
+	}
+
+	onSort( key, direction ) {
+		onQueryChange( 'sort' )( key, direction );
+
+		const { endpoint } = this.props;
+		const eventProps = {
+			report: endpoint,
+			column: key,
+			direction,
+		};
+
+		recordEvent( 'analytics_table_sort', eventProps );
+	}
+
 	filterShownHeaders( headers, hiddenKeys ) {
 		if ( ! hiddenKeys || ! hiddenKeys.length ) {
 			return headers;
@@ -150,6 +182,8 @@ class ReportTable extends Component {
 					isLoading={ isLoading }
 					onQueryChange={ onQueryChange }
 					onColumnsChange={ this.onColumnsChange }
+					onSearch={ this.trackTableSearch }
+					onSort={ this.onSort }
 					onPageChange={ this.onPageChange }
 					rows={ rows }
 					rowsPerPage={ parseInt( query.per_page ) || QUERY_DEFAULTS.pageSize }

plugins/woocommerce-admin/client/header/index.js

@@ -19,6 +19,7 @@ import { Link } from '@woocommerce/components';
  */
 import './style.scss';
 import ActivityPanel from './activity-panel';
+import { recordEvent } from 'lib/tracks';
 
 class Header extends Component {
 	constructor() {
@@ -29,6 +30,7 @@ class Header extends Component {
 
 		this.onWindowScroll = this.onWindowScroll.bind( this );
 		this.updateIsScrolled = this.updateIsScrolled.bind( this );
+		this.trackLinkClick = this.trackLinkClick.bind( this );
 	}
 
 	componentDidMount() {
@@ -55,6 +57,12 @@ class Header extends Component {
 		}
 	}
 
+	trackLinkClick( event ) {
+		const href = event.target.closest( 'a' ).getAttribute( 'href' );
+
+		recordEvent( 'navbar_breadcrumb_click', { href, text: event.target.innerText } );
+	}
+
 	render() {
 		const { sections, isEmbedded } = this.props;
 		const { isScrolled } = this.state;
@@ -83,7 +91,11 @@ class Header extends Component {
 			<div className={ className }>
 				<h1 className="woocommerce-layout__header-breadcrumbs">
 					<span>
-						<Link href={ 'admin.php?page=wc-admin' } type={ isEmbedded ? 'wp-admin' : 'wc-admin' }>
+						<Link
+							href={ 'admin.php?page=wc-admin' }
+							type={ isEmbedded ? 'wp-admin' : 'wc-admin' }
+							onClick={ this.trackLinkClick }
+						>
 							WooCommerce
 						</Link>
 					</span>
@@ -92,6 +104,7 @@ class Header extends Component {
 							<Link
 								href={ isEmbedded ? section[ 0 ] : getNewPath( {}, section[ 0 ], {} ) }
 								type={ isEmbedded ? 'wp-admin' : 'wc-admin' }
+								onClick={ this.trackLinkClick }
 							>
 								{ section[ 1 ] }
 							</Link>

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,5 +1,7 @@
 # unreleased
 - SearchListItem component: new `countLabel` prop that will overwrite the `item.count` value.
+- AdvancedFilters component: fire `onAdvancedFilterAction` for match changes.
+- TableCard component: add `onSearch` an `onSort` function props.
 - Add new component `<List />` for displaying interactive list items.
 
 # 3.1.0

plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js

@@ -75,7 +75,11 @@ class AdvancedFilters extends Component {
 	}
 
 	onMatchChange( match ) {
+		const { onAdvancedFilterAction } = this.props;
+
 		this.setState( { match } );
+
+		onAdvancedFilterAction( 'match', { match } );
 	}
 
 	onFilterChange( key, property, value ) {

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -54,7 +54,7 @@ class TableCard extends Component {
 		this.onClickDownload = this.onClickDownload.bind( this );
 		this.onCompare = this.onCompare.bind( this );
 		this.onPageChange = this.onPageChange.bind( this );
-		this.onSearch = this.onSearch.bind( this );
+		this.onSearchChange = this.onSearchChange.bind( this );
 		this.selectRow = this.selectRow.bind( this );
 		this.selectAllRows = this.selectAllRows.bind( this );
 	}
@@ -128,12 +128,12 @@ class TableCard extends Component {
 					}
 
 					const showCols = without( prevState.showCols, key );
-					onColumnsChange( showCols );
+					onColumnsChange( showCols, key );
 					return { showCols };
 				}
 
 				const showCols = [ ...prevState.showCols, key ];
-				onColumnsChange( showCols );
+				onColumnsChange( showCols, key );
 				return { showCols };
 			} );
 		};
@@ -179,8 +179,13 @@ class TableCard extends Component {
 		}
 	}
 
-	onSearch( values ) {
-		const { compareParam, searchBy, baseSearchQuery } = this.props;
+	onSearchChange( values ) {
+		const {
+			baseSearchQuery,
+			compareParam,
+			onSearch,
+			searchBy,
+		} = this.props;
 		// A comma is used as a separator between search terms, so we want to escape
 		// any comma they contain.
 		const labels = values.map( v => v.label.replace( ',', '%2C' ) );
@@ -197,6 +202,8 @@ class TableCard extends Component {
 				search: undefined,
 			} );
 		}
+
+		onSearch( values );
 	}
 
 	selectAllRows( event ) {
@@ -266,6 +273,7 @@ class TableCard extends Component {
 			isLoading,
 			onClickDownload,
 			onQueryChange,
+			onSort,
 			query,
 			rowHeader,
 			rowsPerPage,
@@ -317,7 +325,7 @@ class TableCard extends Component {
 							allowFreeTextSearch={ true }
 							inlineTags
 							key="search"
-							onChange={ this.onSearch }
+							onChange={ this.onSearchChange }
 							placeholder={ labels.placeholder || __( 'Search by item name', 'woocommerce-admin' ) }
 							selected={ searchedLabels }
 							showClearButton={ true }
@@ -376,7 +384,6 @@ class TableCard extends Component {
 							rowHeader={ rowHeader }
 							caption={ title }
 							query={ query }
-							onSort={ onQueryChange( 'sort' ) }
 						/>
 					</Fragment>
 				) : (
@@ -386,7 +393,7 @@ class TableCard extends Component {
 						rowHeader={ rowHeader }
 						caption={ title }
 						query={ query }
-						onSort={ onQueryChange( 'sort' ) }
+						onSort={ onSort || onQueryChange( 'sort' ) }
 					/>
 				) }
 
@@ -453,6 +460,14 @@ TableCard.propTypes = {
 	 * A function which returns a callback function which is called upon the user changing the visiblity of columns.
 	 */
 	onColumnsChange: PropTypes.func,
+	/**
+	 * A function which is called upon the user searching in the table header.
+	 */
+	onSearch: PropTypes.func,
+	/**
+	 * A function which is called upon the user changing the sorting of the table.
+	 */
+	onSort: PropTypes.func,
 	/**
 	 * Whether the table must be downloadable. If true, the download button will appear.
 	 */
@@ -522,6 +537,8 @@ TableCard.defaultProps = {
 	isLoading: false,
 	onQueryChange: noop,
 	onColumnsChange: noop,
+	onSearch: noop,
+	onSort: undefined,
 	query: {},
 	rowHeader: 0,
 	rows: [],