Add GA events for "Top Earning Pages" success notification

[tofumatt]

Feature Description

GA events (eg. trackEvent calls) should be added to the new "Top Earnings Pages" notification that appears after successful AdSense + GA4 integration/connection. There should be one when a user views the notification one when they click the "Show me" CTA button in the notification, and another when the user dismisses the notification with the "Got it" button.

---

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

Acceptance criteria

• When the AdSense + GA connected notification is shown (see Show a small notification when AdSense + GA4 accounts are detected as linked #8238), the following trackEvent calls should be made:
  • trackEvent( `{viewContext}_top-earning-pages-success-notification`, 'view_notification' ) when the notification is rendered and shown to the user
  • trackEvent( `{viewContext}_top-earning-pages-success-notification`, 'confirm_notification' ) when the user clicks the "Got it"/primary CTA

CTA widget screenshot:

Implementation Brief

• Add trackEvent( `{viewContext}_top-earning-pages-success-notification`, 'view_notification' ) to

  site-kit-wp/assets/js/components/notifications/GA4AdSenseLinkedNotification.js

  Line 46 in 902f409

  export default function GA4AdSenseLinkedNotification() {

  when the component doesn't render null, likely in a useEffect that should only call trackEvent once per page load.
• Add trackEvent( `{viewContext}_top-earning-pages-success-notification`, 'confirm_notification' ) to the onClick function of the primary button at

  site-kit-wp/assets/js/components/notifications/GA4AdSenseLinkedNotification.js

  Lines 212 to 214 in 902f409

  	<Button tertiary onClick={ dismissNotificationForUser }>
  	{ __( 'Got it', 'google-site-kit' ) }
  	</Button>

  , eg

  site-kit-wp/assets/js/components/notifications/GA4AdSenseLinkedNotification.js

  Lines 133 to 135 in 902f409

  	const dismissNotificationForUser = useCallback( async () => {
  	await dismissItem( GA4_ADSENSE_LINKED_NOTIFICATION );
  	}, [ dismissItem ] );

Test Coverage

• We're lacking track event test coverage code I think, so adding tests here is a bit out-of-scope.

QA Brief

• Verify that GA events are tracked for the GA4AdSenseLinkedNotification banner as per the AC.
• See the QA brief here Show a small notification when AdSense + GA4 accounts are detected as linked #8238 on how to enforce showing this notification on the dashboard.

Changelog entry

• Add Analytics events to AdSense + Analytics success notification.

[tofumatt]

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

[ivonac4]

@tofumatt is it maybe possible to add dependencies here? I don't know if the tickets for these component's exist already or not. In case they don't, can we add them later.

[tofumatt]

@ivonac4 I've updated this as blocked by #8238, now that we have that filed 😄

[tofumatt]

Leaving this one in AC with me until we move #8238 into IB, because the events fired will depend on how many (1 or 2) CTAs there are 🙂

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ✅

Verified:

When the AdSense + GA connected notification is shown the following trackEvent calls are made:

• trackEvent( {viewContext}_top-earning-pages-success-notification, 'view_notification' ) when the notification is rendered and shown to the user
• trackEvent( {viewContext}_top-earning-pages-success-notification, 'confirm_notification' ) when the user clicks the "Got it" CTA.

Screenshots