Display Top Earning Pages Widget with a CTA to ask users to link their AdSense and Analytics when both modules are connected

[tofumatt]

Feature Description

We'll want a version of the "Top Earning Pages Widget" (#6248) that shows a CTA to link the user's AdSense and Analytics accounts when they are not linked (or we don't detect that they are linked).

See: https://docs.google.com/document/d/1-JenwPTAkw0eTkmESzjTOfgphs9qpRYH0h3xk_s3a4o/edit#heading=h.ykym38w7pngs

NOTE: This issue must be deployed in the same release as #6248 and #8051.

---

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

Acceptance criteria

• The DashboardTopEarningPagesWidgetGA4 component should return the AdSenseLinkCTA component when Analytics and AdSense are not connected (eg. when the adsenseLinked Analytics setting from #8048 is false), similar to how the existing DashboardTopEarningPagesWidget component behaves.
  • Similar to the DashboardTopEarningPagesWidget component, this should only happen on the "regular" dashboard, not the view-only dashboard (eg. shared dashboard), because users in view-only mode likely won't have permissions to link these accounts.

Implementation Brief

• [ ] Update DashboardTopEarningPagesWidgetGA4 to check for select( MODULES_ANALYTICS_4 ).getAdsenseLinked() and whether the context is view-only dashboard. If the context is not view-only and adsenseLinked is false, output <AdSenseLinkCTA />, the same as https://github.com/google/site-kit-wp/blob/8612fe95e03b6029aab6cd32c9df6afd1d860225/assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidget.js#L166-L172
• [ ] It would be worth adding some of the other content/logic from the non-GA4 version of this widget, specifically the lines here: https://github.com/google/site-kit-wp/blob/8612fe95e03b6029aab6cd32c9df6afd1d860225/assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidget.js#L133-L162
  • [ ] Copy the isAdblockerActive logic that returns an Ad Blocker warning.
  • [ ] Copy the ! isAdSenseLinked && viewOnlyDashboard logic that does not output the widget when AdSense is not linked and the user is on the view-only dashboard.

Test Coverage

• Update the stories for this component to include the different scenarios above.

QA Brief

• Set up Site Kit.
• Enable the ga4AdSenseIntegration feature flag
• Connect the Analytics & AdSense modules (do not link Analytics & AdSense yet).
• In the SK dashboard, scroll down to the "Top Earning Pages widget".
• Verify that you see a prompt to link Analytics & AdSense.
• Set up an ad blocker in your browser.
• In the Top Earning Pages widget, verify that you see an ad blocker warning.
• Log in with the view-only dashboard and verify that you don't see the widget at all.
• Now, link AdSense & Analytics.
• Verify that you no longer see the prompt to link AdSense & Analytics.

When the ga4AdSenseIntegration feature flag is disabled, this KMW tile should not appear.

Changelog entry

• Display CTA for users with AdSense and Analytics connected to link their accounts.

[techanvil]

Hey @tofumatt, regarding the second IB point, I think it would be worth being more specific about what other content/logic we should include, as it looks like some of this should be covered by https://github.com/google/site-kit-wp/issues/8059.

It's also worth noting that the AC for this issue seems to be partially duplicated in #8059 - cc @hussain-t who's working on the IB for that issue which can probably refer in part to this one.

[tofumatt]

Thanks @techanvil. I referenced the lines in the IB, but I've added some notes to the IB here.

I've also referenced this IB in #8059 as well 👍🏻

[techanvil]

Thanks @tofumatt, looks good. Just one thing, the GA4 version of the widget already includes a copy of the Footer component so it looks like we can remove that sub-point.

[mxbclang]

@tofumatt Just noting that this is one that we can get started on at any time, so would be great to get these IB updates taken care of so we can start on it ASAP. Thanks!

[techanvil]

Thanks @tofumatt, IB :white_check_mark:

[nfmohit]

Hi folks!

I've set this issue as blocked by #8048 as the new setting adSenseLinked (see https://github.com/google/site-kit-wp/issues/8047#issuecomment-1903498239) is not yet available in the analytics-4 datastore.

Thanks!

CC: @tofumatt @techanvil @bethanylang @ivonac4

[ivonac4]

@tofumatt I can see you removed this issue from the AdSense GA4 Integration epic. Was that on purpose? If so, can you loop me in please? Thankss

[mxbclang]

@ivonac4 I'm guessing that was an error, as it happened at the same time this was removed from the release. Adding it back!

[ivonac4]

Okay, thanks!

[tofumatt]

(Indeed, that looks to be a Zenhub bug! 😅 Thanks @ivonac4 for catching it and @bethanylang for restoring it!)

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified that on connecting analytics and AdSense module prompt to link Analytics & AdSense is showing.
• Verified that on activating Ad blocker In the Top Earning Pages widget, an ad blocker warning is showing.

Issue : If AdSense module is shared then On View only dashboard error is showing.

 

[mohitwp]

QA Update ❌

@zutigrm

• Tested on dev environment.
• Above mentioned issue is resolved now.
• Verified that if AdSense or Analytics and AdSense both are shared then on view only dashboard error is not showing for Analytics widgets.

Issue : As reported in slack earlier and in #6248 . I used oi.ie site for testing. Analytics and AdSense are already linked for this site but still on main dashboard under Monetization section prompt to link AdSense and Analytics is showing.

[zutigrm]

The real adSenseLinked setting value is not pulled yet, so only default value is present, which is false, so it will always show connect section. The value will be fetched in other issue, see this comment

cc: @mohitwp @tofumatt

[tofumatt]

Adding #8049 as a blocker, and removing this issue from this release as we can't really properly test it (or release this widget) until the data can also be fetched from the Analytics API.

I'll create a follow-up issue to not render this for now.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that on view only dashboard both KM widget and Prompt are not showing.
• Verified that when ga4AdSenseIntegration feature flag is active then and only promot is showing.
• Verfied that when when ga4AdSenseIntegration feature flag is not active then promot is not showing.
• Verified that when Ad Blocker is active then warning message is appearing.
• Verified dashboard widget as well as KM Top earning pages widget.

Note : Putting note here to test again when #8049 get merge.

**Main Dashboard -**   **View only dashboard -**   **Ad Blocker active**  **Link both AdSense+GA4 via code **snippet**** **Main Dashboard -**   **View only dashboard -**