Feature Description

GA events should be added to keep track of interaction with the Analytics setup CTA (see #11816).

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

Acceptance criteria

• The following GA events should be tracked for the given actions. See the GA events sheet.
• These changes are only active when the setupFlowRefresh feature flag is enabled.

Implementation Brief

• In assets/js/components/ActivateAnalyticsCTA.js:

  • Accept a new prop, analyticsEventLabel, which is a string. It will be passed to the trackEvents callback functions (returned from useNotificationEvents) as a label if it is not undefined. Pass the label to these functions using the following object structure:

    {
      label: analyticsEventLabel;
    }

  • Use the useNotificationEvents hook, which returns a trackEvents object used to track various events. The following parameters need to be passed to useNotificationEvents:

  • id: activate-analytics-cta

  • category: undefined

  • An actions object as follows:

    {
      viewAction: 'view_cta',
      confirmAction: 'confirm_cta',
      dismissAction: 'dismiss_cta',
      clickLearnMoreAction: 'click_learn_more_link',
    }

  • Add the useMount hook in the component to track the event when the component is first viewed. Call trackEvents.view to track the view_cta action according to the ACs. Pass the arguments to the trackEvents.view function as mentioned above.

  • Create a new function, handleDismiss, and call trackEvents.dismiss within it. The dismissItem function should also be called afterward, as it is currently assigned to the onClick prop of the "Maybe later" button. Pass the arguments to the trackEvents.dismiss function as mentioned above.

  • Add an onClick prop to the Link component for the "Learn more" link (which is rendered when the setupFlowRefresh feature is enabled). This should accept a callback function that calls trackEvents.clickLearnMore. Pass the arguments to the trackEvents.clickLearnMore function as mentioned above.

• In assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js:

  • Add the analyticsEventLabel prop to the AnalyticsCTA component and pass the value admin_bar when the setupFlowRefresh feature is enabled.

• In assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js:

  • Add the analyticsEventLabel prop to the AnalyticsCTA component and pass the value wp_dashboard when the setupFlowRefresh feature is enabled.

• In assets/js/modules/search-console/components/common/ActivateAnalyticsCTA.js:

  • Add the analyticsEventLabel prop to the AnalyticsCTA component and pass the value search_funnel when the setupFlowRefresh feature is enabled.

Test Coverage

• Update the tests for AdminBarWidgets, SearchFunnelWidgetGA4, and WPDashboardWidgets to verify the tracking events mentioned above.

Set up Site Kit with the setupFlowRefresh feature flag enabled. Don't connect Analytics.

Verify that the GA events are tracked according to AC for Analytics setup CTA which appears in following places.

• In searcg console widget on SK dashboard.
• Admin dashboard widgets in Dashboard menu of WordPress.
• In admin bar on front end.

Changelog entry

• Add GA event tracking for user interaction with the Analytics setup CTA.