Add GA event tracking for the Key Metrics setup screen

[techanvil]

Feature Description

GA events should be added to keep track of interaction with the Key Metrics setup screen.

---

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.

Event Name	Category	Label	Trigger	Condition
setup_flow_v3_view_key_metrics_step	{viewContext}_setup		element visibility	Key Metrics setup screen appears (NOT module setup)
setup_flow_v3_select_key_metrics_answer	{viewContext}_setup	one of: sell_products, provide_services, monetize_content, publish_blog, publish_news, share_portfolio	click	user picks reponses to the site purpose question (NOT module setup)
setup_flow_v3_complete_key_metrics_step	{viewContext}_setup		click	user clicks on "Complete setup" (NOT module setup)
view_key_metrics_step	{viewContext}		element visibility	Key Metrics setup screen appears - ONLY module setup (NOT initial setup)
select_key_metrics_answer	{viewContext}	one of: sell_products, provide_services, monetize_content, publish_blog, publish_news, share_portfolio	click	user picks reponses to the site purpose question (NOT initial setup)
complete_key_metrics_step	{viewContext}		click	user clicks on "Complete setup" (NOT initial setup)
______________________________________________	_______________________	______________________________________	______________	_____________________________________________

Implementation Brief

• Update assets/js/components/user-input/UserInputSelectOptions.js
  • Add an optional onSelect prop and call it inside the onClick callback
• In assets/js/components/key-metrics-setup/KeyMetricsSetupApp.js
  • Grab the current viewContext using the useViewContext hook
  • Track if the Key Metrics Setup screen is viewed using the useMount hook
    • If isInitialSetupFlow is true, call trackEvent using the following arguments
      • category: {viewContext}_setup
      • action: "setup_flow_v3_view_key_metrics_step"
    • Otherwise, call it with the following arguments:
      • category: viewContext
      • action: "view_key_metrics_step"
  • Inside the onSaveClick callback, after the isBusy || isSyncing guard, call trackEvent with the following arguments:
    • If isInitialSetupFlow is true:
      • category: {viewContext}_setup
      • action: "setup_flow_v3_complete_key_metrics_step"
    • Otherwise:
      • category: viewContext
      • action: "complete_key_metrics_step"
  • Create a callback called onSelect that takes an array of checked values and pass it to the UserInputSelectOptions component in the onSelect prop. Inside, call trackEvent with the following arguments
    • If isInitialSetupFlow is true:
      • category: {viewContext}_setup
      • action: "setup_flow_v3_select_key_metrics_answer"
      • label: checkedValues[0]
    • Otherwise:
      • category: viewContext
      • action: "select_key_metrics_answer"
      • label: checkedValues[0]
  • The first two arguments of trackEvent (category and action) for each event can be put in a variable if that turns out to be cleaner than 3 scattered if else statements

Test Coverage

• Add test coverage to ensure all 6 events are correctly tracked

QA Brief

• Turn on the setupFlowRefresh feature in the tester plugin.
• Install the Google Analytics Debugger Chrome extension and Open the browser developer tool's Console tab.

With Initial Setup flow

• Set up Site Kit with GA tracking enabled and check the Connect Analytics checkbox during setup. Proceed with the setup until coming back to Tell us your main goal to get tailored metrics (Key metrics setup) screen.
  • When the screen is loaded setup_flow_v3_view_key_metrics_step event will be tracked as described in AC with event category set to keyMetricsSetup_setup.
  • When any answer is selected, setup_flow_v3_select_key_metrics_answer event will be tracked as described in AC with event category set to keyMetricsSetup_setup.
  • When the form is submitted, setup_flow_v3_complete_key_metrics_step event will be tracked as described in AC with event category set to keyMetricsSetup_setup.

Without Initial Setup flow

• Set up Site Kit with GA tracking enabled and do not check the Connect Analytics checkbox during setup. Proceed with the setup until coming back to Tell us your main goal to get tailored metrics (Key metrics setup) screen.
  • When the screen is loaded view_key_metrics_step event will be tracked as described in AC with event category set to keyMetricsSetup.
  • When any answer is selected, select_key_metrics_answer event will be tracked as described in AC with event category set to keyMetricsSetup.
  • When the form is submitted, complete_key_metrics_step event will be tracked as described in AC with event category set to keyMetricsSetup.

Changelog entry

• Add opt-in internal tracking for the new key metrics setup screen.

[nfmohit]

Thank you for drafting the IB, @abdelmalekkkkk.

Determine if the Key Metrics Setup screen is in view

• Follow the same pattern found in other components (assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js for example), which involves setting up a ref on the wrapping div, the useIntersection hook, a useState to keep track if the element has already been viewed, and a useEffect to trigger the tracking when the element is viewed

While this approach is indeed used in a number of components, I feel it is unnecessary here, since this component takes up the whole screen and does not require scrolling to appear. So I think it should be sufficient to just track the view event once when the component mounts. What do you think?

Thanks!

[abdelmalekkkkk]

@nfmohit Yep that sounds more reasonable. I updated the IB accordingly. Thanks!

[nfmohit]

IB ✅