Show a small notification when AdSense + GA4 accounts are detected as linked

[tofumatt]

Feature Description

When AdSense + GA4 are detected as linked, a small notification should be shown (see Figma design and screenshot below) to alert users that their accounts are now successfully detected as linked.

Note that this is different from the overlay shown in #8236, which should only happen once we have actually detected data from linking the two accounts in the "Top Earning Pages" widget in the Monetization section of the dashboard.

This notification should be dismissed automatically when the notification from #8236 is dismissed/interacted with.

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

---

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

Acceptance criteria

• This notification should only be rendered when the ga4AdSenseIntegration feature flag (#8288) is enabled. When it is disabled, there should be no notification shown.
• A notice that matches the Figma design/screenshot should appear when the user has successfully connected AdSense and GA (as prompted by the CTA in #8236). Essentially, it should appear once adSenseLinked is set.
  • The primary CTA should dismiss the notification, so it does not appear again.
  • The notification should only appear if the user does not have data from the relevant AdSense report to show data in the Top Earnings Pages widget yet. Essentially, this notification should appear as soon as the accounts are detected as linked, but should not be shown if the overlay from #8237 appears. If the report data for the AdSense + GA4 report is detected (triggering #8237 to be shown), this notification should not appear and should be marked as dismissed so it does not appear again.
• Copy:
  • Your AdSense and Analytics accounts are linked. We’ll let you know as soon as there’s enough data available.


  • Primary CTA: Got it

Implementation Brief

SubtleNotifications

• [x] Create a new component based on assets/js/components/notifications/BannerNotifications.js called assets/js/components/notifications/SubtleNotifications.js
  • [x] if the dashboard is in view only mode it should return null early.
  • [x] Otherwise it should load a fragment with the single new notification in place:

    <Fragment>
    <GA4AdSenseLinkedNotification />
    </Fragment>

• [x] Import and include the new SubtleNotifications component in assets/js/components/Header.js below { showNavigation && <DashboardNavigation /> }, also rendering only if showNavigation is true: { showNavigation && <SubtleNotifications /> }

GA4AdSenseLinkedNotification

• [ ] Create a new component assets/js/components/notifications/GA4AdSenseLinkedNotification.js.

  • [ ] Use the useFeature hook const isGA4AdSenseIntegrationEnabled = useFeature( 'ga4AdSenseIntegration' ) and if the features flat is not enabled, render null early - do not show the notification.
  • [x] Create a constant to name this item dismissal key: GA4_ADSENSE_LINKED_NOTIFICATION_DISMISSED_ITEM_KEY with the value ga4_adsense_linked_notification_dimissed_item in assets/js/modules/analytics-4/constants.js.
  • [x] Check if this notification is already dismissed using the isItemDismissed selector on CORE_USER and if dismissed return null early.
  • [ ] In a useEffect check if a report data has been returned for the top earning pages report options, if so, call dismissItem to dismiss this banner:

    
    const { dismissItem } = useDispatch( CORE_USER );

  const reportOptions = { ...dates, dimensions: [ 'pagePath' ], metrics: [ { name: 'totalAdRevenue' } ], orderby: [ { metric: { metricName: 'totalAdRevenue' }, desc: true, }, ], limit: 3, };

  const report = useInViewSelect( ( select ) => { return select( MODULES_ANALYTICS_4 ).getReport( reportOptions ); } );

  useEffect( () => { if ( report !== undefined ) { dismissItem( GA4_ADSENSE_LINKED_NOTIFICATION_DISMISSED_ITEM_KEY ); } }, [ report, dismissItem ] );

• [x] When the CTA is clicked it should dismiss the notification by calling dismissItem directly.

• [x] Create the component HTML using Grid, Row and Cell components to layout the component body.

  • [ ] Create a new scss file assets/sass/components/dashboard/_googlesitekit-dashboard-notifications.scss and import it in assets/sass/wpdashboard.scss.
  • [x] Style the component as in the Figma designs using the base string googlesitekit-dashboard-notifications, on each class.
  • [x] Add the new svg icon to assets/svg/icons/ in order to import it.
  • [x] Add the copy from the AC.
  • [x] The "Got it" CTA should use the tertiary Button component which should call handleDismiss when clicked.

Test Coverage

• [x] Create a new stories for GA4AdSenseLinkedNotification and SubtleNotifications.

QA Brief

• Setup Site Kit with Analytics and AdSense
  • Use a site without existing link between Analytics + AdSense, preferably with little data, and use the Tester Plugin to set these values:
• Go to Dashboard, and paste this snippet in the JS console: googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true) to set your account as a "linked" account, since #8049 isn't ready yet
  • You should not see the notification appearing bellow the navigation, because the feature flag isn't enabled.
• Enable ga4AdSenseIntegration feature flag
  • Go to Dashboard, and paste this snippet in the JS console: googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true) to set your account as a "linked" account, since #8049 isn't ready yet
  • You should see the notification appearing bellow the navigation.
  • Click the notification's CTA. It should dismiss.
  • Refresh the page and paste googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true) into the JS console again. This time, the notification should not appear.

Changelog entry

• Add notification for users who have linked their Analytics and AdSense accounts.

[mxbclang]

@tofumatt @marrrmarrr Same comment as the other two, should we add a "The" in front of "top earning content"?

[marrrmarrr]

@tofumatt @bethanylang I've added copy in the ACs and added a note about triggering.

@tofumatt based on the comments in the issue description, it seems like there might be a period where the widget is appearing, but there's no data to show, is that right? If that's the case, I'll need to adjust the copy a bit more.

To clarify how this was intended in terms of user flows (we didn't factor in the possibility of no data for a while):
1) This CTA (also described in #8236) should be shown to users who have AdSense and GA4, but have not linked them. 2) The success notice from this GH issue is meant purely as a follow up for this flow -- show to users who linked AdSense and GA4 as a result of the previous CTA. 3) This CTA (also described in #8237) is meant to be shown to users who had previously linked their GA4 and AdSense accounts, just to alert them that the feature is back (as no action is required on their end).

Showing both the CTA from #8237 and the success notice from #8238 to the same user would be a bit of a visual overload IMO.

[tofumatt]

Showing both the CTA from https://github.com/google/site-kit-wp/issues/8237 and the success notice from https://github.com/google/site-kit-wp/issues/8238 to the same user would be a bit of a visual overload IMO.

Agreed. I've added to the ACs here that the success notice should not appear if the overlay in #8237 should appear. 👍🏻

@tofumatt based on the comments in the issue description, it seems like there might be a period where the widget is appearing, but there's no data to show, is that right? If that's the case, I'll need to adjust the copy a bit more.

Indeed, that will be the case for this notification. This would appear when we detect the accounts are linked, but don't have any data yet—it can take (I think) 1-2 days after linking before data is available in the report.

I'll leave this assigned to you to update the copy—I think we might just want a single CTA that says "Got it" because scrolling the user to the widget while it's in a "gathering data" state is not very useful. So a notice more like "Your AdSense and Analytics accounts are linked. Top earning pages widget will be available in a few days." seems better-suited for this notification.

[benbowler]

Added an IB and estimate.

[tofumatt]

useEffect check if a report data has been returned for the top earning pages report options

Shouldn't this be done in a useSelector?

Also:

In a useEffect check if a report data has been returned for the top earning pages report options, if so, call dismissItem to dismiss this banner:

dismissItem will also trigger the trackEvent call, which we shouldn't do if it isn't a user event. If we're hiding the notification because it isn't needed, we should dismiss the notification in the user's settings without actually logging an Analytics event, since they didn't actually interact with the notification at all.

---

Instead of assets/js/components/notifications/DashboardNotifications.js, how about SubtleNotifications or similar? The "banner" prefix of the banner notifications is at least a bit self-explanatory, in that they are large, "banner-style" notifications. But "DashboardNotifications" doesn't really distinguish them by name alone. Since these are small, less bold notifications, something like SubtleNotifications or SmallNotifications might make it easier to tell them apart. 🤔

[benbowler]

Thanks @tofumatt:

For this one:

In a useEffect check if a report data has been returned for the top earning pages report options...

I was thinking something like this will be required for the conditional check:

    const { dismissItem } = useDispatch( CORE_USER );

    const reportOptions = {
        ...dates,
        dimensions: [ 'pagePath' ],
        metrics: [ { name: 'totalAdRevenue' } ],
        orderby: [
            {
                metric: { metricName: 'totalAdRevenue' },
                desc: true,
            },
        ],
        limit: 3,
    };

    const report = useInViewSelect( ( select ) => {
        return select( MODULES_ANALYTICS_4 ).getReport( reportOptions );
    } );

    useEffect( () => {
        if ( report !== undefined ) {
            dismissItem(
                GA4_ADSENSE_LINKED_NOTIFICATION_DISMISSED_ITEM_KEY
            );
        }
    }, [ report, dismissItem ] );

I've updated this in the IB as well.

---

I've updated the the CTA onClick action to the following:

When the CTA is clicked it should dismiss the notification by calling dismissItem directly.

---

Agreed about the notification section name, I had a few thoughts of how best to name this section, I've updated it to go with SubtleNotifications, I like the sound of that.

[tofumatt]

IB ✅

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified that notification is showing if AdSense+GA4 accounts are linked.

@zutigrm Seems like Figma link is not correct. Can you please check ? Also, find my observations below.

Issue : I noticed that in mobile viewports having width 599px and less. Notification content is appearing without icon and Primary CTA Got it appearing in center. I think it will look good if it is left align.

Note: Also, I will not able to test one point mentioned in AC because related PR https://github.com/google/site-kit-wp/issues/8237 is not merged yet.

 

[zutigrm]

Hi @mohitwp thanks for the observations

I noticed that in mobile viewports having width 599px and less. Notification content is appearing without icon and Primary CTA Got it appearing in center

Yes, this is intended, icon is hidden as suggestion during CR process. Note that there is no mobile design for this layout, only desktop. I can align it to the left on mobile

Figma link is leading to the correct file, it is under iteration 1 tab. I linked directly to the notification here - https://www.figma.com/file/7ba0pj1rLuvLvJhy3NiHOj/AdSense?type=design&node-id=100-2626&mode=design&t=eEF24a639vMrryCW-0

UPDATE: Only the spacing on screens bellow 599px is edited. We agreed to keep button centered (as is)

[mohitwp]

QA Update ❌

Issue > Clicking on primary CTA 'Got it' is not dismissing the notification. Nothing happens when user clicks on primary CTA.

Pass Cases

• Tested on dev environment following QAB
• Verified that extra space is now removed under viewports having width less than 599px.
• Verified the copy of the notification with AC.
• Verified that clicking on 'Got it' dismiss the notification.
• Verified all points under AC
• Note : In Figma, the font size is set to 18px, but in the actual implementation, it is 14px, which is the global text size on the SK.

  

[kuasha420]

@mohitwp Back to you for another pass. Please test on main. Cheers.

[mohitwp]

QA Update ✅

• Tested on dev environment following QAB.
• Verified that issue related to CTA reported above is now resolved.
• Verified that extra space is now removed under viewports having width less than 599px.
• Verified the copy of the notification with AC.
• Verified that clicking on 'Got it' dismiss the notification.
• Verified all points under AC
• Note : In Figma, the font size is set to 18px, but in the actual implementation, it is 14px, which is the global text size on the SK.

https://github.com/google/site-kit-wp/assets/94359491/d65edf1b-14d6-4610-b0f6-576afd332563