Commit 3b815f2cace for woocommerce
commit 3b815f2cace2b646f874efeb8b50ff9d75e87ca7
Author: Cem Ünalan <raicem@users.noreply.github.com>
Date: Thu Oct 8 16:15:30 2026 +0300
Send Marketplace card click events when they happen (#69565)
* WOOMKT-830: Record Marketplace card clicks when they happen
Card, vendor and preview events were queued and only sent on the next
wc-admin page view. The queue was added when card links opened
WooCommerce.com in the same tab. They open a new tab now, so the admin
page stays loaded and the events can be sent right away. The click is
the exposure event for the product preview A/B test, so it needs the
real click time.
* Add changelog entry for Marketplace card click tracking
* Use recordEvent in the product preview experiment tests
Trunk added these tests while the card still used queueRecordEvent; this branch switched the card to recordEvent.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---------
Co-authored-by: Herman <KokkieH@users.noreply.github.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/WOOMKT-830-card-click-tracking b/plugins/woocommerce/changelog/WOOMKT-830-card-click-tracking
new file mode 100644
index 00000000000..bedd7f49312
--- /dev/null
+++ b/plugins/woocommerce/changelog/WOOMKT-830-card-click-tracking
@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Send in-app Marketplace card and preview Tracks events on click instead of the next page view.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
index d390ddb5bc9..02c8170dca2 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.tsx
@@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Card } from '@wordpress/components';
import clsx from 'clsx';
-import { ExtraProperties, queueRecordEvent } from '@woocommerce/tracks';
+import { ExtraProperties, recordEvent } from '@woocommerce/tracks';
import { useQuery } from '@woocommerce/navigation';
import { decodeEntities } from '@wordpress/html-entities';
import { useState, useContext, useRef } from '@wordpress/element';
@@ -157,7 +157,7 @@ function ProductCard( props: ProductCardProps ): React.JSX.Element {
data.tab = query.tab || 'discover';
- queueRecordEvent( event, data );
+ recordEvent( event, data );
}
const screenReaderText = (
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx
index 24320f305a9..f10110ba71f 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/test/product-card.test.tsx
@@ -3,7 +3,7 @@
*/
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
-import { queueRecordEvent } from '@woocommerce/tracks';
+import { recordEvent } from '@woocommerce/tracks';
jest.mock( '@woocommerce/navigation', () => ( {
getNewPath: jest.fn( () => '/new-path' ),
@@ -13,7 +13,6 @@ jest.mock( '@woocommerce/navigation', () => ( {
jest.mock( '@woocommerce/tracks', () => ( {
recordEvent: jest.fn(),
- queueRecordEvent: jest.fn(),
} ) );
// The preview modal loads its own data; these tests only care about the card.
@@ -221,7 +220,7 @@ describe( 'ProductCard sponsored label', () => {
describe( 'ProductCard click tracking', () => {
beforeEach( () => {
- jest.mocked( queueRecordEvent ).mockClear();
+ jest.mocked( recordEvent ).mockClear();
} );
function clickCard(
@@ -239,7 +238,7 @@ describe( 'ProductCard click tracking', () => {
// A click records exactly one event, and the mock is cleared before each test.
function cardClickEvents() {
- return jest.mocked( queueRecordEvent ).mock.calls;
+ return jest.mocked( recordEvent ).mock.calls;
}
it( 'reports the badge when the card shows one', () => {
@@ -303,7 +302,7 @@ describe( 'ProductCard product preview experiment', () => {
const productUrl = 'https://woocommerce.com/products/test-extension/';
beforeEach( () => {
- jest.mocked( queueRecordEvent ).mockClear();
+ jest.mocked( recordEvent ).mockClear();
} );
it.each( [
@@ -387,7 +386,7 @@ describe( 'ProductCard product preview experiment', () => {
// fireEvent returns false when the click's default action was prevented.
expect( fireEvent.click( link ) ).toBe( opensProductPage );
expect(
- jest.mocked( queueRecordEvent ).mock.calls[ 0 ][ 1 ]
+ jest.mocked( recordEvent ).mock.calls[ 0 ][ 1 ]
?.preview_variation
).toBe( tag );
expect( link ).toHaveAttribute(