Implement/refactor GA tracking events for header bar

This is somewhat a follow-up to #4057.

---

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

Acceptance criteria

• The following new GA tracking events should be triggered on the Site Kit headerbar:
  • open_usermenu: User opens (i.e. not when closing) the user dropdown menu.
  • open_helpmenu: User opens (i.e. not when closing) the help menu.
  • change_daterange: User changes the date range in the filter. This event should also include an event label, passing the date range identifier they selected (e.g. “last-28-days”, “last-7-days” etc).
  • All of the above events should use {viewContext}_headerbar as the event category, where {viewContext} should be the current view context (see #4006 for the related infrastructure).
• The following new GA tracking events should be triggered within the Site Kit headerbar user dropdown menu:
  • disconnect_user: User confirms the dialog after clicking the disconnect menu item.
  • manage_sites: User clicks on the manage sites menu item.
  • All of the above events should use {viewContext}_headerbar_usermenu as the event category, where {viewContext} should be the current view context (see #4006 for the related infrastructure).
• Note that these events should be present in both the old and new header bar (see #4048).

Implementation Brief

Here’s how we’ll get the viewContext for event tracking, we’ll need to get it for every event we send:

• Import the View Context from assets/js/components/Root/ViewContextContext.js
• Pass this to the useContext hook to get the viewContext for the component:

import  ViewContextContext  from  'assets/js/components/Root/ViewContextContext';
import  {  useContext  }  from  '@wordpress/element';

const viewContext = useContext( ViewContextContext );

Make tracking calls using: https://github.com/google/site-kit-wp/blob/a1d3e7b997f90f9e885b91f5b1e8219baf6d84f3/assets/js/util/index.js#L29

In assets/js/components/help/HelpMenu.js, in the handleMenu callback, make a call to trackEvent if the menu is open: https://github.com/google/site-kit-wp/blob/a1d3e7b997f90f9e885b91f5b1e8219baf6d84f3/assets/js/components/help/HelpMenu.js#L49-L51

if ( menuOpen ) {
    await trackEvent( `${viewContext}_headerbar`, 'open_helpmenu' );
}

In assets/js/components/UserMenu.js, in the handleMenu callback, make a call to trackEvent if the menu is open: https://github.com/google/site-kit-wp/blob/a1d3e7b997f90f9e885b91f5b1e8219baf6d84f3/assets/js/components/UserMenu.js#L92-L94

if ( menuOpen ) {
    await trackEvent( `${viewContext}_headerbar`, 'open_usermenu' );
}

Add the tracking call to manage_sites when the button is pressed prior to the navigateTo call: https://github.com/google/site-kit-wp/blob/a1d3e7b997f90f9e885b91f5b1e8219baf6d84f3/assets/js/components/UserMenu.js#L108-L110

await trackEvent( `${viewContext}_headerbar_usermenu`, 'manage_sites' );
navigateTo( proxyPermissionsURL );

Add the tracking call to disconnect_user when the button is pressed prior to the navigateTo call: https://github.com/google/site-kit-wp/blob/a1d3e7b997f90f9e885b91f5b1e8219baf6d84f3/assets/js/components/UserMenu.js#L121-L128

await trackEvent( `${viewContext}_headerbar_usermenu`, 'disconnect_user' );
navigateTo( postDisconnectURL );

In assets/js/components/DateRangeSelector.js, in handleMenuItemSelect, make a call to trackEvent if the date range has changed: https://github.com/google/site-kit-wp/blob/a1d3e7b997f90f9e885b91f5b1e8219baf6d84f3/assets/js/components/DateRangeSelector.js#L64-L67

1. Check that the date range has changed, as there is nothing stopping us from selecting the same range as we already have.
2. If it has changed, send the tracking event.

const newDateRange =  Object.values( ranges )[ index ].slug;
if (  newDateRange !== dateRange ) {
    await trackEvent( `${viewContext}_headerbar`, 'change_daterange', newDateRange );
    setDateRange( newDateRange );
}
setMenuOpen( false );

Test Coverage

• Update assets/js/components/UserMenu.test.js

QA Brief

• Install the Google Analytics Debugger extension for your browser
• Opt-in for tracking on the SK settings page
• Go to the dashboard page and verify that events mentioned in AC are triggered correctly.

Changelog entry

• N/A

[cole10up]

QA ❌

Tested:

Working through Google Analytics debugger in the console clicking the following (Replaced IDs with XXX):

Open User Menu displays: analytics.js:26 Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “settings_headerbar”, eventAction: “open_usermenu”})

Help: Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “dashboard_headerbar”, eventAction: “open_helpmenu”})

Manage Sites: Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “settings_headerbar_usermenu”, eventAction: “manage_sites”})

Disconnect: Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “settings_headerbar_usermenu”, eventAction: “disconnect_user”})

Date changes:

7 days Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “dashboard_headerbar”, eventAction: “change_daterange”, eventLabel: “last-7-days”})

14 days Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “dashboard_headerbar”, eventAction: “change_daterange”, eventLabel: “last-14-days”})

28 days NO EVENT WAS TRIGGERED

90 days Running command: ga(“gtag_XXX.send”, {dimension1: “http://supremeqa.com”, dimension2: “true”, dimension3: “XXX”, dimension4: “1.43.0”, dimension5: “swgModule”, hitCallback: [function], hitType: “event”, eventCategory: “dashboard_headerbar”, eventAction: “change_daterange”, eventLabel: “last-90-days”})

Sending back to execution to address the missing event for 28 days.

To reproduce change the date to 7 days and back to 28 days, notice no event for 28 triggers.

[eugene-manuilov]

In assets/js/components/help/HelpMenu.js, prior to the render, make a call to trackEvent if the menu is open: In assets/js/components/UserMenu.js, prior to the render, make a call to trackEvent if the menu is open:

@ivankruchkoff IB almost looks good to me. The only thing we need to change is that these events should be tracked in handleMenu callbacks, not in the component body prior to the render.