Create GA4 WPDashboardUniqueVisitorsChart

[aaemnnosttv]

Feature Description

---

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

Acceptance criteria

• A new component WPDashboardUniqueVisitorsChartGA4 should be created based on the existing WPDashboardUniqueVisitorsChart
• The component should source its report data from the analytics-4 store
  • See here for a table of equivalent metrics for GA4
• The component should be rendered on the WP dashboard based on the result of isGA4DashboardView
• Storybook stories should be added to cover the following cases (with and without a current entity URL set: example):
  • Loading
  • Gathering data ("Data unavailable")
  • Zero data (data available but metric is 0)
  • Error
  • Ready (data available and non-zero)

Implementation Brief

• Create assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsChartWidgetGA4.js which exports the WPDashboardUniqueVisitorsChartWidgetGA4 functional component.
  • The component should be similar to the one in assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsChartWidget.js with the following updates:
    • Replace occurrences of the Analytics data store (MODULES_ANALYTICS) by the GA4 Analytics data store (MODULES_ANALYTICS_4).
    • Replace the metrics and dimensions by their GA4 counterparts as per this doc here, including the metric names.
• Stories should be within assets/js/components/wp-dashboard/WPDashboardUniqueVisitorsChartWidgetGA4.stories.js and make use of the Analytics 4 response mock data added from Introduce factory for Analytics 4 response mock data #6174, similar to other WPDashboard*GA4.stories.js files.
  • Refer to the AC for the different stories to be added.
• In assets/js/components/wp-dashboard/WPDashboardWidgets.js:
  • Check if the ga4Reporting feature flag is enabled via the useFeature hook.
  • Check the isGA4DashboardView() selector from the modules/analytics store.
  • If the above is true, render:
    • WPDashboardUniqueVisitorsChartWidgetGA4 instead of WPDashboardUniqueVisitorsChartWidget.

Test Coverage

• No tests need to be added/updated.

QA Brief

• Setup a new site and connect the plugin.
• Activate and connect the Analytics module that has GA4 data.
• Enable ga4Reporting feature tour and GA4 dashboard in Analytics settings.
• Go to the WordPress dashboard and verify that you see the unique visitors chart widget.

Changelog entry

• Add GA4 version of the Unique Visitors chart on the WP dashboard.

[eugene-manuilov]

IB ✔️

[aaemnnosttv]

@eugene-manuilov Heads up that I've tweaked the AC per the most recent logic in WPDashboardWidgets which uses isGA4DashboardView for the condition which checks the feature flag internally. Basically it should show the GA4 version if the feature is enabled AND the dashboardView is set to GA4.

[nfmohit]

@eugene-manuilov Depending on Evan's comment above, I have made a slight change to the IB for clarification (while having the previous iteration as striked out). Thanks!

[wpdarren]

QA Update: ✅

Verified:

• The WordPress dashboard shows e the unique visitors chart widget for GA4. WPDashboardUniqueVisitorsChartGA4
  • It doesn't mention this in the QAB, but I have tested this for a site in gathering, zero data
  • Also tested on a site with real data. Can see when I refresh the develop branch that the chart changes from WPDashboardUniqueVisitorsChart to WPDashboardUniqueVisitorsChartGA4

Screenshots