Activity Panel - event tracking improved (https://github.com/woocommerce/woocommerce-admin/pull/4861)

* Added event recording to `ProductStockCard`

This commit adds event recording to `ProductStockCard`

* Added event recording to `OrdersPanel`

This commit adds event recording to the orders panel

* Added event recording to `ReviewsPanel`

This commit adds event recording to the reviews panel

* Added `learn_more` event recording

* Modified orders event names

* Added event 'wcadmin_activity_panel_orders_learn_more' to Orders

* Modified "orders.js" indentation

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js

@@ -34,8 +34,13 @@ import { QUERY_DEFAULTS } from 'wc-api/constants';
 import { DEFAULT_ACTIONABLE_STATUSES } from 'analytics/settings/config';
 import withSelect from 'wc-api/with-select';
 import { CurrencyContext } from 'lib/currency-context';
+import { recordEvent } from 'lib/tracks';
 
 class OrdersPanel extends Component {
+	recordOrderEvent( eventName ) {
+		recordEvent( `activity_panel_orders_${ eventName }`, {} );
+	}
+
 	renderEmptyCard() {
 		const { hasNonActionableOrders } = this.props;
 		if ( hasNonActionableOrders ) {
@@ -68,6 +73,7 @@ class OrdersPanel extends Component {
 					<Button
 						href="https://docs.woocommerce.com/document/managing-orders/"
 						isSecondary
+						onClick={ () => this.recordOrderEvent( 'learn_more' ) }
 						target="_blank"
 					>
 						{ __( 'Learn more', 'woocommerce-admin' ) }
@@ -146,6 +152,9 @@ class OrdersPanel extends Component {
 									href={ getAdminLink(
 										'post.php?action=edit&post=' + orderId
 									) }
+									onClick={ () =>
+										this.recordOrderEvent( 'order_number' )
+									}
 									type="wp-admin"
 								/>
 							),
@@ -156,7 +165,13 @@ class OrdersPanel extends Component {
 								/>
 							) : null,
 							customerLink: customerUrl ? (
-								<Link href={ customerUrl } type="wc-admin" />
+								<Link
+									href={ customerUrl }
+									onClick={ () =>
+										this.recordOrderEvent( 'customer_name' )
+									}
+									type="wc-admin"
+								/>
 							) : (
 								<span />
 							),
@@ -204,6 +219,11 @@ class OrdersPanel extends Component {
 							href={ getAdminLink(
 								'post.php?action=edit&post=' + order.order_id
 							) }
+							onClick={ () =>
+								this.recordOrderEvent(
+									'orders_begin_fulfillment'
+								)
+							}
 						>
 							{ __( 'Begin fulfillment' ) }
 						</Button>
@@ -219,7 +239,10 @@ class OrdersPanel extends Component {
 		return (
 			<Fragment>
 				{ cards }
-				<ActivityOutboundLink href={ 'edit.php?post_type=shop_order' }>
+				<ActivityOutboundLink
+					href={ 'edit.php?post_type=shop_order' }
+					onClick={ () => this.recordOrderEvent( 'orders_manage' ) }
+				>
 					{ __( 'Manage all orders', 'woocommerce-admin' ) }
 				</ActivityOutboundLink>
 			</Fragment>

plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js

@@ -40,6 +40,10 @@ class ReviewsPanel extends Component {
 		this.mountTime = new Date().getTime();
 	}
 
+	recordReviewEvent( eventName ) {
+		recordEvent( `activity_panel_reviews_${ eventName }`, {} );
+	}
+
 	renderReview( review, props ) {
 		const { lastRead } = props;
 		const product =
@@ -64,11 +68,16 @@ class ReviewsPanel extends Component {
 			),
 			components: {
 				productLink: (
-					<Link href={ product.permalink } type="external" />
+					<Link
+						href={ product.permalink }
+						onClick={ () => this.recordReviewEvent( 'product' ) }
+						type="external"
+					/>
 				),
 				authorLink: (
 					<Link
 						href={ 'mailto:' + review.reviewer_email }
+						onClick={ () => this.recordReviewEvent( 'customer' ) }
 						type="external"
 					/>
 				),
@@ -158,6 +167,7 @@ class ReviewsPanel extends Component {
 		let buttonTarget = '';
 		let buttonText = '';
 		let content = '';
+		let eventName = 'learn_more';
 
 		if ( lastApprovedReviewTime ) {
 			const now = new Date();
@@ -198,6 +208,7 @@ class ReviewsPanel extends Component {
 						) }
 					</p>
 				);
+				eventName = 'view_reviews';
 			}
 		} else {
 			buttonUrl =
@@ -232,6 +243,7 @@ class ReviewsPanel extends Component {
 						href={ buttonUrl }
 						target={ buttonTarget }
 						isSecondary
+						onClick={ () => this.recordReviewEvent( eventName ) }
 					>
 						{ buttonText }
 					</Button>

plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js

@@ -20,6 +20,7 @@ import { getSetting } from '@woocommerce/wc-admin-settings';
  * Internal dependencies
  */
 import { ActivityCard } from '../../activity-card';
+import { recordEvent } from 'lib/tracks';
 
 class ProductStockCard extends Component {
 	constructor( props ) {
@@ -37,6 +38,10 @@ class ProductStockCard extends Component {
 		this.onSubmit = this.onSubmit.bind( this );
 	}
 
+	recordStockEvent( eventName, eventProps = {} ) {
+		recordEvent( `activity_panel_stock_${ eventName }`, eventProps );
+	}
+
 	beginEdit() {
 		const { product } = this.props;
 
@@ -51,6 +56,7 @@ class ProductStockCard extends Component {
 				}
 			}
 		);
+		this.recordStockEvent( 'update_stock' );
 	}
 
 	cancelEdit() {
@@ -60,6 +66,7 @@ class ProductStockCard extends Component {
 			editing: false,
 			quantity: product.stock_quantity,
 		} );
+		this.recordStockEvent( 'cancel' );
 	}
 
 	handleKeyDown( event ) {
@@ -79,6 +86,9 @@ class ProductStockCard extends Component {
 		this.setState( { editing: false, edited: true } );
 
 		updateProductStock( product, quantity );
+		this.recordStockEvent( 'save', {
+			quantity,
+		} );
 	}
 
 	getActions() {
@@ -158,6 +168,7 @@ class ProductStockCard extends Component {
 					'post.php?action=edit&post=' +
 					( product.parent_id || product.id )
 				}
+				onClick={ () => this.recordStockEvent( 'product_name' ) }
 				type="wp-admin"
 			>
 				{ product.name }