Add navigation item click tracks (https://github.com/woocommerce/woocommerce-admin/pull/5707)

* Add tracking to navigation item clicks

* Track back button click in navigation

plugins/woocommerce-admin/client/navigation/components/Item/index.js

@@ -2,17 +2,30 @@
  * External dependencies
  */
 import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
+import { recordEvent } from '@woocommerce/tracks';
 import { WooNavigationItem, useNavSlot } from '@woocommerce/navigation';
 
 const Item = ( { item } ) => {
 	const slot = useNavSlot( 'woocommerce_navigation_' + item.id );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
+	const trackClick = ( id ) => {
+		recordEvent( 'navigation_click', {
+			menu_item: id,
+		} );
+	};
+
+	// Disable reason: The div wrapping the slot item is used for tracking purposes
+	// and should not be a tabbable element.
+	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+
 	// Only render a slot if a coresponding Fill exists and the item is not a category
 	if ( hasFills && ! item.isCategory ) {
 		return (
 			<NavigationItem key={ item.id } item={ item.id }>
-				<WooNavigationItem.Slot name={ item.id } />
+				<div onClick={ () => trackClick( item.id ) }>
+					<WooNavigationItem.Slot name={ item.id } />
+				</div>
 			</NavigationItem>
 		);
 	}
@@ -24,8 +37,10 @@ const Item = ( { item } ) => {
 			title={ item.title }
 			href={ item.url }
 			navigateToMenu={ ! item.url && item.id }
+			onClick={ () => trackClick( item.id ) }
 		/>
 	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 };
 
 export default Item;

plugins/woocommerce-admin/client/navigation/components/container/index.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/components';
 import { getAdminLink } from '@woocommerce/wc-admin-settings';
 import { NAVIGATION_STORE_NAME } from '@woocommerce/data';
+import { recordEvent } from '@woocommerce/tracks';
 import { withSelect } from '@wordpress/data';
 
 /**
@@ -108,6 +109,12 @@ const Container = ( { menuItems } ) => {
 
 	const navDomRef = useRef( null );
 
+	const trackBackClick = ( id ) => {
+		recordEvent( 'navigation_back_click', {
+			category: id,
+		} );
+	};
+
 	return (
 		<div className="woocommerce-navigation">
 			<Header />
@@ -131,6 +138,7 @@ const Container = ( { menuItems } ) => {
 								'WordPress Dashboard',
 								'woocommerce-navigation'
 							) }
+							onClick={ () => trackBackClick( 'woocommerce' ) }
 						></NavigationBackButton>
 					) }
 					{ categories.map( ( category ) => {
@@ -148,6 +156,9 @@ const Container = ( { menuItems } ) => {
 								backButtonLabel={
 									category.backButtonLabel || null
 								}
+								onBackButtonClick={ () =>
+									trackBackClick( category.id )
+								}
 							>
 								{ !! primaryItems && (
 									<NavigationGroup>
@@ -175,7 +186,11 @@ const Container = ( { menuItems } ) => {
 									</NavigationGroup>
 								) }
 								{ !! secondaryItems && (
-									<NavigationGroup>
+									<NavigationGroup
+										onBackButtonClick={ () =>
+											trackBackClick( category.id )
+										}
+									>
 										{ secondaryItems.map( ( item ) => (
 											<Item
 												key={ item.id }