Display Ad Blocker Detection related setting in AdSense Settings view

[kuasha420]

Feature Description

Once an user completes the Ad blocking recovery tag setup, the status of the recovery tag placement should be shown in the Settings view of AdSense Module settings instead of the "Setup Ad Blocking Recovery CTA", as seen in Figma design.

---

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

Acceptance criteria

• When Ad Blocking Recovery is set up (ie. adBlockingRecoverySetupStatus is not an empty string), the status of the recovery tag placement should appear in the AdSense Settings View.
• If the tag is placed, the accompanying text and link underneath the setting should appear as seen in the design.
  • The link should take user to the Privacy and Messaging section on their AdSense console.

Implementation Brief

In assets/js/modules/adsense/components/settings/SettingsView.js:

• Get the adBlockingRecoverySetupStatus using the getAdBlockingRecoverySetupStatus selector.
• If the adBlockingRecoverySetupStatus is an empty string, render null.
• If the adBlockingRecoverySetupStatus is tag-placed render the following as the last meta item:
  • Copy one of the existing meta items (googlesitekit-settings-module__meta-items), for example, Excluded from ads.
  • The h5 tag with the class googlesitekit-settings-module__meta-item-type should have the Ad blocking recovery text.
  • The p tag with the class googlesitekit-settings-module__meta-item-data should have the text Ad blocking recovery tag is placed.
  • Using createInterpolateElement, add another h5 tag with the class googlesitekit-settings-module__meta-item-type with the text Ad blocking recovery only works if you’ve also created and published a recovery message in AdSense. Configure your message.
  • Configure your message should use the Link component that takes the user to their AdSense console's Privacy and Messaging section.
  • Get the privacy messaging URL from the getServiceURL selector. Construct the path by concatenating the Adsense account ID and the /privacymessaging/ad_blocking string. See:
    

    site-kit-wp/assets/js/components/notifications/AdBlockingRecoveryNotification.js

    Lines 55 to 59 in 5668847

    	const privacyMessagingURL = useSelect( ( select ) =>
    	select( MODULES_ADSENSE ).getServiceURL( {
    	path: `/${ adsenseAccountID }/privacymessaging/ad_blocking`,
    	} )
    	);

  • It should be the exact same as the Figma designs.
• If the adBlockingRecoverySetupStatus is setup-confirmed render the meta item elements as above with following changes:
  • The p tag with the class googlesitekit-settings-module__meta-item-data should have the text Ad blocking recovery tag is not placed.
  • Don't render the additional h5 tag.
  • It should be the exact same as the Figma designs.
• All the strings should be translatable.
• In stories/module-adsense-settings.stories.js, add stories for the new meta item Ad blocking recovery.

Test Coverage

• No new tests are to be added.

QA Brief

This can't be tested on a live site yet because the feature cannot be fully set up. Instead, test the UI in storybook.

• View the Storybook story for "View, open with Ad Blocking Recovery tag not placed")
  • You should see a section marked "Ad blocking recovery" and the text "Ad blocking recovery tag is not placed".
• View the Storybook story for "View, open with Ad Blocking Recovery tag placed")
  • You should see a section marked "Ad blocking recovery" and the text "Ad blocking recovery tag is placed", along with a section beneath explaining the Ad Blocking tag and a link. Note: The "Ad blocking recovery tag is placed" should not be bold, unlike in the Figma mocks where it is bold.

Changelog entry

• Add ad blocking recovery state to the settings view for AdSense.

[techanvil]

AC ✅

[tofumatt]

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• See a section marked "Ad blocking recovery" and the text "Ad blocking recovery tag is not placed".
• See a section marked "Ad blocking recovery" and the text "Ad blocking recovery tag is placed", along with a section beneath explaining the Ad Blocking tag and a link.

Note: there are a few differences with the UI - i.e. as mentioned the bold text in the QAB plus the titles are in bold on Storybook but not in figma designs. This is understood to be expected.

Screenshots