Merge pull request woocommerce/woocommerce-admin#2638 from woocommerce/add/2605-tracks-priority-3

Add priority 3 Tracks events

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

@@ -66,7 +66,8 @@ class ReportTable extends Component {
 		}
 	}
 
-	onPageChange() {
+	onPageChange( newPage, source ) {
+		const { endpoint } = this.props;
 		this.scrollPointRef.current.scrollIntoView();
 		const tableElement = this.scrollPointRef.current.nextSibling.querySelector(
 			'.woocommerce-table__table'
@@ -76,6 +77,14 @@ class ReportTable extends Component {
 		if ( focusableElements.length ) {
 			focusableElements[ 0 ].focus();
 		}
+
+		if ( source ) {
+			if ( 'goto' === source ) {
+				recordEvent( 'analytics_table_go_to_page', { report: endpoint, page: newPage } );
+			} else {
+				recordEvent( 'analytics_table_page_click', { report: endpoint, direction: source } );
+			}
+		}
 	}
 
 	trackTableSearch() {

plugins/woocommerce-admin/client/analytics/settings/historical-data/index.js

@@ -14,6 +14,7 @@ import { withSpokenMessages } from '@wordpress/components';
  */
 import { formatParams } from './utils';
 import HistoricalDataLayout from './layout';
+import { recordEvent } from 'lib/tracks';
 
 class HistoricalData extends Component {
 	constructor() {
@@ -96,6 +97,7 @@ class HistoricalData extends Component {
 		this.setState( {
 			activeImport: false,
 		} );
+		recordEvent( 'analytics_import_delete_previous' );
 	}
 
 	onReimportData() {

plugins/woocommerce-admin/client/analytics/settings/index.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { remove } from 'lodash';
+import { partial, remove, transform } from 'lodash';
 import { withDispatch } from '@wordpress/data';
 
 /**
@@ -22,6 +22,7 @@ import { analyticsSettings } from './config';
 import Setting from './setting';
 import HistoricalData from './historical-data';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 const SETTINGS_FILTER = 'woocommerce_admin_analytics_settings';
 
@@ -79,7 +80,7 @@ class Settings extends Component {
 		) {
 			const settings = {};
 			analyticsSettings.forEach( setting => ( settings[ setting.name ] = setting.defaultValue ) );
-			this.setState( { settings }, this.saveChanges );
+			this.setState( { settings }, partial( this.saveChanges, 'reset' ) );
 		}
 	};
 
@@ -125,9 +126,23 @@ class Settings extends Component {
 		} );
 	}
 
-	saveChanges = () => {
+	saveChanges = source => {
+		const { settings } = this.state;
 		this.persistChanges( this.state );
-		this.props.updateSettings( { wc_admin: this.state.settings } );
+		this.props.updateSettings( { wc_admin: settings } );
+
+		if ( 'reset' === source ) {
+			recordEvent( 'analytics_settings_reset_defaults' );
+		} else {
+			const eventProps = transform(
+				analyticsSettings,
+				( props, setting ) => {
+					props[ setting.name ] = settings[ setting.name ];
+				},
+				{}
+			);
+			recordEvent( 'analytics_settings_save', eventProps );
+		}
 
 		// TODO: remove this optimistic set of isDirty to false once #2541 is resolved.
 		this.setState( { saving: true, isDirty: false } );

plugins/woocommerce-admin/client/dashboard/customizable.js

@@ -86,6 +86,7 @@ class CustomizableDashboard extends Component {
 
 	onSectionTitleUpdate( updatedKey ) {
 		return updatedTitle => {
+			recordEvent( 'dash_section_rename', { key: updatedKey } );
 			this.updateSection( updatedKey, { title: updatedTitle } );
 		};
 	}
@@ -103,7 +104,9 @@ class CustomizableDashboard extends Component {
 			toggledSection.isVisible = ! toggledSection.isVisible;
 			sections.push( toggledSection );
 
-			if ( ! toggledSection.isVisible ) {
+			if ( toggledSection.isVisible ) {
+				recordEvent( 'dash_section_add', { key: toggledSection.key } );
+			} else {
 				recordEvent( 'dash_section_remove', { key: toggledSection.key } );
 			}
 
@@ -127,6 +130,12 @@ class CustomizableDashboard extends Component {
 			// Yes, lets insert.
 			sections.splice( newIndex, 0, movedSection );
 			this.updateSections( sections );
+
+			const eventProps = {
+				key: movedSection.key,
+				direction: 0 < change ? 'down' : 'up',
+			};
+			recordEvent( 'dash_section_order_change', eventProps );
 		} else {
 			// No, lets try the next one.
 			this.onMove( index, change + change );

plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js

@@ -43,6 +43,7 @@ class DashboardCharts extends Component {
 				[ 'dashboard_chart_type' ]: chartType,
 			};
 			this.props.updateCurrentUserData( userDataFields );
+			recordEvent( 'dash_charts_type_toggle', { chart_type: chartType } );
 		};
 	}
 
@@ -139,6 +140,7 @@ class DashboardCharts extends Component {
 				[ 'dashboard_chart_interval' ]: this.state.interval,
 			};
 			this.props.updateCurrentUserData( userDataFields );
+			recordEvent( 'dash_charts_interval', { interval } );
 		} );
 	};
 

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

@@ -38,7 +38,7 @@ class Pagination extends Component {
 		if ( page - 1 < 1 ) {
 			return;
 		}
-		onPageChange( page - 1 );
+		onPageChange( page - 1, 'previous' );
 	}
 
 	nextPage( event ) {
@@ -47,7 +47,7 @@ class Pagination extends Component {
 		if ( page + 1 > this.pageCount ) {
 			return;
 		}
-		onPageChange( page + 1 );
+		onPageChange( page + 1, 'next' );
 	}
 
 	perPageChange( perPage ) {
@@ -71,7 +71,7 @@ class Pagination extends Component {
 		const newPage = parseInt( event.target.value, 10 );
 
 		if ( newPage !== page && isFinite( newPage ) && newPage > 0 && this.pageCount && this.pageCount >= newPage ) {
-			onPageChange( newPage );
+			onPageChange( newPage, 'goto' );
 		}
 	}