Updates to the Ads Module Setup CTA Banner for WooCommerce Redirect

[10upsimon]

Feature Description

The Ads Module Setup CTA banner, while implemented at some stage and then temporarily reverted, will require updates in the following areas in order to support the WooCommerce Redirect epic:

• The Ads Module Setup CTA Banner should be adapted to use the new notifications API.
• The Ads Module Setup CTA Banner will only surface to users with the adsPAX feature flag enabled.
• WooCommerce redirect modal trigger logic will need to be added for the following scenarios:
  • Users with WooCommerce active but not yet using Google for WooCommerce
  • Users with both WooCommerce & Google for WooCommerce active but not yet having an Ads account link via Google for WooCommerce
  • In both of the above scenarios, the WooCommerce redirect modal should be triggered, with the user only proceeding to Ads setup when choosing the secondary CTA ("Continue with Site Kit")
• For scenarios where Google for WooCommerce is active and an exiting Ads account is detected as linked to it, the contents of the banner should change entirely to that of a Subtle Notification banner as per the Figma designs. The creation of this Subtle Notification banner variant is covered in issue Creation of Subtle Notification component for Existing Google for WooCommerce Ads Users #10176
• Dynamic setup banner title, description and CTA's will need to be added for users who already have an Ads account linked to Google for WooCommerce:
  • The title should change accordingly as per the designs
  • The description should change accordingly as per the designs
  • The CTA's should change accordingly as per the designs, the primary CTA taking the user to the Google for WooCommerce merchant setup/connection screen
  • A WooCommerce redirect modal will not be triggered in this case, but the modal should be considered dismissed if this Ads Setup CTA banner has been viewed in this scenario
  • See example banner below:

• For users who have an AdBlocker enabled, the contents of the banner will need to change accordingly so as to inform the user that they'll need to disable said AdBlocker in order to set up the Ads module. See example banner below:

See Figma designs here. See the relevant section of the design document, "Amendments to the Ads Module Setup CTA Banner
".

---

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

Acceptance criteria

• The Ads Module Setup CTA Banner component is added matching the Figma designs
• It only surfaces to users with the adsPAX feature flag who did not setup Ads module yet, and no detected Ads linked to Google for WooCommerce
  • So it shouldn't show when WooCommerce & Google for WooCommerce are installed and active and an Ads account is detected as linked to it
• The Ads Module Setup CTA Banner component triggers the WooCommerce redirect modal for users satisfying the following criteria:
  • WooCommerce is installed and active, but not Google for WooCommerce
  • WooCommerce & Google for WooCommerce are installed and active, but an existing ads account linked to Google for WooCommerce is not detected
• The applicable AdBlocker notice is added to the Ads Module Setup CTA Banner when an AdBlocker is detected, as per this Figma design
• See the relevant section of the design document, "Amendments to the Ads Module Setup CTA Banner
  ".

Implementation Brief

• Update assets/js/components/notifications/AdsModuleSetupCTAWidget.js
  • Existing banner should be refactored to work with new notifications API
  • You can check assets/js/modules/reader-revenue-manager/components/dashboard/ReaderRevenueManagerSetupCTABanner.js and assets/js/components/notifications/FirstPartyModeSetupBanner.js for an example
  • Include id and Notification in the props
  • Wrap the output with Notification component
  • Use NotificationWithSVG component for the banner
    • For description use createInterpolateElement to render learn more link with the description
    • Use actions prop to include CTA's, by using ActionsCTALinkDismiss component
      • onCTAClick should use existing onSetupCallback callback
      • For dismissLabel use isNotificationDismissalFinal from CORE_NOTIFICATIONS datastore, to check whether to show 'Don’t show again' or Maybe later labels. You can see how to implement this by looking for isDismissalFinal and dismiss count logic in assets/js/modules/reader-revenue-manager/components/dashboard/ReaderRevenueManagerSetupCTABanner.js
      • For dismissExpires use default 2 * WEEK_IN_SECONDS
      • onDismiss callback is not needed
  • Banner should match the Figma designs referenced in the AC
  • Remove existing onDismiss and dismissal logic that is handled automatically by new notification components, and remove the conditional rendering of the component
  • Check if ads blocker is active, using isAdBlockerActive selector from CORE_USER store, and if it is, render the message (using AdBlockerWarning component) as part of the description prop in NotificationWithSVG, and prevent the primary CTA Set up Ads from being executed - skip callback being invoked
    • Update the messaging in the current getAdBlockerWarningMessage selector in assets/js/modules/ads/datastore/adblocker.js to match the one from Figma
    • Do the same in assets/js/modules/adsense/datastore/adblocker.js, only keep the module name AdSense
  • Update onSetupCallback, it should not invoke any action if shouldShowWooCommerceRedirectModal selector from CORE_SITE is true
    • Otherwise it should continue with module setup hook
  • Include modal from Creation of <WooCommerceRedirectModal> Modal Component #10172, and using dialogActive prop, pass the value of shouldShowWooCommerceRedirectModal selector
• In assets/js/modules/ads/index.js
  • Register new banner under registerNotifications function
  • For areaSlug use NOTIFICATION_AREAS.BANNERS_BELOW_NAV
  • For groupID use NOTIFICATION_GROUPS.SETUP_CTAS
  • Use default priority - 10
  • Use only VIEW_CONTEXT_MAIN_DASHBOARD for the viewContexts
  • For isDismissible use true and include dismissRetries with value 1
  • Add featureFlag property with value of adsPax
  • In checkRequirements
    • Check if Ads module is already setup using isModuleActive selector from CORE_MODULES datastore, and if it is, return early. Note that isModuleActive has a resolver, so you should use resolveSelect to retrieve the value
    • Check if isWooCommerceActive, isGoogleForWooCommerceActive and isGoogleForWooCommerceAdsAccountLinked selectors added in Create New Ads Module Datastore Partial for Plugin Detection Selectors #10170 are all returning true, to prevent rendering the notification - return false early. Otherwise it should return true by default
    • You will need to resolve (use resolveSelect) getModuleData selector from MODULES_ADS datastore for data to be available on time the conditions are checked for the above selectors

Test Coverage

• Add checkRequirements test coverage for new banner

QA Brief

• Setup Site Kit with adsPax feature flag enabled
• Verify that setup Ads CTA is showing only when:
  • Feature flag is enabled and Ads module is not setup

CTA behaviour:

(Clicking Continue with Site Kit in the modal should continue to setup module screen in all cases)

• Scenario 1
  • Activate WooCommerce, verify that Set up Ads CTA triggers a modal
    • Clicking the Use Google for WooCommerce should take you to install plugins screen with Google For WooCommerce pre-populated as first result
• Scenario 2
  • Activate both Woo And GfW plugins - but do not connect ads account
  • Verify that Set up Ads triggers modal
    • Clicking the Use Google for WooCommerce should take you to the GfW google dashboard
• Scenario 3
  • Activate both Woo and GfW plugins, and setup GfW, connecting the ads account
  • Verify that setup Ads banner is not showing
• Scenario 4
  • Ensure no Woo, or GfW is active
  • Verify that Set up Ads CTA is triggering Ads module setup - taking you to the setup module screen without opening popup

Enabling Ad blocker should show the notice as included in Figma

Note: make sure you clean both _googlesitekitpersistent_dismissed_items and _googlesitekitpersistent_dismissed_prompts to force banner to re-appear after being dismissed

Changelog entry

[10upsimon]

@zutigrm this mostly LGTM, just a few very minor observations:

For dismissLabel use isDismissalFinal to check whether to show 'Don’t show again' or Maybe later labels.

Let's maybe be clear that this requires the use of the isNotificationDismissalFinal selector from the CORE_NOTIFICATIONS store?

Check if ads blocker is active, using isAdBlockerActive selector from CORE_USER store, and if it is, render the message as part of the description prop in NotificationWithSVG, and prevent the primary CTA Set up Ads from being executed - skip callback being invoked

This is quite vague, and does not really speak to the actual requirement of how to implement the warning style message/inline notification etc. We have an <AdBlockerWarning> component that can be used to render here, and it handles the messaging and learn more link automatically. I did, however, notice that the AdBlocker warning message we have in the Ads store, differs from that in the Figma.

In the store, it reads "Ad blocker detected; please disable it to set up Ads" whereas in the Figma is reads "To set up Ads you will need to disable your Ad blocker.". We should probably standardize this, OR add a new selector specific to AdBlocker messaging for the Setup CTA Banner, it may be worth pinging @sigal-teller about this.

[zutigrm]

Thanks @10upsimon IB updated

[10upsimon]

Thank you @zutigrm , LGTM ✅ Moving to EB.