Create Ads placeholder reporting widget

[aaemnnosttv]

Feature Description

With Ads connected via PAX, the Ads module should conditionally register a new widget on the dashboard which be populated by a new PAX widget, the contents of are WIP but delegated to the app.

This widget should appear in the "Traffic" section, and will not be accessible to users in the view-only dashboard context.

---

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

Acceptance criteria

• There should be a new dashboard reporting widget (eg. PartnerAdsWidget or similar) within the Ads module. It should render the PAX application in "reporting" mode (likely via a displayMode or similar prop of the main PAX component, see #8557).
  • The widget should be registered within the Ads module, only when the adsPax feature flag is present and the Ads module is connected, and the adwords scope is granted (see #8565)
  • The widget should be rendered within the "Traffic" section of the main dashboard (no presence on entity), after the current set of widgets
  • The widget should appear similar to other widgets on the dashboard, eg use the Widget component.
  • The widget should display an AdBlocker warning when an ad blocker is detected, similar to, for instance, the DashboardTopEarningPagesWidgetGA4 component.
  • The widget cannot have a null/error state because thte PAX application will handle rendering the widget contents.
  • The widget footer can be empty for now.

Implementation Brief

• [x] Create a new component (PartnerAdsWidget) in the Ads module that will render the PAX application in "reporting" mode. The file should be located in assets/js/modules/ads/components/dashboard/PartnerAdsWidget.js.
  • use the whenActive HOC to ensure the widget is only rendered when the ads module is connected
  • create a new HOC for whenScopesGranted similar to whenActive but requiring one or more scopes are granted (checking hasScope in the core/user store) which renders WidgetNull as a Fallback if conditions are not satisfied
  • Use compose to combine these together (example)
• [x] Register the new widget in the Ads module, only when the adsPax feature flag is present. The widget should be registered in a new registerWidgets function in assets/js/modules/ads/index.js.
  • [x] The registerWidgets function should mimic existing registerWidgets functions, see https://github.com/google/site-kit-wp/blob/9e8bcc41e45d8ed7fe84dbd52ed1e7d3e316ed40/assets/js/modules/adsense/index.js#L91 as an example.
  • [x] The widget should be registered within the "Traffic" section of the main Site Kit dashboard.
  • [x] The widget should render the PAXEmbeddedApp component in "reporting" display mode, wrapped by a <Widget> component.
  • [x] The widget should display an AdBlocker warning when an ad blocker is detected, and opt not to bother rendering PAXEmbeddedApp if an Ad Blocker is detected.

Test Coverage

• Testing the output of the PAX Embedded app is difficult because it requires an outside script and valid OAuth tokens. Tests to add are at the discretion of the developer, but they might be limited in this context.

QA Brief

• Enable the adsModule and adsPax feature flags.
• Go through the PAX setup flow (see QA steps in #8558 for more info)
• Visit the Site Kit dashboard, there should be a widget in the traffic area outputting PAX reports at the bottom of the traffic area.
• Disable the adsPax feature flag.
• Visit the Site Kit dashboard, there should no longer be a PAX widget displayed.

Changelog entry

• Create Ads placeholder reporting widget.

[tofumatt]

I made some changes here, mainly adding more clarity around the widget behaviour/expectations for the component, but also removing the need to pass in the config or services, since I think the PAX component itself can handle that (they'll be consistent across the site as I understand it).

@10upsimon Let me know if this looks good, if so feel free to move it right to IB 👍🏻

[10upsimon]

Thanks @tofumatt those changes look good to me, moving to IB

[eugene-manuilov]

IB ✔️

[aaemnnosttv]

I tweaked the definition here to include the use of whenActive plus a new HOC for guarding based on a granted scope, since it is conditional for Ads at this point. The estimate was also bumped to accommodate for this.

[wpdarren]

QA Update: ❌

@tofumatt a few observations:

1. I see the widget but nothing is getting loaded in it. There's a reload UX/UI and even when I refresh nothing happens. There's also a huge console error. Part of the error message is below (it's a long one so not all of it can be pasted)

To note: I have successfully set up my campaign, clicked on the update button to connect the Ads module.

POST https://ads.google.com/aw_express/embedding/_/rpc/EmbeddedMiniDashboardViewModelService/LoadViewModel?authuser&acx-v-bv=awn_express_auto_20240508-0457_RC000&acx-v clt=1715737524077&rpcTrackingId=EmbeddedMiniDashboardViewModelService.LoadViewModel%3A1 500 (Internal Server Error)

2. If Analytics is not connected then the widget does not appear. We could have a scenario where the user does not have this module set up, so, should the widget appear? I suspect it should since Ads and Analytics are not directly impacted for setting up an ads account and campaign. The widget actually appears, tested on another site. Please ignore.

[tofumatt]

Turns out that bug was due to the date range code not being merged yet.

Now that #8687 is merged this should work, so moving back to QA 👍🏻

[wpdarren]

QA Update: ⚠️

@zutigrm The UX/UI of the widget doesn't look very good.

There's lots of white space, wrapping issues with text, etc. Interested in your thoughts considering its a pilot.

[zutigrm]

@wpdarren thanks for your observation. As @tofumatt mentioned in the slack we can't control the widget, since it is third party and it can adjusted only on the Ads team side

[wpdarren]

QA Update: ✅

Verified:

• When the PAX campaign is completed, and I go to the Site Kit main dashboard the reporting widget loads.
• The widget appears at the bottom of the traffic section of the main dashboard.
• Checked to make sure that it does not appear on the entity dashboard.
• Checked to make sure that it does not appear on the view only dashboard.
• Disabled the adsPax feature flag, the PAX widget is not displayed.

Note that there are numerous UX/UI issues with the reporting widget, but we will identify these to the Ads team to see if they can be fixed and make the widget more user-friendly.