Add feature tour for GA4 metrics

[nfmohit]

Feature Description

A new feature tour will be created as per the Figma designs, that will navigate the user throughout the new GA4 components. This feature tour should be triggered as soon as the user has switched to the GA4 dashboard view, i.e. isGA4DashboardView selector (being added in #6541) returns true. This should be built behind the ga4Reporting feature flag.

Since the feature tour will be persistently dismissed upon completion and dismissal, it will not show up again.

Here is the relevant section in the design doc.

Here is a screenshot for visual aid:

---

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

Acceptance criteria

• A new feature tour should be added for GA4. It should contain the three steps/text/highlighted sections according to the Figma design: https://www.figma.com/file/0UCIE3hPeiu4NYdpAODASd/GA4-Updates?node-id=1-2598&t=lhW1X2YIi6DWjQzu-0
• The feature tour should be permanently dismissed upon completion/dismissal
• The feature tour should appear on the main Site Kit dashboard as soon as isGA4DashboardView() returns true

Implementation Brief

• Create a new assets/js/feature-tours/ga4-reporting.js file that exports an object with the following properties:
  • slug - ga4Reporting
  • contexts - an array with VIEW_CONTEXT_MAIN_DASHBOARD constant
  • version - 1.98.0
  • gaEventCategory - a callback function that returns ${ viewContext }_dashboard-ga4-reporting value
  • steps - should be an array of object that list all steps defined in the figma design
  • checkRequirements - a callback that should return TRUE if the ga4Reporting feature flag is enabled for the site
• In the assets/js/googlesitekit/datastore/user/feature-tours.js file:
  • Update the initial value of the currentTour property in the state to be undefined instead of null.
  • Rework the triggerTourForView action to call the receiveCurrentTour( null ) at the very end of the function and return null.
  • Also, instead of returning the result of the baseActions.triggerTour( tour ) action call, return the tour itself right after calling the action: https://github.com/google/site-kit-wp/blob/f04ed052ce6b654378eb1e41cfdbe76f774b7692/assets/js/googlesitekit/datastore/user/feature-tours.js#L216
• Update the useInView hook in the assets/js/hooks/useInView.js file:
  • Get the value of the forceInView property from the core/ui datastore (use select( CORE_UI ).get( 'forceInView' ) to get it)
  • Add one more useEffect to the hook that will call setHasBeenInViewOnce( true ) if the forceInView value is truthy.
• In the assets/js/modules/search-console/components/dashboard/SearchFunnelWidgetGA4/Overview/index.js file:
  • Get the current feature tour using the getCurrentTour tour selector.
  • Add a new useEffect hook that sets the forceInView value to true in the core/ui datastore and dispatches the triggerOnDemandTour action passing the ga4Reporting feature tour defined above when all selectors are resolved (the component is ready for rendering) and if:
  • the current feature tour is null,
  • showGA4 is truthy,
  • and the dashboard type is DASHBOARD_TYPE_MAIN.

Test Coverage

• Update existing js tests for feature tour actions and selectors affected by the aforementioned changes.

QA Brief

• Set up a new site and connect the plugin
• Enable the ga4Reporting feature flag
• Go to the dashboard and verify that you see the aforementioned feature tour
  • If you see another feature tour, then just close it, delete session cache in the console and reload the page.

Changelog entry

• Add a feature tour for new metrics that are available on the GA4 version of the dashboard.

[tofumatt]

For posterity, here's a link to our Slack discussion for potential solutions to implement this given the isInViewSelect issues posed here: https://10up.slack.com/archives/CBKKQEBR9/p1678975545428009

[eugene-manuilov]

@tofumatt, could you please review IB?

[tofumatt]

Most of this seems good, and I think technically the approach will work okay, but compared to what we discussed on Slack it seems this IB is a trade-off… it's much easier to understand/implement, but it might possibly cause the feature tour to activate before resolvers have finished loading, which could mean DOM elements aren't yet rendered. This would mean React Joyride will reference DOM elements that don't exist and it could cause issues.

Though actually, I realised we could call the triggerOnDemandTour( 'ga4Reporting' ) in a component (like SearchFunnelWidgetGA4/Overview/index.js) only once the component isn't in a loading state.

That would make this really slick and less fragile, since as soon as the components we care about render their contents we can trigger the tour.

Can you update the IB so that triggerOnDemandTour( 'ga4Reporting' ) is only called once any components we need to be in a non-loading state are fully-rendered?

I think then this is good-to-go, and it's better than my suggestion in Slack of waiting on resolvers themselves. Nice 👍🏻

[eugene-manuilov]

Can you update the IB so that triggerOnDemandTour( 'ga4Reporting' ) is only called once any components we need to be in a non-loading state are fully-rendered?

Thanks, @tofumatt. IB is updated.

[tofumatt]

This is awesome 👍🏻

IB ✅

[eugene-manuilov]

@marrrmarrr could you please confirm that feature tour steps shown in the Figma design are correct? I am asking because on the Figma design we have Sessions and Engaged Sessions, but in the plugin we have Sessions and Engagement Rate. Also, some steps have "Learn more" links, which URLs should we use?

[marrrmarrr]

Hey @eugene-manuilov, confirming this metric should be "Engagement rate", as is currently in the plugin. I think the Figma designs might have gone slightly out of date, since they were completed before we had a few discussions with Tom on updating some metrics' naming.

In terms of the Learn More links:

• First tooltip: "Learn how to set up conversions" should point to this help article
• Second tooltip: "Learn more" should point to this help article

[eugene-manuilov]

Thanks, @marrrmarrr. Can you give me the correct title and description for each step since text on the Figma design is outdated?

[aaemnnosttv]

@eugene-manuilov would you please add a QAB?

[mohitwp]

QA Update ⚠️

Tested on develop. @nfmohit GA4 dashboard feature tour is not getting trigger for me. I followed the below steps. Tested by creating new site and also tested using oi.ie with dev plugin.

@wpdarren Can you pleasLet me know if you are able to trigger feature tour for GA4.

Steps-

• Created new InstaWP site.
• 'ga4Reporting' Feature flag - DISABLED.
• Set up Site Kit with Analytics.
• 'ga4Reporting' Feature flag - ENABLED.
• Go to Site kit Dashboard.
• Site kit dashboard not automatically switching to GA4 when we enable 'ga4Reporting' feature flag.
• Enable GA4 view for Site kit dashboard from Settings.
• Go to Site kit Dashboard.
• No feature tour trigger for GA4 dashboard.

[wpdarren]

@mohitwp I was able to get this to work earlier this morning when writing up the bug bash instructions. Is your site in gathering state?

[mohitwp]

@wpdarren I also tested using oi.ie site. But it is not triggered for me.

[eugene-manuilov]

Steps-

• Created new InstaWP site.
• 'ga4Reporting' Feature flag - DISABLED.
• Set up Site Kit with Analytics.
• 'ga4Reporting' Feature flag - ENABLED.
• Go to Site kit Dashboard.
• Site kit dashboard not automatically switching to GA4 when we enable 'ga4Reporting' feature flag.
• Enable GA4 view for Site kit dashboard from Settings.
• Go to Site kit Dashboard.
• No feature tour trigger for GA4 dashboard.

@mohitwp you need to clear your browser session storage because we have a delay (stored in the session storage) that prevents showing feature tours too often.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified feature tour is getting trigger when we switch to Ga4 Dashboard view.
• Verified the feature tour gets permanently dismissed upon completion/dismissal
• Verified the feature tour appear on the main Site Kit dashboard as soon as isGA4DashboardView returns true.

Note :

• Under actual implementation, font size and Font family is different from figma. We implement the same font family and size as we are using for existing feature tours.
• Also, copy in figma is different and not correct. Copy under current implementation is correct.