Tracks: Add dashboard events

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

@@ -21,6 +21,7 @@ import './style.scss';
 import defaultSections from './default-sections';
 import Section from './section';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 class CustomizableDashboard extends Component {
 	constructor( props ) {
@@ -102,6 +103,10 @@ class CustomizableDashboard extends Component {
 			toggledSection.isVisible = ! toggledSection.isVisible;
 			sections.push( toggledSection );
 
+			if ( ! toggledSection.isVisible ) {
+				recordEvent( 'dash_section_remove', { key: toggledSection.key } );
+			}
+
 			this.updateSections( sections );
 		};
 	}

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

@@ -23,6 +23,7 @@ import { getAllowedIntervalsForQuery } from '@woocommerce/date';
 import ChartBlock from './block';
 import { uniqCharts } from './config';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 import './style.scss';
 
 class DashboardCharts extends Component {
@@ -66,13 +67,21 @@ class DashboardCharts extends Component {
 					<Fragment>
 						<MenuTitle>{ __( 'Charts', 'woocommerce-admin' ) }</MenuTitle>
 						{ uniqCharts.map( chart => {
+							const key = chart.endpoint + '_' + chart.key;
+							const checked = ! hiddenBlocks.includes( key );
 							return (
 								<MenuItem
-									checked={ ! hiddenBlocks.includes( chart.endpoint + '_' + chart.key ) }
+									checked={ checked }
 									isCheckbox
 									isClickable
 									key={ chart.endpoint + '_' + chart.key }
-									onInvoke={ () => onToggleHiddenBlock( chart.endpoint + '_' + chart.key )() }
+									onInvoke={ () => {
+										onToggleHiddenBlock( key )();
+										recordEvent( 'dash_charts_chart_toggle', {
+											status: checked ? 'off' : 'on',
+											key,
+										} );
+									} }
 								>
 									{ __( `${ chart.label }`, 'woocommerce-admin' ) }
 								</MenuItem>

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

@@ -19,6 +19,7 @@ import { EllipsisMenu, MenuItem, MenuTitle, SectionHeader } from '@woocommerce/c
  */
 import Leaderboard from 'analytics/components/leaderboard';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 import './style.scss';
 
 class Leaderboards extends Component {
@@ -64,13 +65,20 @@ class Leaderboards extends Component {
 					<Fragment>
 						<MenuTitle>{ __( 'Leaderboards', 'woocommerce-admin' ) }</MenuTitle>
 						{ allLeaderboards.map( leaderboard => {
+							const checked = ! hiddenBlocks.includes( leaderboard.id );
 							return (
 								<MenuItem
-									checked={ ! hiddenBlocks.includes( leaderboard.id ) }
+									checked={ checked }
 									isCheckbox
 									isClickable
 									key={ leaderboard.id }
-									onInvoke={ () => onToggleHiddenBlock( leaderboard.id )() }
+									onInvoke={ () => {
+										onToggleHiddenBlock( leaderboard.id )();
+										recordEvent( 'dash_leaderboards_toggle', {
+											status: checked ? 'off' : 'on',
+											key: leaderboard.id,
+										} );
+									} }
 								>
 									{ leaderboard.label }
 								</MenuItem>

plugins/woocommerce-admin/client/dashboard/store-performance/index.js

@@ -31,6 +31,7 @@ import {
 } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
 import './style.scss';
+import { recordEvent } from 'lib/tracks';
 
 class StorePerformance extends Component {
 	renderMenu() {
@@ -65,7 +66,13 @@ class StorePerformance extends Component {
 									isCheckbox
 									isClickable
 									key={ i }
-									onInvoke={ () => onToggleHiddenBlock( indicator.stat )() }
+									onInvoke={ () => {
+										onToggleHiddenBlock( indicator.stat )();
+										recordEvent( 'dash_indicators_toggle', {
+											status: checked ? 'off' : 'on',
+											key: indicator.stat,
+										} );
+									} }
 								>
 									{ sprintf( __( 'Show %s', 'woocommerce-admin' ), indicator.label ) }
 								</MenuItem>
@@ -152,6 +159,9 @@ class StorePerformance extends Component {
 								prevLabel={ prevLabel }
 								prevValue={ secondaryValue }
 								delta={ delta }
+								onLinkClickCallback={ () => {
+									recordEvent( 'dash_indicators_click', { key: indicator.stat } );
+								} }
 							/>
 						);
 					} )