From bfc1721c691b6fcdbe2e690ad9c72e3131ca6e30 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Tue, 29 Oct 2019 10:08:39 +0800
Subject: [PATCH] Onboarding: Add task view and product import track events
 (https://github.com/woocommerce/woocommerce-admin/pull/3115)

---
 .../client/dashboard/task-list/index.js       | 26 +++++++++++++++++--
 .../dashboard/task-list/tasks/appearance.js   |  2 ++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/index.js b/plugins/woocommerce-admin/client/dashboard/task-list/index.js
index cb0940a677e..70deda77974 100644
--- a/plugins/woocommerce-admin/client/dashboard/task-list/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/task-list/index.js
@@ -29,7 +29,8 @@ class TaskDashboard extends Component {
 		document.body.classList.add( 'woocommerce-onboarding' );
 		document.body.classList.add( 'woocommerce-task-dashboard__body' );
 
-		this.recordEvent();
+		this.recordTaskView();
+		this.recordTaskListView();
 
 		if ( this.props.inline ) {
 			this.props.updateOptions( {
@@ -38,12 +39,33 @@ class TaskDashboard extends Component {
 		}
 	}
 
+	componentDidUpdate( prevProps ) {
+		const { task } = this.props.query;
+		const { task: prevTask } = prevProps.query;
+
+		if ( prevTask !== task ) {
+			this.recordTaskView();
+		}
+	}
+
 	componentWillUnmount() {
 		document.body.classList.remove( 'woocommerce-onboarding' );
 		document.body.classList.remove( 'woocommerce-task-dashboard__body' );
 	}
 
-	recordEvent() {
+	recordTaskView() {
+		const { task } = this.props.query;
+
+		if ( ! task ) {
+			return;
+		}
+
+		recordEvent( 'task_view', {
+			task_name: task,
+		} );
+	}
+
+	recordTaskListView() {
 		if ( this.getCurrentTask() ) {
 			return;
 		}
diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js
index d272429e42f..d9f492f12ff 100644
--- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js
+++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js
@@ -104,6 +104,8 @@ class Appearance extends Component {
 		const { createNotice } = this.props;
 		this.setState( { isPending: true } );
 
+		recordEvent( 'tasklist_appearance_import_demo', {} );
+
 		apiFetch( {
 			path: `${ WC_ADMIN_NAMESPACE }/onboarding/tasks/import_sample_products`,
 			method: 'POST',