Add Task List Tracks Events (https://github.com/woocommerce/woocommerce-admin/pull/2991)

* Add Task List Tracks Events

* Add remaining tracks

* Add payment task tracks

* Adjust event prop names

plugins/woocommerce-admin/client/dashboard/task-list/index.js

@@ -25,6 +25,7 @@ import Shipping from './tasks/shipping';
 import Tax from './tasks/tax';
 import Payments from './tasks/payments';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 const { customLogo, hasHomepage, hasProducts, shippingZonesCount } = getSetting( 'onboarding', {
 	customLogo: '',
@@ -37,6 +38,8 @@ class TaskDashboard extends Component {
 	componentDidMount() {
 		document.body.classList.add( 'woocommerce-onboarding' );
 		document.body.classList.add( 'woocommerce-task-dashboard__body' );
+
+		this.recordEvent();
 	}
 
 	componentWillUnmount() {
@@ -44,6 +47,18 @@ class TaskDashboard extends Component {
 		document.body.classList.remove( 'woocommerce-task-dashboard__body' );
 	}
 
+	recordEvent() {
+		if ( this.getCurrentTask() ) {
+			return;
+		}
+		const { profileItems } = this.props;
+		const tasks = filter( this.getTasks(), task => task.visible );
+		recordEvent( 'tasklist_view', {
+			number_tasks: tasks.length,
+			store_connected: profileItems.wccom_connected,
+		} );
+	}
+
 	getTasks() {
 		const { profileItems, query, paymentsCompleted } = this.props;
 

plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js

@@ -22,6 +22,7 @@ import { getSetting, setSetting } from '@woocommerce/wc-admin-settings';
  */
 import { WC_ADMIN_NAMESPACE } from 'wc-api/constants';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 class Appearance extends Component {
 	constructor( props ) {
@@ -137,6 +138,8 @@ class Appearance extends Component {
 		const { createNotice } = this.props;
 		this.setState( { isPending: true } );
 
+		recordEvent( 'tasklist_appearance_create_homepage', { create_homepage: true } );
+
 		apiFetch( { path: '/wc-admin/v1/onboarding/tasks/create_homepage', method: 'POST' } )
 			.then( response => {
 				createNotice( response.status, response.message );
@@ -157,6 +160,8 @@ class Appearance extends Component {
 		const { logo } = this.state;
 		const updateThemeMods = logo ? { ...themeMods, custom_logo: logo.id } : themeMods;
 
+		recordEvent( 'tasklist_appearance_upload_logo' );
+
 		updateOptions( {
 			[ `theme_mods_${ options.stylesheet }` ]: updateThemeMods,
 		} );
@@ -166,6 +171,10 @@ class Appearance extends Component {
 		const { updateOptions } = this.props;
 		const { storeNoticeText } = this.state;
 
+		recordEvent( 'tasklist_appearance_set_store_notice', {
+			added_text: Boolean( storeNoticeText.length ),
+		} );
+
 		updateOptions( {
 			woocommerce_demo_store: storeNoticeText.length ? 'yes' : 'no',
 			woocommerce_demo_store_notice: storeNoticeText,
@@ -208,7 +217,12 @@ class Appearance extends Component {
 						<Button isPrimary onClick={ this.createHomepage }>
 							{ __( 'Create homepage', 'woocommerce-admin' ) }
 						</Button>
-						<Button onClick={ () => this.completeStep() }>
+						<Button
+							onClick={ () => {
+								recordEvent( 'tasklist_appearance_create_homepage', { create_homepage: false } );
+								this.completeStep();
+							} }
+						>
 							{ __( 'Skip', 'woocommerce-admin' ) }
 						</Button>
 					</Fragment>

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js

@@ -14,7 +14,6 @@ import { withDispatch } from '@wordpress/data';
 /**
  * WooCommerce dependencies
  */
-import { getCountryCode } from 'dashboard/utils';
 import { Form, Card, Stepper, List } from '@woocommerce/components';
 import { getAdminLink, getHistory, getNewPath } from '@woocommerce/navigation';
 import { WC_ASSET_URL as wcAssetUrl } from '@woocommerce/wc-admin-settings';
@@ -22,6 +21,8 @@ import { WC_ASSET_URL as wcAssetUrl } from '@woocommerce/wc-admin-settings';
 /**
  * Internal dependencies
  */
+import { recordEvent } from 'lib/tracks';
+import { getCountryCode } from 'dashboard/utils';
 import withSelect from 'wc-api/with-select';
 import Plugins from '../steps/plugins';
 import Stripe from './stripe';
@@ -33,6 +34,7 @@ class Payments extends Component {
 	constructor() {
 		super( ...arguments );
 
+		this.chooseMethods = this.chooseMethods.bind( this );
 		this.completeStep = this.completeStep.bind( this );
 		this.markConfigured = this.markConfigured.bind( this );
 		this.setMethodRequestPending = this.setMethodRequestPending.bind( this );
@@ -197,6 +199,7 @@ class Payments extends Component {
 		const { countryCode, profileItems } = this.props;
 		const methods = [
 			{
+				key: 'stripe',
 				title: __( 'Credit cards - powered by Stripe', 'woocommerce-admin' ),
 				content: (
 					<Fragment>
@@ -213,6 +216,7 @@ class Payments extends Component {
 				visible: true,
 			},
 			{
+				key: 'paypal',
 				title: __( 'PayPal Checkout', 'woocommerce-admin' ),
 				content: (
 					<Fragment>
@@ -227,6 +231,7 @@ class Payments extends Component {
 				visible: true,
 			},
 			{
+				key: 'klarna_checkout',
 				title: __( 'Klarna Checkout', 'woocommerce-admin' ),
 				content: __(
 					'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
@@ -237,6 +242,7 @@ class Payments extends Component {
 				visible: [ 'SE', 'FI', 'NO', 'NL' ].includes( countryCode ),
 			},
 			{
+				key: 'klarna_payments',
 				title: __( 'Klarna Payments', 'woocommerce-admin' ),
 				content: __(
 					'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
@@ -247,6 +253,7 @@ class Payments extends Component {
 				visible: [ 'DK', 'DE', 'AT' ].includes( countryCode ),
 			},
 			{
+				key: 'square',
 				title: __( 'Square', 'woocommerce-admin' ),
 				content: __(
 					'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). ' +
@@ -297,6 +304,21 @@ class Payments extends Component {
 		return keys( pickBy( pluginSlugs ) );
 	}
 
+	chooseMethods() {
+		const methodsDisplayed = this.getMethodOptions().map( method => method.key );
+		const methodsChosen = this.getMethodsToConfigure();
+		const { values } = this.formData;
+		const createAccount = values.create_stripe || false;
+
+		recordEvent( 'wcadmin_tasklist_payment_choose_method', {
+			payment_methods_displayed: methodsDisplayed,
+			payment_methods_chosen: methodsChosen,
+			create_stripe_account: createAccount,
+		} );
+
+		this.completeStep();
+	}
+
 	getSteps() {
 		const { values } = this.formData;
 		const isMethodSelected =
@@ -322,7 +344,7 @@ class Payments extends Component {
 				content: (
 					<Fragment>
 						<List items={ this.getMethodOptions() } />
-						<Button onClick={ this.completeStep } isPrimary disabled={ ! isMethodSelected }>
+						<Button onClick={ this.chooseMethods } isPrimary disabled={ ! isMethodSelected }>
 							{ __( 'Proceed', 'woocommerce-admin' ) }
 						</Button>
 					</Fragment>
@@ -338,7 +360,10 @@ class Payments extends Component {
 				),
 				content: ! showIndividualConfigs && (
 					<Plugins
-						onComplete={ this.completePluginInstall }
+						onComplete={ () => {
+							this.completePluginInstall();
+							recordEvent( 'tasklist_payment_install_method' );
+						} }
 						autoInstall
 						pluginSlugs={ this.getPluginsToInstall() }
 					/>

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/klarna.js

@@ -13,6 +13,11 @@ import interpolateComponents from 'interpolate-components';
 import { ADMIN_URL as adminUrl } from '@woocommerce/wc-admin-settings';
 import { Link } from '@woocommerce/components';
 
+/**
+ * Internal dependencies
+ */
+import { recordEvent } from 'lib/tracks';
+
 class Klarna extends Component {
 	constructor( props ) {
 		super( props );
@@ -21,6 +26,7 @@ class Klarna extends Component {
 
 	continue() {
 		const slug = 'checkout' === this.props.plugin ? 'klarna-checkout' : 'klarna-payments';
+		recordEvent( 'tasklist_payment_connect_method', { payment_method: slug } );
 		this.props.markConfigured( slug );
 		return;
 	}

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js

@@ -17,6 +17,7 @@ import interpolateComponents from 'interpolate-components';
 import { WC_ADMIN_NAMESPACE } from 'wc-api/constants';
 import { Form, Link } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 class PayPal extends Component {
 	constructor( props ) {
@@ -37,6 +38,7 @@ class PayPal extends Component {
 		// Handle redirect back from PayPal
 		if ( query[ 'paypal-connect' ] ) {
 			if ( '1' === query[ 'paypal-connect' ] ) {
+				recordEvent( 'tasklist_payment_connect_method', { payment_method: 'paypal' } );
 				this.props.markConfigured( 'paypal' );
 				this.props.createNotice(
 					'success',
@@ -124,6 +126,7 @@ class PayPal extends Component {
 		} );
 
 		if ( ! isSettingsError ) {
+			recordEvent( 'tasklist_payment_connect_method', { payment_method: 'paypal' } );
 			this.props.setRequestPending( false );
 			markConfigured( 'paypal' );
 			this.props.createNotice(

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/square.js

@@ -15,6 +15,7 @@ import { compose } from '@wordpress/compose';
  */
 import { WC_ADMIN_NAMESPACE } from 'wc-api/constants';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 class Square extends Component {
 	constructor( props ) {
@@ -32,6 +33,7 @@ class Square extends Component {
 		// Handle redirect back from Square
 		if ( query[ 'square-connect' ] ) {
 			if ( '1' === query[ 'square-connect' ] ) {
+				recordEvent( 'tasklist_payment_connect_method', { payment_method: 'square' } );
 				this.props.markConfigured( 'square' );
 				this.props.createNotice(
 					'success',

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js

@@ -19,6 +19,7 @@ import { get } from 'lodash';
 import { Form, Link } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
 import { WCS_NAMESPACE } from 'wc-api/constants';
+import { recordEvent } from 'lib/tracks';
 
 class Stripe extends Component {
 	constructor( props ) {
@@ -46,6 +47,7 @@ class Stripe extends Component {
 			const isStripeConnected = stripeSettings.publishable_key && stripeSettings.secret_key;
 
 			if ( isStripeConnected ) {
+				recordEvent( 'tasklist_payment_connect_method', { payment_method: 'stripe' } );
 				this.props.markConfigured( 'stripe' );
 				this.props.createNotice(
 					'success',
@@ -125,6 +127,7 @@ class Stripe extends Component {
 			} );
 
 			if ( result ) {
+				recordEvent( 'tasklist_payment_connect_method', { payment_method: 'stripe' } );
 				this.props.setRequestPending( false );
 				this.props.markConfigured( 'stripe' );
 				this.props.createNotice(
@@ -223,6 +226,7 @@ class Stripe extends Component {
 		} );
 
 		if ( ! isSettingsError ) {
+			recordEvent( 'tasklist_payment_connect_method', { payment_method: 'stripe' } );
 			this.props.setRequestPending( false );
 			markConfigured( 'stripe' );
 			this.props.createNotice(

plugins/woocommerce-admin/client/dashboard/task-list/tasks/products.js

@@ -11,12 +11,18 @@ import { Component, Fragment } from '@wordpress/element';
 import { Card, List } from '@woocommerce/components';
 import { getAdminLink } from '@woocommerce/navigation';
 
+/**
+ * Internal dependencies
+ */
+import { recordEvent } from 'lib/tracks';
+
 const subTasks = [
 	{
 		title: __( 'Add manually (recommended)', 'woocommerce-admin' ),
 		content: __( 'For small stores we recommend adding products manually', 'woocommerce-admin' ),
 		before: <i className="material-icons-outlined">add_box</i>,
 		after: <i className="material-icons-outlined">chevron_right</i>,
+		onClick: () => recordEvent( 'tasklist_add_product', { method: 'manually' } ),
 		href: getAdminLink( 'post-new.php?post_type=product&wc_onboarding_active_task=products' ),
 	},
 	{
@@ -27,6 +33,7 @@ const subTasks = [
 		),
 		before: <i className="material-icons-outlined">import_export</i>,
 		after: <i className="material-icons-outlined">chevron_right</i>,
+		onClick: () => recordEvent( 'tasklist_add_product', { method: 'import' } ),
 		href: getAdminLink(
 			'edit.php?post_type=product&page=product_importer&wc_onboarding_active_task=products'
 		),
@@ -39,6 +46,7 @@ const subTasks = [
 		),
 		before: <i className="material-icons-outlined">cloud_download</i>,
 		after: <i className="material-icons-outlined">chevron_right</i>,
+		onClick: () => recordEvent( 'tasklist_add_product', { method: 'migrate' } ),
 		// @todo This should be replaced with the in-app purchase iframe when ready.
 		href: 'https://woocommerce.com/products/cart2cart/',
 		target: '_blank',

plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/index.js

@@ -25,6 +25,7 @@ import Plugins from '../steps/plugins';
 import StoreLocation from '../steps/location';
 import ShippingRates from './rates';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 class Shipping extends Component {
 	constructor() {
@@ -148,7 +149,16 @@ class Shipping extends Component {
 				key: 'store_location',
 				label: __( 'Set store location', 'woocommerce-admin' ),
 				description: __( 'The address from which your business operates', 'woocommerce-admin' ),
-				content: <StoreLocation onComplete={ this.completeStep } { ...this.props } />,
+				content: (
+					<StoreLocation
+						onComplete={ values => {
+							const country = getCountryCode( values.countryState );
+							recordEvent( 'tasklist_shipping_set_location', { country } );
+							this.completeStep();
+						} }
+						{ ...this.props }
+					/>
+				),
 				visible: true,
 			},
 			{
@@ -177,8 +187,14 @@ class Shipping extends Component {
 				),
 				content: (
 					<Plugins
-						onComplete={ this.completeStep }
-						onSkip={ () => getHistory().push( getNewPath( {}, '/', {} ) ) }
+						onComplete={ () => {
+							recordEvent( 'tasklist_shipping_label_printing', { install: true } );
+							this.completeStep();
+						} }
+						onSkip={ () => {
+							recordEvent( 'tasklist_shipping_label_printing', { install: false } );
+							getHistory().push( getNewPath( {}, '/', {} ) );
+						} }
 						{ ...this.props }
 					/>
 				),
@@ -191,7 +207,15 @@ class Shipping extends Component {
 					'Connect your store to WordPress.com to enable label printing',
 					'woocommerce-admin'
 				),
-				content: <Connect completeStep={ this.completeStep } { ...this.props } />,
+				content: (
+					<Connect
+						completeStep={ this.completeStep }
+						{ ...this.props }
+						onConnect={ () => {
+							recordEvent( 'tasklist_shipping_connect_store' );
+						} }
+					/>
+				),
 				visible: 'US' === countryCode,
 			},
 		];

plugins/woocommerce-admin/client/dashboard/task-list/tasks/shipping/rates.js

@@ -17,6 +17,11 @@ import { Flag, Form } from '@woocommerce/components';
 import { getCurrencyFormatString } from '@woocommerce/currency';
 import { CURRENCY, getSetting, setSetting } from '@woocommerce/wc-admin-settings';
 
+/**
+ * Internal dependencies
+ */
+import { recordEvent } from 'lib/tracks';
+
 const { symbol, symbolPosition } = CURRENCY;
 
 class ShippingRates extends Component {
@@ -29,7 +34,17 @@ class ShippingRates extends Component {
 	async updateShippingZones( values ) {
 		const { createNotice, shippingZones } = this.props;
 
+		let restOfTheWorld = false;
+		let shippingCost = false;
 		shippingZones.map( zone => {
+			if ( 0 === zone.id ) {
+				restOfTheWorld = zone.toggleEnabled && values[ `${ zone.id }_enabled` ];
+			} else {
+				shippingCost =
+					'' !== values[ `${ zone.id }_rate` ] &&
+					parseFloat( values[ `${ zone.id }_rate` ] ) !== parseFloat( 0 );
+			}
+
 			const flatRateMethods = zone.methods
 				? zone.methods.filter( method => 'flat_rate' === method.method_id )
 				: [];
@@ -73,6 +88,11 @@ class ShippingRates extends Component {
 			}
 		} );
 
+		recordEvent( 'tasklist_shipping_set_costs', {
+			shipping_cost: shippingCost,
+			rest_world: restOfTheWorld,
+		} );
+
 		// @todo This is a workaround to force the task to mark as complete.
 		// This should probably be updated to use wc-api so we can fetch shipping methods.
 		setSetting( 'onboarding', {

plugins/woocommerce-admin/client/dashboard/task-list/tasks/steps/connect.js

@@ -29,7 +29,10 @@ class Connect extends Component {
 	}
 
 	async connectJetpack() {
-		const { jetpackConnectUrl } = this.props;
+		const { jetpackConnectUrl, onConnect } = this.props;
+		if ( onConnect ) {
+			onConnect();
+		}
 		window.location = jetpackConnectUrl;
 	}
 

plugins/woocommerce-admin/client/dashboard/task-list/tasks/steps/location.js

@@ -39,7 +39,7 @@ export default class StoreLocation extends Component {
 		} );
 
 		if ( ! isSettingsError ) {
-			onComplete();
+			onComplete( values );
 		} else {
 			createNotice(
 				'error',

plugins/woocommerce-admin/client/dashboard/task-list/tasks/tax.js

@@ -26,6 +26,7 @@ import { getCountryCode } from 'dashboard/utils';
 import Plugins from './steps/plugins';
 import StoreLocation from './steps/location';
 import withSelect from 'wc-api/with-select';
+import { recordEvent } from 'lib/tracks';
 
 class Tax extends Component {
 	constructor() {
@@ -61,8 +62,9 @@ class Tax extends Component {
 		const { stepIndex } = this.state;
 		const currentStep = this.getSteps()[ stepIndex ];
 		const currentStepKey = currentStep && currentStep.key;
-		const isCompleteAddress =
-			woocommerce_store_address && woocommerce_default_country && woocommerce_store_postcode;
+		const isCompleteAddress = Boolean(
+			woocommerce_store_address && woocommerce_default_country && woocommerce_store_postcode
+		);
 
 		// Show the success screen if all requirements are satisfied from the beginning.
 		if (
@@ -163,7 +165,16 @@ class Tax extends Component {
 						/>
 					</div>
 				</div>
-				<Button isPrimary onClick={ this.updateAutomatedTax } isBusy={ isTaxSettingsRequesting }>
+				<Button
+					isPrimary
+					onClick={ () => {
+						recordEvent( 'tasklist_tax_setup_automated_proceed', {
+							automated_taxes: automatedTaxEnabled,
+						} );
+						this.updateAutomatedTax();
+					} }
+					isBusy={ isTaxSettingsRequesting }
+				>
 					{ __( 'Complete task', 'woocommerce-admin' ) }
 				</Button>
 			</Fragment>
@@ -181,7 +192,11 @@ class Tax extends Component {
 				content: (
 					<StoreLocation
 						{ ...this.props }
-						onComplete={ this.completeStep }
+						onComplete={ values => {
+							const country = getCountryCode( values.countryState );
+							recordEvent( 'tasklist_tax_set_location', { country } );
+							this.completeStep();
+						} }
 						isSettingsRequesting={ isGeneralSettingsRequesting }
 						settings={ generalSettings }
 					/>
@@ -197,12 +212,16 @@ class Tax extends Component {
 				),
 				content: (
 					<Plugins
-						onComplete={ this.completeStep }
-						onSkip={ () =>
-							( window.location.href = getAdminLink(
+						onComplete={ () => {
+							recordEvent( 'tasklist_tax_install_extensions', { install_extensions: true } );
+							this.completeStep();
+						} }
+						onSkip={ () => {
+							recordEvent( 'tasklist_tax_install_extensions', { install_extensions: false } );
+							window.location.href = getAdminLink(
 								'admin.php?page=wc-settings&tab=tax&section=standard'
-							) )
-						}
+							);
+						} }
 						skipText={ __( 'Set up tax rates manually', 'woocommerce-admin' ) }
 					/>
 				),
@@ -215,7 +234,14 @@ class Tax extends Component {
 					'Connect your store to WordPress.com to enable automated sales tax calculations',
 					'woocommerce-admin'
 				),
-				content: <Connect { ...this.props } />,
+				content: (
+					<Connect
+						{ ...this.props }
+						onConnect={ () => {
+							recordEvent( 'tasklist_tax_connect_store' );
+						} }
+					/>
+				),
 				visible: this.isSupportedCountry(),
 			},
 			{
@@ -238,6 +264,9 @@ class Tax extends Component {
 				content: (
 					<Button
 						isPrimary
+						onClick={ () => {
+							recordEvent( 'tasklist_tax_config_rates' );
+						} }
 						href={ getAdminLink( 'admin.php?page=wc-settings&tab=tax&section=standard' ) }
 					>
 						{ __( 'Configure', 'woocommerce-admin' ) }
@@ -290,16 +319,22 @@ class Tax extends Component {
 							</p>
 							<Button
 								isPrimary
-								onClick={ () =>
-									this.setState( { automatedTaxEnabled: true }, this.updateAutomatedTax )
-								}
+								onClick={ () => {
+									recordEvent( 'tasklist_tax_setup_automated_simple', {
+										setup_automatically: true,
+									} );
+									this.setState( { automatedTaxEnabled: true }, this.updateAutomatedTax );
+								} }
 							>
 								{ __( 'Yes please', 'woocommerce-admin' ) }
 							</Button>
 							<Button
-								onClick={ () =>
-									this.setState( { automatedTaxEnabled: false }, this.updateAutomatedTax )
-								}
+								onClick={ () => {
+									recordEvent( 'tasklist_tax_setup_automated_simple', {
+										setup_automatically: false,
+									} );
+									this.setState( { automatedTaxEnabled: false }, this.updateAutomatedTax );
+								} }
 							>
 								{ __( "No thanks, I'll configure taxes manually", 'woocommerce-admin' ) }
 							</Button>