Marketplace: Add Tracks events to My Subscriptions page (#41455)

* Marketplace: add Tracks events for the subscription page

Added events for:
- marketplace_product_installed
- marketplace_product_install_failed
- marketplace_renew_button_clicked
- marketplace_subscribe_button_clicked
- marketplace_product_updated
- marketplace_product_update_failed

* Marketplace: update Tracks properties

We used to reference product slug only. But may change and if the store
is rate limited, that information is missing. This commit switches
using "product_zip_slug" and "product_id".

* Marketplace: add product version info to update and install Tracks events

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/connect-button.tsx

@@ -4,6 +4,7 @@
 import { Button } from '@wordpress/components';
 import { useContext, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -28,6 +29,11 @@ export default function ConnectButton( props: ConnectProps ) {
 	const { loadSubscriptions } = useContext( SubscriptionsContext );
 
 	const connect = () => {
+		recordEvent( 'marketplace_product_connect_button_clicked', {
+			product_zip_slug: props.subscription.zip_slug,
+			product_id: props.subscription.product_id,
+		} );
+
 		setIsConnecting( true );
 		removeNotice( props.subscription.product_key );
 		connectProduct( props.subscription )

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/install.tsx

@@ -5,6 +5,7 @@ import { Button } from '@wordpress/components';
 import { dispatch, useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -47,6 +48,12 @@ export default function Install( props: InstallProps ) {
 	};
 
 	const install = () => {
+		recordEvent( 'marketplace_product_install_button_clicked', {
+			product_zip_slug: props.subscription.zip_slug,
+			product_id: props.subscription.product_id,
+			product_current_version: props.subscription.version,
+		} );
+
 		startInstall();
 		removeNotice( props.subscription.product_key );
 		installProduct( props.subscription )
@@ -63,6 +70,12 @@ export default function Install( props: InstallProps ) {
 					);
 					stopInstall();
 				} );
+
+				recordEvent( 'marketplace_product_installed', {
+					product_zip_slug: props.subscription.zip_slug,
+					product_id: props.subscription.product_id,
+					product_current_version: props.subscription.version,
+				} );
 			} )
 			.catch( ( error ) => {
 				loadSubscriptions( false ).then( () => {
@@ -89,6 +102,12 @@ export default function Install( props: InstallProps ) {
 					);
 					stopInstall();
 				} );
+
+				recordEvent( 'marketplace_product_install_failed', {
+					product_zip_slug: props.subscription.zip_slug,
+					product_id: props.subscription.product_id,
+					product_current_version: props.subscription.version,
+				} );
 			} );
 	};
 

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/renew-button.tsx

@@ -3,6 +3,7 @@
  */
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { queueRecordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -16,10 +17,18 @@ interface RenewProps {
 }
 
 export default function RenewButton( props: RenewProps ) {
+	function recordTracksEvent() {
+		queueRecordEvent( 'marketplace_renew_button_clicked', {
+			product_zip_slug: props.subscription.zip_slug,
+			product_id: props.subscription.product_id,
+		} );
+	}
+
 	return (
 		<Button
 			href={ renewUrl( props.subscription ) }
 			variant={ props.variant ?? 'secondary' }
+			onClick={ recordTracksEvent }
 		>
 			{ __( 'Renew', 'woocommerce' ) }
 		</Button>

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/subscribe-button.tsx

@@ -3,6 +3,7 @@
  */
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { queueRecordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -16,10 +17,18 @@ interface SubscribeProps {
 }
 
 export default function SubscribeButton( props: SubscribeProps ) {
+	function recordTracksEvent() {
+		queueRecordEvent( 'marketplace_subscribe_button_clicked', {
+			product_zip_slug: props.subscription.zip_slug,
+			product_id: props.subscription.product_id,
+		} );
+	}
+
 	return (
 		<Button
 			href={ subscribeUrl( props.subscription ) }
 			variant={ props.variant ?? 'secondary' }
+			onClick={ recordTracksEvent }
 		>
 			{ __( 'Subscribe', 'woocommerce' ) }
 		</Button>

plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/actions/update.tsx

@@ -4,6 +4,7 @@
 import { Button } from '@wordpress/components';
 import { useContext, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -36,6 +37,13 @@ export default function Update( props: UpdateProps ) {
 		props.subscription.local.path;
 
 	function update() {
+		recordEvent( 'marketplace_product_update_button_clicked', {
+			product_zip_slug: props.subscription.zip_slug,
+			product_id: props.subscription.product_id,
+			product_installed_version: props.subscription.local.installed,
+			product_current_version: props.subscription.version,
+		} );
+
 		if ( ! canUpdate ) {
 			setShowModal( true );
 			return;
@@ -83,6 +91,14 @@ export default function Update( props: UpdateProps ) {
 					);
 					setIsUpdating( false );
 				} );
+
+				recordEvent( 'marketplace_product_updated', {
+					product_zip_slug: props.subscription.zip_slug,
+					product_id: props.subscription.product_id,
+					product_installed_version:
+						props.subscription.local.installed,
+					product_current_version: props.subscription.version,
+				} );
 			} )
 			.catch( () => {
 				addNotice(
@@ -103,6 +119,14 @@ export default function Update( props: UpdateProps ) {
 					}
 				);
 				setIsUpdating( false );
+
+				recordEvent( 'marketplace_product_update_failed', {
+					product_zip_slug: props.subscription.zip_slug,
+					product_id: props.subscription.product_id,
+					product_installed_version:
+						props.subscription.local.installed,
+					product_current_version: props.subscription.version,
+				} );
 			} );
 	}