Complete Ad Blocking Recovery onboarding screen

[kuasha420]

Feature Description

This issue is about making use of all the pieces to fully complete the Ad Blocking Recovery on boarding screen according the design doc and Figma design once all the necessary pieces has been introduced to the code base.

---

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

Acceptance criteria

• The Ad Blocking Recovery onboarding screen should be completed as seen in the Figma design by stitching together the infrastructure introduced in the previous issues (namely- Introduce infrastructure for obtaining Ad blocking recovery tags from the AdSense API and storing them in the database #6902, Create AdBlockingRecoveryApp skeleton component and render it in the ad-blocking-recovery screen #6964 and Introduce Stepper component #6965).
• In a nutshell-
  • The empty Cell on the left introduced in Create AdBlockingRecoveryApp skeleton component and render it in the ad-blocking-recovery screen #6964 should be populated with the Stepper and Step contents.
    • In Step one, there should be a Checkbox for error protection tag (checked by default) and the "Place Tag" button.
    • In Step two, the "Create message" button should open "Privacy & Messaging -> Ad Blocking Recovery" page of AdSense publisher UI in a new tab and change the main CTA to "My message is ready" while the "Create message" will now appear as secondary CTA as seen in the design.
      • Link for reference: https://www.google.com/adsense/new/u/0/pub-XXX/privacymessaging/ad_blocking
  • The tags should be fetched from API and stored in database using the fetchAdBlockingRecoveryTags action in the first step.
  • The Cancel button in the footer should be enhanced to behave exactly as described in the linked section of design doc.
  • Once user completes the setup flow and clicks "My message is ready", they should be redirected to the Site Kit Dashboard and shown the success notification introduced in Display success notification in main dashboard after Ad Blocking Recovery tag set up #6957.
• The layout, styles, typography, spacing, copies etc should match with the Figma design as closely as possible.
  • The design tokens already defined in the plugin should be used when needed.

Implementation Brief

• In assets/js/modules/adsense/components/settings/AdBlockingRecoveryApp.js..
  • Replace the Placeholer Text, render a Stepper component. It will have two Steps as seen in the Figma.
    • Which step to show should depend on the value of adBlockingRecoverySetupStatus setting.
      • If it is an empty string, the Step 1 is displayed.
      • If it is tag-placed, Step 2 will be displayed instead.
    • Step 1:
      • title: Place the standard ad blocking recovery tag (required)
      • children:
        • Render the content in a styled p tag.
        • Render the Error protection tag checkbox using the Checkbox component from googlesitekit-component. it should be checked by default.
        • Render the text underneath the checkbox using a styled p tag.
        • Render a SnipperButton for the "Place Tag" CTA. Clicking the CTA should do the following in order.
          • Run the syncAdBlockingRecoveryTags action from MODULES_ADSENSE store.
          • Update and save the following AdSense module settings.
            • adBlockingRecoverySetupStatus: tag-placed
            • useAdBlockerDetectionSnippet: true
            • useAdBlockerDetectionErrorSnippet: true
          • Take user to Step 2.
    • Step 1:
      • title: Create your site’s ad blocking recovery message (required)
      • children:
        • Render the texts in p tags.
        • Render the Create message CTA with a regular button. Clicking this will:
          • Open the defined link in the AC in a new tab.
          • Replace the CTA with the following primary and secondary CTA as follows.
            • My message is ready primary CTA.
              • Clicking this will update the adBlockingRecoverySetupStatus to setup-confirmed, save the setting and take the user back to the dashboard where Ad Blocking Recovery success notification (Implemented in 6957) will be displayed.
            • Create message secondary CTA.
              • Open the defined link in the AC in a new tab.
  • Cancel Button enhancement:
    • The Cancel button should have its href replaced with an onClick handler.
    • The handler should behave exactly as the linked section on Design doc suggests. Namely:
      • If the user is currently in the Step one:
        • They should be taken back to the SK Dashboard.
      • If they're in step 2:
        • If they pressed cancel before clicking "Create message" CTA:
          • The AdSense module Settings adBlockingRecoverySetupStatus, useAdBlockerDetectionSnippet and useAdBlockerDetectionErrorSnippet should get rolled back to an empty string. false and false respectively.
          • They should be taken back to SK dashboard.
        • If they click "cancel" after clicking "create message",
          • The changed settings should remain as is and they should be taken back to the SK Settings.
        • This two condition should depend on the same internal state that determines whether one or two CTA is displayed in Step 2.

Test Coverage

• Add Story coverage for the setup flow and steps.
• Add VRT images.

QA Brief

• Set up Site Kit and connect Adsense.
• Enable the adBlockerDetection feature flag.
• Go to wp-admin/admin.php?page=googlesitekit-ad-blocking-recovery.
• Verify that the screen now shows a stepper as shown in the Figma designs.
• Go through the steps and verify that the behavior is according to the ACs.
• Verify that the screen closely matches the Figma designs.

Changelog entry

• Complete Ad Blocking Recovery set up interface.

[tofumatt]

ACs look good, moving to IB 👍🏻

[tofumatt]

IB ✅

[wpdarren]

QA Update: ⚠️

@kuasha420 I have a few observations and a question.

1. The Site Kit side menu seems to have a styling issue on the Ad Blocking Recovery screens. Noticed this on desktop on Chrome and Safari. See screenshot below. Should we include this as a known issue or, would you like to fix it?

2. In the AC it mentions The tags should be fetched from API and stored in database using the fetchAdBlockingRecoveryTags action in the first step. Can you explain what that means exactly? I see these details in the database and it says that it's set up. Is that what this AC section means?

3. If you set up ABR, you get the success message on the dashboard. If you click on 'Ok, Got it!' and then later disconnect AdSense, and go through the ABR process again, the success notification does not appear. Want me to add this as a known issue on the bug bash board, rather than fixing this here?

[nfmohit]

Hi @wpdarren 👋
Thank you for the thorough checks and for sharing the concerns.

1. The Site Kit side menu seems to have a styling issue on the Ad Blocking Recovery screens. Noticed this on desktop on Chrome and Safari. See screenshot below. Should we include this as a known issue or, would you like to fix it?

It looks like this problem isn't specific to the Ad Blocking Recovery onboarding screen as it also appears on the User Input screen. Here's a screenshot:

I'd prefer to create a new issue for it. What do you think?

2. In the AC it mentions The tags should be fetched from API and stored in database using the fetchAdBlockingRecoveryTags action in the first step. Can you explain what that means exactly? I see these details in the database and it says that it's set up. Is that what this AC section means?

The AC section that you referred to means that Site Kit will fetch the tags from the Adsense service and store the tags in the WP database. It is saved to the googlesitekit_adsense_ad_blocking_recovery_tag option in the {prefix}_options table. Here's a screenshot:

3. If you set up ABR, you get the success message on the dashboard. If you click on 'Ok, Got it!' and then later disconnect AdSense, and go through the ABR process again, the success notification does not appear. Want me to add this as a known issue on the bug bash board, rather than fixing this here?

That's a good catch. However, I'd prefer to add this to the bug bash board as a known issue, as it is not directly related to the onboarding screen.

Feel free to let me know if you have any further questions. Thank you!

[wpdarren]

QA Update: ✅

I have created tickets for point 1 and 3 on my earlier comment.

Verified:

• The empty cell on the left is populated with the Stepper and Step contents.
• In Step one, there is a Checkbox for error protection tag (checked by default) and the Place Tag button.
• In Step two, the Create message button opens Privacy & Messaging -> Ad Blocking Recovery page of AdSense publisher UI in a new tab.
• The main CTA changes to My message is ready
• The Create message appears as secondary CTA.
• Once user completes the setup flow and clicks My message is ready, they should be redirected to the Site Kit Dashboard and shown the success notification.
• When clicking on Cancel link, I am redirected back to the Site Kit dashboard.

Note: On Step two, I feel the behaviour is confusing. I will include it on the bug bash board for discussion, but in short - I click on the Create message CTA, the window appears and I go and create message. I come back to Site Kit, and there's a link CTA there still asking me to create a message. I can't help but feel this will confuse the user.

Screenshots

[aaemnnosttv]

I click on the Create message CTA, the window appears and I go and create message. I come back to Site Kit, and there's a link CTA there still asking me to create a message. I can't help but feel this will confuse the user.

@wpdarren The problem is that we can't know for sure if the user created the message or not. The link gives the user a way to easily get back to the message management part in AdSense in case they didn't finish it, closed the tab, etc.

In the future, we should be able to simplify this if/when we're able to check that a message has been set up via the API, but again this isn't possible right now and it's critical to the function of the feature.