Feature Description

The ACRSubtleNotifciation component should be added to the new highest priority widget added to the AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY widget area in #9345 .

The ACRSubtleNotifciation component should be adapted for showing within VIEW_CONTEXT_MAIN_DASHBOARD context, to include different content variation, and as part of this issue, banner should be surfaced in the dashboard within key metrics widget area only for users who already setup KMW using tailored metrics, when initial ACR events are detected - and those events match to they goals. And CTA should offer them to automatically include new ACR widgets based on the detected events

Figma design can be found here

Refer to the Subtle banner notification for detected events section of the design doc

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

Acceptance criteria

• New banner component ACRDashboardSubtleNotification is created
• New widget component ACRNotificationCTAWidget is included in the keyMetricsEventDetectionCalloutNotification widget added in 9345 replacing the null component
• Said component should surface in the widget area only if:
  • Initial conversion events are detected
  • And key metrics were setup using tailored metrics (answering the user questions)
  • And detected events match with their saved goals (there are metric tiles that are valuable to include, otherwise we will not show the banner)
• Said component should match the Figma design
• Clicking the Maybe later CTA should dismiss the banner, and show the admin menu tooltip as per design
• Clicking the Add metrics CTA should automatically include additional ACR metrics based on the existing answer/preference
• Check the Subtle banner notification for detected events section of the design doc
• Banner should be displayed only when conversionReporting feature flag is enabled

Implementation Brief

• Update assets/js/googlesitekit/datastore/user/constants.js
  • Create a new constant that will map the event names with their widget slugs, example: const CONVERSION_EVENTS_WIDGETS = [{'purchase': [KM_ANALYTICS_TOP_CITIES_DRIVING_PURCHASES, KM_ANALYTICS_TOP_TRAFFIC_SOURCE_DRIVING_PURCHASES]}, {...}]
• Add assets/js/components/KeyMetrics/ACRDashboardSubtleNotification.js component
  • You can re-use the classes from ACRSubtleNotification to keep the design/layout
  • Maybe later CTA callback should trigger dismissNewConversionReportingEvents action from MODULES_ANALYTICS_4 datastore, and open adminMenuTooltip() and match the design . You can see an example for this in assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js, and part of the logic can be implemented in the ACRNotificationCTAWidget component
  • Add metrics CTA callback should update the includeConversionTailoredMetrics KM setting to true (and trigger the save so it is updated in the DB)
• Add assets/js/components/KeyMetrics/ACRNotificationCTAWidget.js component
  • It should accept Widget and WidgetNull props
  • You can see an example in assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js
  • It should render ACRDashboardSubtleNotification component if following conditions are met (otherwise it should render WidgetNull):
    • Banner should show if isUserInputCompleted selector from CORE_USER store is true
    • And hasNewConversionReportingEvents selector is not falsy - even it is included in isActive check above to return early if this condition is not met, we still need it here, as this will be expanded to include lost events detection in other issue, so isActive check will still render the widget if either new or lost events are detected at that point
      • Pull the initially detected events using getDetectedEvents setting from Analtyics module and compare if detectedEvents holds the same value as hasNewConversionReportingEvents. They will match only when initial set of events is detected, and verify that includeConversionTailoredMetrics analytics setting is not true - so if user already used CTA to include new events, and at some point lost all events and now they have been detected again, we want to skip showing this banner variation
  • And to verify that new detected events are matching the selected purpose, use getAnswerBasedMetrics which was updated in 9438 to accept purpose param. Retrieve purpose answer from getUserInputSettings selector and extract purpose answer

    site-kit-wp/assets/js/components/KeyMetrics/MetricsSelectionPanel/index.js

    Line 73 in 9a1a4f1

    setValue( KEY_METRICS_SELECTION_PANEL_OPENED_KEY, false );

    . This will return the list of KMW slugs that are included for that purpose, including ACR widget that would be added. Pull the list from KM_ANALYTICS_TOP_CITIES_DRIVING_PURCHASES and retrieve the widget slugs belonging to the detected events (from getDetectedEvents). If widgets from one of the events are present in purpose related widgets, then this check should be considered as true for showing the banner along the 2 previous checks.
  • Following the above conditions, include the content variation matching this banner in Figma, by passing it as props to the ACRDashboardSubtleNotification component
• In assets/js/googlesitekit/widgets/register-defaults.js
  • Include ACRNotificationCTAWidget component to the keyMetricsEventDetectionCalloutNotification widget
  • Leverage isActive prop to prevent it from rendering early if basic conditions are not met:
    • Return early if hasNewConversionReportingEvents selector from MODULES_ANALYTICS_4 does not have any data

Test Coverage

• Add basic test coverage for ACRNotificationCTAWidget and stories for ACRDashboardSubtleNotification

QA Brief

Changelog entry