Introduce Ad Blocking Recovery Setup CTA in the AdSense Module settings

[kuasha420]

Feature Description

Once a user has a fully ready AdSense setup, there should be a Setup Ad Blocking Recovery tags CTA in the Module Settings of Adsense. This should appear below everything else in Settings View, and above the "Confirm Changes" and "Cancel" buttons in Settings Edit as seen in the Figma design.

This CTA is non dismissible and should appear right after the AdSense Setup is complete (eg. the status is 'ready' (it should not wait 3 weeks to display like the main dashboard notification introduced in #6953). This will only go away after user completes setting up the feature.

---

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

Acceptance criteria

• When Ad Blocking Recovery is not set up (ie. adBlockingRecoverySetupStatus is an empty string), the Ad Blocking Recovery CTA should appear in both Settings View and Settings Edit screen of AdSense Settings, as seen in the Figma design.
• This should only appear when both account and site status is ready.
  • However, note that unlike the main notification CTA, there is no requirements about days after the setup completion. It will appear right away.
• It should look exactly as seen in the design, including the icon, New badge, layout, margin, padding and typography.
• Clicking on the CTA button will take user to the Ad Blocking Recovery setup screen. ie. googlesitekit-ad-blocking-recovery.

Implementation Brief

Creating the AdBlockingRecoveryCTA component

In assets/js/modules/adsense/components/common, create a new component called AdBlockingRecoveryCTA with the following:

• Get the adBlockingRecoverySetupStatus using the getAdBlockingRecoverySetupStatus selector.
• Get the accountStatus and siteStatus using the getAccountStatus and getSiteStatus selectors.
• Render the SettingsNotice component with the following props only if the adBlockingRecoverySetupStatus is an empty string and both accountStatus and siteStatus are ready:
  • notice - Create a child component called AdBlockingRecoveryCTANotice with the following:
    • Render the title Ad blocking recovery and the NewBadge component inline.
    • The description Start recovering revenue lost from ad blockers by deploying the ad blocking tag through Site Kit. Learn more in a new line.
    • Use the SupportLink component for the Learn more link. Pass adsense/answer/11576589 as the path prop.
  • Pass the AdBlockingRecoveryCTANotice component to the notice prop.
  • CTA -
    • Render the Button component with the Set up now copy.
    • Get the URL for the Set up now button using the getAdminURL selector and pass googlesitekit-ad-blocking-recovery as an argument.
    • Pass the above URL as the href prop of the Button component.
• Create a new SCSS file for the styling: assets/sass/components/settings/_googlesitekit-settings-ad-blocking-recovery-notice.scss.
• The styles should be exactly as seen in the Figma design, including the icon, New badge, layout, margin, padding, and typography.
• Add storybook stories for the component.

Rendering the AdBlockingRecoveryCTA component

• In assets/js/modules/adsense/components/settings/SettingsView.js, render the AdBlockingRecoveryCTA component as the last child.
• In assets/js/modules/adsense/components/settings/SettingsForm.js, render the AdBlockingRecoveryCTA component as the last child.

Test Coverage

• Add basic test coverage for the component.
• Add VRT scenarios for the new stories.

QA Brief

• Set up Adsense module.
• Ensure the adBlockerDetection feature flag is enabled.
• Ensure the adBlockingRecoverySetupStatus is an empty string.
• Ensure the accountStatus and siteStatus are ready.
• This can be simulated by setting the accountStatus and siteStatus to ready. Execute the following in the browser console:

googlesitekit.data.dispatch('modules/adsense').setAdBlockingRecoverySetupStatus('')
googlesitekit.data.dispatch('modules/adsense').setAccountStatus('ready')
googlesitekit.data.dispatch('modules/adsense').setSiteStatus('ready')
googlesitekit.data.dispatch('modules/adsense').saveSettings()

• Ensure the CTA appears in both Settings View and Settings Edit screen of AdSense Settings.
• Ensure the CTA is non dismissible.
• Ensure the CTA does not appear when the adBlockingRecoverySetupStatus is not an empty string or when either accountStatus or siteStatus is not ready.

Changelog entry

• Add the new Ad Blocking Recovery CTA to the AdSense module settings.

[tofumatt]

ACs here are good, moving to IB 👍🏻

[techanvil]

Thanks @hussain-t, the IB LGTM. I made a minor tweak to the SCSS filename and added a point to create VRT scenarios for the new stories.

IB ✅

[eugene-manuilov]

@hussain-t, I merged your PR but then figured out that we forgot to check whether the adBlockerDetection feature flag is enabled in the AdBlockingRecoveryCTA component. Could you please create a follow up PR that adds a check for that feature flag?

[hussain-t]

Thanks for catching it, @eugene-manuilov, even though it wasn't specified in the AC. I have created a follow-up PR and assigned this back to you for CR.

[eugene-manuilov]

Thanks, @hussain-t. Approved and merged 👍 .

[wpdarren]

QA Update: ⚠️

@hussain-t I have spent quite a bit of time on this to try and get the Ad Blocking Recovery CTA to appear in the AdSense settings. I've followed the QAB instructions. I ran the code on Site Kit Dashboard and also on the AdSense settings, as you can see from the screencast below. Any ideas why I might not be seeing it? 🤔

abd-settings.mp4

[hussain-t]

Apologize, @wpdarren. adBlockingRecoverySetupStatus should be an empty string. I have updated the QAB to dispatch the setAdBlockingRecoverySetupStatus('') action with an empty string.

[wpdarren]

Thanks @hussain-t I did try that before and the CTA didn't appear. What I just noticed is that if I paste the first 3 snippets the CTA appears but when I paste the final snippet to save, it disappears. Should it be doing that? I can continue with the testing and not use the save settings snippet but thought I would check.

abd-settings1.mp4

[wpdarren]

QA Update: ⚠️

@hussain-t thank you for your help with this. Editing the database did the trick 👍 I do have a few observations that I'd like to run by you. They are likely non issues but would like to check.

1. The learn more link does not have our external site icon. I know we don't have one on the figma designs.

Screenshot

3. On mobile, the star icon appears on the row above the title. Again, I am not sure if that is expected because we don't have mobile designs for AdBlocker detection.

What do you think?

Screenshot

[hussain-t]

@wpdarren, regarding your observations:

The learn more link does not have our external site icon. I know we don't have one on the figma designs.

I have implemented it according to the Figma designs. @sigal-teller, could you please clarify if it was intended?

On mobile, the star icon appears on the row above the title. Again, I am not sure if that is expected because we don't have mobile designs for AdBlocker detection.

That's expected, and how we have implemented other notices as well. For example:

[wpdarren]

QA Update: ⚠️

@hussain-t Ahhh good point about the layout of other notices. I've messaged Sigal in the UX chat, and will await her response before moving this ticket on.

[wpdarren]

QA Update: ✅

Verified:

• When Ad Blocking Recovery is not set up, the CTA appears in Settings View and Edit screen of AdSense Settings.
• Confirmed that it appears straightaway when both account and site status is ready.
• Confirmed looks exactly as seen in the design, including the icon, New badge, layout, margin, padding and typography.
• Clicking on the CTA button takes user to the Ad Blocking Recovery setup screen.
• Tested on desktop, tablet and mobile viewports.

Screenshots