Commit e896dfd85d3 for woocommerce
commit e896dfd85d3d1593fc5d1408c0a804ac8592938e
Author: Poli Gilad <83961704+poligilad-auto@users.noreply.github.com>
Date: Tue Jul 7 10:07:47 2026 +0200
Add Woo Home click tracking to Things to do next tasks (#66125)
* Add click tracking to Things to do next tasks
* Use role queries for task list click tests
* Rename task click event to task_click for present-tense consistency
---------
Co-authored-by: Miroslav Mitev <m1r0@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/add-whats-next-task-click-tracking b/plugins/woocommerce/changelog/add-whats-next-task-click-tracking
new file mode 100644
index 00000000000..0bd13b04d06
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-whats-next-task-click-tracking
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add click tracking for the Things to do next task list.
diff --git a/plugins/woocommerce/client/admin/client/task-lists/components/task-list-item.tsx b/plugins/woocommerce/client/admin/client/task-lists/components/task-list-item.tsx
index d69c1a717cc..62d7bbd5271 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/components/task-list-item.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/components/task-list-item.tsx
@@ -27,6 +27,7 @@ export type TaskListItemProps = {
task: TaskType & {
onClick?: () => void;
};
+ trackClick?: () => void;
};
export const TaskListItem = ( {
@@ -34,6 +35,7 @@ export const TaskListItem = ( {
isExpanded = false,
setExpandedTask,
task,
+ trackClick: trackTaskListClick,
}: TaskListItemProps ) => {
const { createNotice } = useDispatch( 'core/notices' );
const { layoutString } = useLayoutContext();
@@ -166,6 +168,7 @@ export const TaskListItem = ( {
const onClickActions = (
event?: React.MouseEvent | React.KeyboardEvent
) => {
+ trackTaskListClick?.();
trackClick().then( () => {
if ( ! isComplete ) {
// Invalidate the task list selector cache to force a re-fetch.
@@ -200,7 +203,10 @@ export const TaskListItem = ( {
onClick={
! isExpandable || isComplete
? onClickActions
- : () => setExpandedTask( id )
+ : () => {
+ trackTaskListClick?.();
+ setExpandedTask( id );
+ }
}
/>
);
@@ -214,6 +220,7 @@ export const TaskListItem = ( {
actionLabel,
isExpandable,
isComplete,
+ trackTaskListClick,
]
);
diff --git a/plugins/woocommerce/client/admin/client/task-lists/components/task-list.tsx b/plugins/woocommerce/client/admin/client/task-lists/components/task-list.tsx
index 424135526b1..833f02815f5 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/components/task-list.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/components/task-list.tsx
@@ -69,6 +69,15 @@ export const TaskList = ( {
} );
};
+ const trackClick = ( task: TaskListProps[ 'tasks' ][ number ] ) => {
+ recordEvent( eventPrefix + 'task_click', {
+ task_name: task.id,
+ task_complete: task.isComplete,
+ task_dismissed: task.isDismissed,
+ context: layoutString,
+ } );
+ };
+
useEffect( () => {
recordTaskListView();
}, [] );
@@ -106,6 +115,7 @@ export const TaskList = ( {
isExpandable={ isExpandable }
task={ task }
setExpandedTask={ setExpandedTask }
+ trackClick={ () => trackClick( task ) }
/>
) );
diff --git a/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list-item.test.tsx b/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list-item.test.tsx
index a432f9fc540..01a378f8a43 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list-item.test.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list-item.test.tsx
@@ -208,6 +208,49 @@ describe( 'TaskListItem', () => {
} );
} );
+ it( 'should call trackClick when clicking tasklist item', () => {
+ const trackClick = jest.fn();
+ render(
+ <TaskListItem
+ task={ { ...task } }
+ isExpandable={ false }
+ isExpanded={ false }
+ setExpandedTask={ () => {} }
+ trackClick={ trackClick }
+ />
+ );
+
+ act( () => {
+ userEvent.click( screen.getByText( task.title ) );
+ } );
+
+ expect( trackClick ).toHaveBeenCalledTimes( 1 );
+ } );
+
+ it( 'should call trackClick before expanding expandable tasklist item', () => {
+ const trackClick = jest.fn();
+ const setExpandedTask = jest.fn();
+ render(
+ <TaskListItem
+ task={ { ...task } }
+ isExpandable={ true }
+ isExpanded={ false }
+ setExpandedTask={ setExpandedTask }
+ trackClick={ trackClick }
+ />
+ );
+
+ act( () => {
+ userEvent.click( screen.getByText( task.title ) );
+ } );
+
+ expect( trackClick ).toHaveBeenCalledTimes( 1 );
+ expect( setExpandedTask ).toHaveBeenCalledWith( task.id );
+ expect( trackClick.mock.invocationCallOrder[ 0 ] ).toBeLessThan(
+ setExpandedTask.mock.invocationCallOrder[ 0 ]
+ );
+ } );
+
it( 'should not call dismissTask when isDismissable is set to false', () => {
const { queryByRole } = render(
<TaskListItem
diff --git a/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list.test.tsx b/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list.test.tsx
index bf0ae3b32e8..2d966a5723c 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list.test.tsx
+++ b/plugins/woocommerce/client/admin/client/task-lists/components/test/task-list.test.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
import { recordEvent } from '@woocommerce/tracks';
import { TaskType } from '@woocommerce/data';
@@ -16,7 +16,7 @@ jest.mock( '@woocommerce/tracks', () => ( {
} ) );
jest.mock( '../task-list-item', () => ( {
TaskListItem: ( props: TaskListItemProps ) => (
- <div>{ props.task.title }</div>
+ <button onClick={ props.trackClick }>{ props.task.title }</button>
),
} ) );
jest.mock( '../task-list-menu', () => ( {
@@ -256,4 +256,68 @@ describe( 'TaskList', () => {
queryByText( dismissedTask[ 0 ].title )
).not.toBeInTheDocument();
} );
+
+ it( 'should fire extended tasklist task clicked event when a task is clicked', () => {
+ const { getByRole } = render(
+ <TaskList
+ id="extended"
+ eventPrefix="extended_tasklist_"
+ tasks={ [ ...tasks.extension ] }
+ title="List title"
+ query={ {} }
+ isVisible={ true }
+ isHidden={ false }
+ isComplete={ false }
+ displayProgressHeader={ false }
+ keepCompletedTaskList="no"
+ />
+ );
+
+ ( recordEvent as jest.Mock ).mockClear();
+
+ fireEvent.click(
+ getByRole( 'button', { name: tasks.extension[ 0 ].title } )
+ );
+
+ expect( recordEvent ).toHaveBeenCalledWith(
+ 'extended_tasklist_task_click',
+ {
+ task_name: 'extension',
+ task_complete: false,
+ task_dismissed: false,
+ context: 'home',
+ }
+ );
+ } );
+
+ it( 'should include task_complete when a completed task is clicked', () => {
+ const { getByRole } = render(
+ <TaskList
+ id="extended"
+ eventPrefix="extended_tasklist_"
+ tasks={ [ tasks.setup[ 2 ] ] }
+ title="List title"
+ query={ {} }
+ isVisible={ true }
+ isHidden={ false }
+ isComplete={ false }
+ displayProgressHeader={ false }
+ keepCompletedTaskList="no"
+ />
+ );
+
+ ( recordEvent as jest.Mock ).mockClear();
+
+ fireEvent.click(
+ getByRole( 'button', { name: tasks.setup[ 2 ].title } )
+ );
+
+ expect( recordEvent ).toHaveBeenCalledWith(
+ 'extended_tasklist_task_click',
+ expect.objectContaining( {
+ task_name: 'completed',
+ task_complete: true,
+ } )
+ );
+ } );
} );