Update Channel Visibility meta box UI to match the latest designs by ankitrox · Pull Request #3262 · woocommerce/google-listings-and-ads

ankitrox · 2026-02-19T13:07:45Z

Changes proposed in this Pull Request:

Closes: https://linear.app/a8c/issue/GOOWOO-450/update-channel-visibility-meta-box-ui-to-match-the-latest-designs

Screenshots:

Detailed test instructions:

Enabled Woo Usage Tracking.
Open the browser console and run the following so that events are logged: localStorage.setItem( 'debug', 'wc-admin:*' );
Go to the detail page of a product under Woocommerce > Products
Based on the visibility of the block (see Acceptance criteria) it should trigger the following events upon load and click.
Events that are fired:

On component visible:
- Event name: gla_google_ads_promo_shown
- Context: channel-visibility-meta-box
On Create campaign CTA click:
- Event name: gla_google_ads_promo_create_campaign_click
- Context: channel-visibility-meta-box
- Link: The CTA URL
On Get started CTA click:
- Event name: gla_google_ads_promo_get_started_click
- Context: channel-visibility-meta-box
- Link: The CTA URL
On Dismiss Link click:
- Event name: gla_google_ads_promo_dismiss_click
- Context: channel-visibility-meta-box

Ensure the events are fired as per the AC.
Ensure the settings persist upon saving or updating products
Component functionality and layout should match the designs from the ACs

Additional details:

Changelog entry

codecov · 2026-02-19T13:13:25Z

Codecov Report

❌ Patch coverage is 0% with 23 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.7%. Comparing base (3a2489a) to head (fa8df1c).
⚠️ Report is 12 commits behind head on feature/in-product-placements.

Files with missing lines	Patch %	Lines
src/Admin/Admin.php	0.0%	22 Missing ⚠️
views/meta-box/channel_visibility.php	0.0%	1 Missing ⚠️

Additional details and impacted files

@@                        Coverage Diff                        @@
##             feature/in-product-placements   #3262     +/-   ##
=================================================================
+ Coverage                             66.3%   66.7%   +0.5%     
- Complexity                            5118    5119      +1     
=================================================================
  Files                                  507     868    +361     
  Lines                                20390   26249   +5859     
  Branches                                 0    1477   +1477     
=================================================================
+ Hits                                 13515   17518   +4003     
- Misses                                6875    8558   +1683     
- Partials                                 0     173    +173

Flag	Coverage Δ
js-unit-tests	`67.9% <ø> (?)`
php-unit-tests	`66.4% <0.0%> (+0.1%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
views/meta-box/channel_visibility.php	`0.0% <0.0%> (ø)`
src/Admin/Admin.php	`0.0% <0.0%> (ø)`

... and 361 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

asvinb

@AlejandroPerezMartin Can you kindly check my comment please? Also, if you can merge the latest from feature/in-product-placements and merge any conflicts please.

js/src/meta-boxes/channel-visibility/get-started-cta.js

js/src/meta-boxes/channel-visibility/google-ads-promo-cta.js

js/src/meta-boxes/channel-visibility/google-ads-promo-setup-completed.js

js/src/meta-boxes/channel-visibility/index.js

js/src/meta-boxes/channel-visibility/google-ads-promo.scss

…king-events GOOWOO-461 Add channel visibility box tracking

…/google-listings-and-ads into update/GOOWOO-450-metabox-ui

…e/google-listings-and-ads into update/GOOWOO-450-metabox-ui

…ible

asvinb

@AlejandroPerezMartin I left some comments in the PR. Can you kindly check them out please? Also there are a few things missing:

@fires JS Docs for events
updating the tracking doc via npm run doc:tracking
When I select a value from the select, hits the update button, the value is not persisted upon page refresh
Update the test instructions please.

js/src/utils/tracks.js

js/src/meta-boxes/channel-visibility/get-started-cta.js

asvinb · 2026-02-27T09:51:00Z

js/src/meta-boxes/channel-visibility/channel-visibility-settings.js

+
+const GoogleAdsPromoSetupCompleted = () => {
+	const [ channelVisibility, setChannelVisibility ] = useState(
+		product_is_visible ? channel_visibility : 'dont-sync-and-show'


@AlejandroPerezMartin Why this condition is tied to whether the product is visible? 🤔 ?

I took that logic from https://github.com/woocommerce/google-listings-and-ads/blob/develop/views/meta-box/channel_visibility.php#L43-L48

@AlejandroPerezMartin Any chance of not hard coding the 'dont-sync-and-show' value?

don't think so, same logic and issues was in the php version, there's no way to know that unless we get rid of that logic

js/src/meta-boxes/channel-visibility/google-ads-promo-setup-completed.js

js/src/meta-boxes/channel-visibility/google-ads-promo.js

js/src/meta-boxes/channel-visibility/constants.js

asvinb · 2026-03-04T09:06:53Z

js/src/meta-boxes/channel-visibility/get-started-cta.js

+ * Google Ads Promo "Get started" button is clicked.
+ *
+ * @event gla_google_ads_promo_create_campaign_click
+ * @property {string} context Context of the Google Ads Promo.


@AlejandroPerezMartin Let's add the context name here since we already know the value.

it's already present a few lines below in the event definition https://github.com/woocommerce/google-listings-and-ads/pull/3262/changes/BASE..1a81b54f8b1cfb2adfa8a2305763322231e3683d#diff-ec3e9904fae879de706865a6905899dfeeea6ecd2f92fa94dd221ad081c3e546R24

asvinb · 2026-03-04T09:10:14Z

js/src/meta-boxes/channel-visibility/get-started-cta.js

+/**
+ * Get Started CTA component.
+ *
+ * @fires gla_google_ads_promo_create_campaign_click with `{ context: CHANNEL_VISIBILITY_CONTEXT, href: getGetStartedUrl() }`.


@AlejandroPerezMartin Let's use the values here instead of the CHANNEL_VISIBILITY_CONTEXT and the getGetStartedUrl() function. Also there's a typo in the function name.

asvinb · 2026-03-04T09:10:51Z

js/src/meta-boxes/channel-visibility/google-ads-promo-cta.js

+/**
+ * Google Ads Promo CTA component.
+ *
+ * @fires gla_google_ads_promo_dismiss_click with `{ context: CHANNEL_VISIBILITY_CONTEXT }`.


See my note above.

asvinb · 2026-03-04T09:12:58Z

js/src/meta-boxes/channel-visibility/channel-visibility-settings.js

+
+const GoogleAdsPromoSetupCompleted = () => {
+	const [ channelVisibility, setChannelVisibility ] = useState(
+		product_is_visible ? channel_visibility : 'dont-sync-and-show'


@AlejandroPerezMartin Any chance of not hard coding the 'dont-sync-and-show' value?

asvinb · 2026-03-04T09:20:53Z

js/src/meta-boxes/channel-visibility/google-ads-promo.js

+ *
+ * @fires gla_google_ads_promo_shown with `{ context: CHANNEL_VISIBILITY_CONTEXT }`.
+ *
+ * @return {JSX.Element|null} The Google Ads Promo component or null.


@AlejandroPerezMartin Is the comment up to date since I don't see the component returning null 🤔

asvinb · 2026-03-04T09:21:56Z

js/src/meta-boxes/channel-visibility/index.js

+import { glaData } from '~/constants';
+
+const GoogleAdsPromo = lazy( () =>
+	import( /* webpackChunkName: "google-ads-promo" */ './google-ads-promo' )


Suggested change

import( /* webpackChunkName: "google-ads-promo" */ './google-ads-promo' )

import( /* webpackChunkName: "channel-visibility-google-ads-promo" */ './google-ads-promo' )

Just so that there's no conflict with the order attribution one.

asvinb · 2026-03-04T09:23:50Z

js/src/meta-boxes/channel-visibility/google-ads-promo-setup-completed.js

+	} = {},
+} = glaData || {};
+
+const GoogleAdsPromoSetupCompleted = () => {


@AlejandroPerezMartin Let's add some JSDocs explaining when this component is rendered.

asvinb · 2026-03-04T09:27:40Z

js/src/meta-boxes/channel-visibility/google-ads-promo-cta.js

+ *
+ * @return {JSX.Element} The Google Ads Promo CTA component.
+ */
+const GoogleAdsPromoCTA = ( { onDismiss } ) => {


@AlejandroPerezMartin I feel having GoogleAds in the component name is redundant. Can we just name it PromoCTA or PromoActions? Same thing applies to GoogleAdsPromoSetupCompleted component. I feel the GoogleAds prefix is unecessary.

asvinb · 2026-03-04T09:29:48Z

js/src/meta-boxes/channel-visibility/google-ads-promo-setup-completed.js

+	} = {},
+} = glaData || {};
+
+const GoogleAdsPromoSetupCompleted = () => {


@AlejandroPerezMartin Also maybe we should rename the component to ChannelVisibilitySettings.

Add metabox UI.

27f9e57

github-actions bot added the changelog: update Big changes to something that wasn't broken. label Feb 19, 2026

ankitrox added 5 commits February 19, 2026 19:45

Restructure the component.

5bde7d2

Remove redundant code.

10d1e21

Update select control.

9da1977

Update bundle size.

ae363af

Add webpack config.

4605f8c

Base automatically changed from update/GOOWOO-456-expose-campaign-creation-state to feature/in-product-placements February 20, 2026 11:39

AlejandroPerezMartin added 3 commits February 24, 2026 14:29

Format code

73a5b0c

Reorder imports

374f239

Add tracking to channel visibility meta box

816976e

asvinb requested changes Feb 25, 2026

View reviewed changes

AlejandroPerezMartin and others added 10 commits February 25, 2026 13:07

Minor tweaks

a5a87ea

Merge pull request #3270 from woocommerce/feature/GOOWOO-461-add-trac…

84d803d

…king-events GOOWOO-461 Add channel visibility box tracking

Merge branch 'update/GOOWOO-450-metabox-ui' of github.com:woocommerce…

0b278ed

…/google-listings-and-ads into update/GOOWOO-450-metabox-ui

Merge branch 'feature/in-product-placements' of github.com:woocommerc…

ace52d0

…e/google-listings-and-ads into update/GOOWOO-450-metabox-ui

Layout and styling tweaks

7b8ae8b

Remove hardcoded data and use channel visibility function

c0a5523

Render issues

157ac2d

Show issues only when setup completed. Add message if product not vis…

852aa79

…ible

Disable select if product not visible

4a2f868

Remove unused php logic

171026f

AlejandroPerezMartin requested a review from asvinb February 26, 2026 12:46

asvinb requested changes Feb 27, 2026

View reviewed changes

AlejandroPerezMartin added 5 commits February 27, 2026 11:55

Use issue as key in map

fc1f865

Move constants to separate file, update jsdoc

3ddb5a9

Dynamically load available options for channel visibility

d3a16e3

Dynamically use field id

ec7fbe2

Undo changes

1a81b54

AlejandroPerezMartin requested a review from asvinb February 27, 2026 11:51

asvinb requested changes Mar 4, 2026

View reviewed changes

AlejandroPerezMartin added 2 commits March 4, 2026 14:37

Rename constant, update events

5c6f922

Refactor component names

fa8df1c

AlejandroPerezMartin requested a review from asvinb March 4, 2026 13:52

	import( /* webpackChunkName: "google-ads-promo" */ './google-ads-promo' )
	import( /* webpackChunkName: "channel-visibility-google-ads-promo" */ './google-ads-promo' )

Conversation

ankitrox commented Feb 19, 2026 • edited by AlejandroPerezMartin Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Screenshots:

Detailed test instructions:

Additional details:

Changelog entry

Uh oh!

codecov bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

asvinb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

asvinb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlejandroPerezMartin Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ankitrox commented Feb 19, 2026 •

edited by AlejandroPerezMartin

Loading

codecov bot commented Feb 19, 2026 •

edited

Loading

AlejandroPerezMartin Mar 4, 2026 •

edited

Loading