Show a small overlay/callout to AdSense + GA4 users who have linked their account and now have data available to see in a widget

[tofumatt]

Feature Description

Similar in style to the callout added for users who have not linked their accounts (see #8236), we should have a callout/notification for users when there is data available for their accounts after they have been linked. Note that the style is different to many "post-connection" notifications, and instead uses a small callout/overlay.

When clicked, the "Show me" CTA button should scroll the user to the widget that displays the new info.

Figma design: https://www.figma.com/file/7ba0pj1rLuvLvJhy3NiHOj/AdSense?type=design&node-id=10-5478&mode=design&t=lwcDSKVER9BoOVmZ-0

---

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

Acceptance criteria

• This overlay should only be rendered when the ga4AdSenseIntegration feature flag (Add ga4AdSenseIntegration feature flag #8288) is enabled. When it is disabled, there should be no overlay/prompt shown.
• When a user has both AdSense and Analytics 4 modules connected, and the adSenseLinked setting (see Update Analytics_4 settings to include AdSense Link-related Settings fields (adSenseLinked and adSenseLinkedLastSyncedAt) #8047) is set AND there is data to see in the AdSense + GA4 Top Earnings Pages report (see:

  site-kit-wp/assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidget.js

  Lines 68 to 89 in 8612fe9

  	const args = {
  	startDate,
  	endDate,
  	dimensions: [ 'ga:pageTitle', 'ga:pagePath' ],
  	metrics: [
  	{ expression: 'ga:adsenseRevenue', alias: 'Earnings' },
  	{ expression: 'ga:adsenseECPM', alias: 'Page RPM' },
  	{
  	expression: 'ga:adsensePageImpressions',
  	alias: 'Impressions',
  	},
  	],
  	orderby: {
  	fieldName: 'ga:adsenseRevenue',
  	sortOrder: 'DESCENDING',
  	},
  	limit: 5,
  	};
  	const data = useInViewSelect( ( select ) =>
  	select( MODULES_ANALYTICS ).getReport( args )
  	);

  ), an overlay informing them that their accounts are now linked and data is available to view (see screenshot/Figma design) should appear in the bottom-right corner of the page.
  • If this overlay appears, the notice from Show a small notification when AdSense + GA4 accounts are detected as linked #8238 should be dismissed and not shown to the user.
  • The overlay should be fixed to always appear in the bottom corner of the screen regardless of page scroll position.
  • The overlay should match the Figma design, including the image. On mobile, it can probably span the full-width of the screen.
  • The primary CTA should dismiss the overlay (so it does not appear again) and scroll the user down to the Top Earning Pages widget in the "Monetization" section of the Site Kit Dashboard.
  • The secondary CTA should dismiss the overlay, causing it to no longer appear.
• Copy:
  • Top heading: See your top earning content
  • Content: Data is now available for the pages that earn the most AdSense revenue.
  • Primary CTA: Show me
  • Secondary CTA: Maybe later

Implementation Brief

• Create an overlay notification (assets/js/components/OverlayNotification/AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification.js) using the OverlayNotificationBase component with this overlay's content, roughly:

<OverlayNotificationBase>
  <svgHeader />
  <Heading>See your top earning content</Heading>
  <Text>Data is now available for the pages that earn the most AdSense revenue.</Text>
  <Button>Show me</Button>
  <Button>Maybe later</Button>
</OverlayNotificationBase>

• This styles used for Show a small overlay/callout to AdSense + GA4 users whose accounts are not linked #8236 should largely/entirely be applicable here, except the different SVG header.
• A new constant can be made in this file for dismissing this notification (eg. ANALYTICS_ADSENSE_OVERLAY_DETECTED_AS_LINKED_DISMISSED = 'analytics-and-adsense-overlay-are-linked';)
• Both CTA buttons should use const { dismissItem } = useDispatch( CORE_USER ); and dismissItem( ANALYTICS_ADSENSE_OVERLAY_DETECTED_AS_LINKED_DISMISSED )
• The primary CTA should scroll the user to the "Top Earning Pages" widget in the "Monetization" section of the Site Kit Dashboard.
• This component should only render when:
  • The ga4AdSenseIntegration feature flag is enabled
  • Analytics is connected
  • The can access Analytics (eg. select( CORE_USER ).hasAccessToShareableModule( 'analytics-4' ))
  • select( CORE_USER ).isItemDismissed( ANALYTICS_ADSENSE_OVERLAY_DETECTED_AS_LINKED_DISMISSED ) is false
• Use the useOverlayNotification hook to manage the state of this overlay, similar to Show a small overlay/callout to AdSense + GA4 users whose accounts are not linked #8236, but with the component name 'AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification' as an argument, eg useOverlayNotification( 'AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification' ).

Test Coverage

• Add VRTs for the AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification component.

QA Brief

• Connect Analytics, AdSense and Link AdSense Account and Analytics property.
• Visit Site Kit Dashboard so a cron is scheduled for syncing the linked state. See QAB of Schedule a cron task to sync adSenseLinked status #8049 for details.
• Wait or manually trigger scheduled cron tasks.
• Ensure linked state is updated to true. googlesitekit.data.select('modules/analytics-4').getAdSenseLinked().
• If the connected property has AdSense data, the overlay notification should show up, Verify copy, graphics and the CTA behaviors described in the ACs.

Changelog entry

• Add a notification for users who have linked AdSense and Analytics accounts when data becomes available to view in their dashboard.

[bethanylang]

@tofumatt @marrrmarrr Some comment as #8236, should we add a "The" in front of "top earning content" here?

[tofumatt]

Assigning this a rough estimate of 15 just for planning purposes, but as soon as someone can take on the IB it might need slight adjustment.

[tofumatt]

Marking this as blocked by #8236, because it contains the logic to deal with showing these notifications in general…

[bethanylang]

Thanks @tofumatt! I've added a Sp Wk 2 label here and a Sp Wk 1 label to #8237, since these are both planned for Sprint 122.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified overlay with Figma design.
• Verified overlay in different viewports.
• Verified behaviour of both Primary and secondary CTA's.
• Verified overlay on 'View only' dashboard.
• Verified that on entity dashboard overlay is not showing.

@zutigrm

Issue

I noticed clicking on Primary CTA not scrolling down to Monetization section as mentioned in AC.

The primary CTA should dismiss the overlay (so it does not appear again) and scroll the user down to the Top Earning Pages widget in the "Monetization" section of the Site Kit Dashboard.

Admin Main Dashboard

Recording.841.mp4

View only Dashboard

Recording.842.mp4

Q-2) I noticed that overlay is showing for all admin and on all view only dashboard. Is this expected ?

PASS CASES

Recording.840.mp4

>

[kuasha420]

Thanks @mohitwp ! I've fixed the scrolling on a follow up PR. And yes, it's fine to appear on second admins and view only dashboard provided that the Second Admin has access to both Analytics and Adsense or both modules are shared.

Sending back to CR.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that issue mentioned above is resolve now and scroll is implemented successfully.
• Verified on mobile viewports.
• Verified on view only dashboard.
• Verified overlay with Figma design.
• Verified overlay in different viewports.
• Verified behaviour of both Primary and secondary CTA's.
• Verified overlay on 'View only' dashboard.
• Verified that on entity dashboard overlay is not showing.

Recording.851.mp4

Recording.852.mp4

Recording.840.mp4