Feature Description

Based on the latest update in Figma when user, who has existing GfW active and connected Ads ID, tries to input same ID manually during the Ads setup, we should show warning and disable the button as shown in the referenced design

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When use tries to add Ads ID, in the manual setup form, that is also connected in Google for WooCommerce plugin new notice is shown bellow the field and complete setup CTA is disabled

Implementation Brief

We need to extract the tag ID from GfW, Evan checked the option, and The tag ID that is put into gtag on the frontend is from the ads_conversion_action option, which is an array that has the tag under conversion_id . See \Automattic\WooCommerce\GoogleListingsAndAds\Google\GlobalSiteTag. This should be exposed in the inline data and retrieved by the selector

• Within the ads PAX setup form component at assets/js/modules/ads/components/setup/SetupFormPAX.js
  • Import the <WarningNotice> component from components, this will be used to render the warning should the input Ads ID be equal to that of the stored/connected Google for WooCommerce one
  • Define a new const, say currentConversionID and store the value if the existing Ads selector, getConversionID(). This value is updated in real time as the user is entering the ID into the text field.
  • Define a new const, say glaConnectedAdsId and store the value of the existing connected Google for WooCommerce Ads ID, if it exists, using the new selector created in Expose GLA conversion ID in the Ads datastore #10274
  • Define a new const, say isDuplicateAdsIdDetected and store a boolean value, checking whether the above two ID's are identical
  • Update the disabled prop condition attached to the <SpinnerButton> component to also include a check for the newly created isDuplicateAdsIdDetected constant, i.e disabled={ ! canSubmitChanges || isSaving || isDuplicateAdsIdDetected}
  • Between the <ConversionIDTextField and <SpinnerButton> components, if isDuplicateAdsIdDetected is true, render a warning notice using the imported <WarningNotice> component:
    • Use the component at assets/js/components/notifications/AdBlockerWarningMessage.js to gauge implementation
    • Add the following wording for the notice:
      • "This Conversion ID is already in use via Google for WooCommerce plugin. We don't recommend adding it in Site Kit, as it may result in inaccurate measurement for your Ads campaign conversions."
      • This notice should not be dismissible in any form
      • This notice should disappear the moment the boolean value of isDuplicateAdsIdDetected is false

Test Coverage

• Update VRT to contain a scenario with the warning message

QA Brief

• Create a non-local site, i.e in InstaWP or TasteWP
• Set up Site Kit with the adsPAX feature flag enabled
• Install WooCommerce
• Install Google for WooCommerce and set it up, linking to an existing Ads account, or creating a new account
• Once set up, navigate to Site Kit > Settings > Connect More Services
• Set up Ads
• When presented with the new Ads setup layout (the split view, with account creation on left, manual input on right), open the web console
• Retrieve the Google for WooCommerce stored AW-ID using the following console command: await googlesitekit.data.select('modules/ads').getGoogleForWooCommerceConversionID()
• Paste that same AW ID into the manual input field
• Validate that the warning notice shows as per the Figma, and that the CTA button is disabled
• Change the value to something else, and validate that the warning message no longer appears, and the button is reenabled

Changelog entry

• Show warning when Google for WooCommerce ads account is enabled.