Add GA events for "Top Earnings Pages" overlay CTA

[tofumatt]

Feature Description

GA events (eg. trackEvent calls) should be added to the new "Top Earnings Pages" overlay (#8237) that appears on the Site Kit dashboard when the user connects their accounts and has data available. There should be one when a user views the overlay, one when they click the "Show me" link in the overlay, and another when the user dismisses the overlay.

---

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

Acceptance criteria

• When the AdSense + GA connected with data overlay is shown (see #8237), the following trackEvent calls should be made:
  • trackEvent( `{viewContext}_top-earning-pages-widget`, 'view_overlay_CTA' ) when the notification is rendered and shown to the user
  • trackEvent( `{viewContext}_top-earning-pages-widget`, 'confirm_overlay_CTA' ) when the user clicks the "Show me"/primary CTA
  • trackEvent( `{viewContext}_top-earning-pages-widget`, 'dismiss_overlay_CTA' ) when the user clicks the "Maybe later"/secondary CTA

CTA widget screenshot:

Implementation Brief

• [ ] Call trackEvent( `{viewContext}_top-earning-pages-widget`, 'view_overlay_CTA' ) when shouldShowNotification is true in AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification
• [ ] Change the onClick handler for the "Show me" button to also call trackEvent( `{viewContext}_top-earning-pages-widget`, 'confirm_overlay_CTA' )
• [ ] Add trackEvent( `{viewContext}_top-earning-pages-widget`, 'dismiss_overlay_CTA' ) to the "dismiss" handler at https://github.com/google/site-kit-wp/pull/8399/files#diff-dde7a931a349093a2dc4b056807b51019b4555ec16f3dbf4a8793a82c1c66ff3R167-R173

Test Coverage

• No tests needed.

QA Brief

• Enable the ga4AdSenseIntegration feature flag
• Use the Google Analytics debugger extension
• Ensure your Site Kit install is set to send Analytics events/usage data to Google
• Trigger the overlay (see QA steps for #8237 for details on making it appear)—connect an Analytics and AdSense accounts that are linked.
• Visit the dashboard on a site that has data for these reports (I think oi.ie should) and view the notification
  • mainDashboard_top-earning-pages-widget, view_overlay_CTA event should be sent
• Dismiss the notification using the "Maybe later" button in the notification
  • mainDashboard_top-earning-pages-widget, dismiss_overlay_CTA event should be sent
• Reset all data and trigger the notification again, but this time click "Show me"
  • mainDashboard_top-earning-pages-widget, confirm_overlay_CTA event should be sent

Changelog entry

• Add Analytics events to AdSense + Analytics notification.

[tofumatt]

(Moving to stalled because this component doesn't exist yet.)

[tofumatt]

@marrrmarrr Do you have a Figma design/screenshot/reference for the component that the view_notification + {viewContext}_top-earning-pages-success-notification event corresponds to from the Analytics events document? I wasn't able to find one, but if there is one I can create an issue to make that component as well.

[tofumatt]

@marrrmarrr @ivonac4 We now have issues filed for this component, so I've marked this as blocked by those two issues 👍🏻

[eugene-manuilov]

@tofumatt could you please update IB to have actual implementation brief, because right now it looks like an exact copy of AC.

[tofumatt]

@eugene-manuilov Sure thing, I had written it before the component was totally implemented 😅

EDIT: Oh, looks like the component is still in execution, I'll add more to the IB once the component is ready.

[tofumatt]

Updated the IB to reference the actual components, though since the issue should be completed this sprint and that issue is still in execution/code review I've referenced the PR 😄

Should be good though 😅

[eugene-manuilov]

Thanks, @tofumatt. IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that all events are getting trigger as per AC.

1> trackEvent( {viewContext}_top-earning-pages-widget, 'view_overlay_CTA' ) when the notification is rendered and shown to the user

2> trackEvent( {viewContext}_top-earning-pages-widget, 'confirm_overlay_CTA' ) when the user clicks the "Show me"/primary CTA

https://github.com/google/site-kit-wp/assets/94359491/1f7dae03-1fdd-4d2f-8463-d33f4d18153d

3> trackEvent( {viewContext}_top-earning-pages-widget, 'dismiss_overlay_CTA' ) when the user clicks the "Maybe later"/secondary CTA

https://github.com/google/site-kit-wp/assets/94359491/4949800b-cee7-438e-b5d3-0d9f0bf09227