Feature Description

Add the "activate Analytics” notification.

See the Figma design, and the activate Analytics notification section in the Design Doc.

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

Acceptance criteria

• When the user completes the setup flow without connecting Analytics and lands on the dashboard, a notification appears at the top of the dashboard.
• The notification matches the Figma design, with the following copy:
  • Title: Understand how visitors interact with your content
  • Description: Get a deeper understanding of your customers. Google Analytics gives you the free tools you need to analyze data for your business in one place.
• The notification includes the following buttons:
  • Set up Analytics
    • When clicked, the user is redirected to the Analytics module setup screen.
  • Maybe later
    • This will dismiss the notification.
• When dismissed, the notification reappears after a delay of two weeks, up to two times.
• On the final showing, the dismissal button's label is Don’t show again, and clicking it permanently dismisses the notification.
• Each time the banner is dismissed a tooltip appears, pointing to the Settings admin menu item, with the following copy (see Figma):
  • Content: You can always set up Analytics from Settings later
  • Button label: Got it
• The notification is not shown if Search Console is in the gathering data state.
• The notification is not shown for view-only users.
• The notification is only shown when the setupFlowRefresh feature flag is enabled.

See the implementation guide in the Design Doc for guidelines on how to implement this issue.

Implementation Brief

• Export the graphic for the notification from Figma and save it as assets/svg/graphics/activate-analytics-notification-graphic.svg.
• Create the ActivateAnalyticsNotification component in assets/js/components/notifications/ActivateAnalyticsNotification.tsx.
  • Follow the pattern of other notifications in the assets/js/components/notifications directory, using the BannerNotification layout.
  • Use LearnMoreLink.tsx as a reference for typing the component's props. Note that we don't need to define propTypes for TS components.
  • Call useActivateModuleCallback() to get the activateAnalytics() callback.
  • Use this logic from the ActivateAnalyticsCTA component to determine the inProgress state (consider extracting it to a reusable hook).
  • Pass the activateAnalytics() callback to the onClick property of the ctaButton prop.
  • Pass the inProgress state to the disabled and inProgress properties of the ctaButton prop.
  • Use this configuration from the ConsentModeSetupCTABanner component for the dismissal properties of the ctaButton prop.
  • Call useShowTooltip() with the appropriate arguments to get the showTooltip() callback.
  • Use this configuration from the ConsentModeSetupCTABanner component for the dismissButton prop.
• In assets/js/googlesitekit/data-requirements/index.js:
  • Add utility functions requireCanActivateModule() and requireModuleGatheringData(), following the pattern of similar functions in the file.
• In assets/js/googlesitekit/notifications/register-defaults.js:
  • Register the ActivateAnalyticsNotification component with the following configuration:
    • priority: PRIORITY.SETUP_CTA_HIGH
    • areaSlug: NOTIFICATION_AREAS.HEADER
    • viewContexts: [ VIEW_CONTEXT_MAIN_DASHBOARD ]
    • isDismissible: true
    • dismissRetries: 2
    • featureFlag: 'setupFlowRefresh'
    • checkRequirements: Use asyncRequireAll(), asyncRequire(), and the following utility functions to implement the conditions for showing the notification as per the AC.
      • requireModuleConnected()
      • requireModuleGatheringData()
      • requireCanActivateModule()
• If any additional styling is needed, add it to assets/sass/components/dashboard/_googlesitekit-activate-analytics-notification.scss.

Test Coverage

• Add a story and VRT for the ActivateAnalyticsNotification component.
• Add tests for the ActivateAnalyticsNotification component.
• Add tests for the requireCanActivateModule() and requireModuleGatheringData() utility functions.

QA Brief

• Set up Site Kit with the setupFlowRefresh feature flag enabled. Don't connect Analytics.
• When landing on the Site Kit dashboard, dismiss the "Congrats on completing the setup for Site Kit!" notification (this won't be shown once Ensure the Site Kit setup notification is not shown when the Welcome modal is present. #11819 has been implemented).
• Verify that the "activate Analytics" notification appears as per the AC.
• To test the reappearance of the notification it's necessary to update values in the database. Having clicked Maybe later to dismiss the notification:
  • Look up the row in the {prefix}_usermeta table where meta_key is {prefix}_googlesitekitpersistent_dismissed_prompts.
  • Verify that the expires timestamp for the activate-analytics-cta entry is set to two weeks from the current unix timestamp, and count is 1.
  • Edit the row and set the expires timestamp to the current unix timestamp to simulate the time having passed.
  • Refresh the page, and the notification should reappear.
  • Click on Maybe later and check the same row in the usermeta table.
  • Verify that the expires timestamp is set to two weeks from the current unix timestamp, and now count is 2.
  • Edit the row and set the expires timestamp to the current unix timestamp again.
  • Refresh the page, and the notification should reappear, this time with the Don't show again dismissal button.
  • Click the button and check the same row in the usermeta table.
  • Verify that the expires timestamp is set to 0 (this indicates a permanent dismissal), and count is 3.

Changelog entry

• Add the Analytics activation notification that prompts users to activate Analytics after completing Site Kit setup.