Feature Description

Handle Analytics setup CTA errors on the Search Funnel widget, WP Dashboard and Admin Bar.

For reference, see the Analytics setup CTA section in the design doc, and the Figma design.

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

Acceptance criteria

• When the user clicks the Set up Analytics button on the Analytics setup CTA on the Search Funnel widget, WP Dashboard and Admin Bar:
  • If an error is returned from the POST core/modules/data/activation request:
    • The CTA is shown in the error state, matching the Figma design, with the following copy:
      • Title: Analytics setup failed
      • Description: Something went wrong, please try again
      • Button: Retry Analytics setup
    • Clicking the Retry Analytics setup button retries the setup process.
    • Clicking the Got it button dismisses the Analytics setup CTA (retaining the behaviour of the same button shown in the non-error state).
• These changes are gated by the setupFlowRefreshPhase4 feature flag.

Implementation Brief

See the implementation guide in the design doc.

• In assets/js/components/ActivateAnalyticsCTA.js

  • Use useFeature hook to check if setupFlowRefreshPhase4 feature is enabled. Store result in setupFlowRefreshPhase4Enabled.
  • Use getInternalServerError selector check internal server error with id analytics-4-setup-error is present, if yes, set hasActivationError to true.
    • hasActivationError will be false if any of setupFlowRefreshEnabled or setupFlowRefreshPhase4Enabled is disabled or analytics module is inactive.
  • Create two callback functions handleActivationRetry and handleActivationErrorDismiss
    • handleActivationRetry should call onClickCallback and clear internal server error using clearInternalServerError action.
    • handleActivationErrorDismiss should clear internal server using clearInternalServerError action.
  • If hasActivationError is true, render the error notification as per Figma design.
    • A wrapper div with the classes googlesitekit-activate-analytics-cta googlesitekit-activate-analytics-cta--error
    • It should also have the ref set to trackingRef
    • Title and description should be as of the Figma.
    • Got it should dismiss the ActivateAnalyticsCTA notification and call handleActivationErrorDismiss.
    • Retry Analytics setup CTA's onClick handler should be set to handleActivationRetry
      • Pass isSaving and disabled props, set to inProgress

• In assets/sass/components/adminbar/_googlesitekit-adminbar-overrides.scss:

  • Inside the #wpadminbar .googlesitekit-adminbar block, add overrides for .googlesitekit-activate-analytics-cta--error so that the error state renders correctly within the admin bar.

• In assets/sass/components/global/_googlesitekit-analytics-cta.scss

  • Style .googlesitekit-activate-analytics-cta--error within .googlesitekit-activate-analytics-cta to match the Figma design.
    • Background color set to $c-utility-error-container
    • Font color set to $c-utility-on-error-container
    • Make sure the spacings in the notification matches Figma design.

Test Coverage

• Update tests for WPDashboardWidget, AdminBarWidgets and SearchFunnelWidgetGA4
• Add the stories for error states.

QA Brief

• Setup following rule in tweak extension:

  • URL: .*/wp-json/google-site-kit/v1/core/modules/data/activation*
  • Regex: true
  • HTTP Method: POST
  • Status Code: 500
  • Delay: 2000 ms
  • Response payload:

  {
    "code": "internal_server_error",
    "message": "Internal server error",
    "data": {
      "status": 500
    }
  }

• Enable the rule in tweak.

• Setup SK plugin without connecting analytics module.

• Test the Analytics Setup CTA in WP Dashboard Widget, Search console widget and admin bar

  • When clicking Set up Analytics button, the request will process for 2 seconds and then it should display the error state as per Figma design.
  • Ensure it matches the Figma design.
  • Clicking Retry Analytics setup will trigger the setup again, will display the Analytics Setup CTA again when the process is in progress, if request fails again, it will show the error state again.
  • Clicking the Got it button in the error state would cause the analytics setup CTA to re-appear.

Changelog entry

• Handle Analytics setup CTA errors in the Search Funnel widget, WordPress Dashboard and Admin Bar app.