Create GA4 AdminBarUniqueVisitors

[aaemnnosttv]

Feature Description

---

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

Acceptance criteria

• A new component AdminBarUniqueVisitorsGA4 should be created based on the existing AdminBarUniqueVisitors
• The component should source its report data from the analytics-4 store
  • See here for a table of equivalent metrics for GA4
• No changes should be made in the dashboard yet
• 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

• Once Add getReport selector for GA4 #6173 and Introduce factory for Analytics 4 response mock data #6174 have been merged.
• Create assets/js/components/adminbar/AdminBarUniqueVisitorsGA4.js which exports the AdminBarUniqueVisitorsGA4 functional component.
  • Component should be similar to the one in assets/js/components/adminbar/AdminBarUniqueVisitors.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 the doc here, including the metric names.
  • Stories should be within assets/js/components/adminbar/AdminBarUniqueVisitorsGA4.stories.js and make use of the Analytics 4 response mock data added from Introduce factory for Analytics 4 response mock data #6174
    • Refer to the AC for the different stories to be added.

Test Coverage

• No new tests to be added.

QA Brief

• This is currently only testable in Storybook.
• Check the stories under VIEWS > AdminBarApp > AdminBarUniqueVisitorsGA4. These should be broadly in line with the existing UA version under VIEWS > AdminBarApp > AdminBarUniqueVisitors, except with the following additional stories:
  • Loading
  • Error
• PR Storybook (will be deleted when merged to develop).
• develop Storybook.
• main Storybook.

Screenshots

Changelog entry

• Add the Analytics 4 version of the unique visitors tile in the admin bar.

[techanvil]

IB ✅

[derweili]

As discussed in Slack and Engineering Stand-up, waiting for #6514 to be merged, before continuing on this.

[mxbclang]

Thanks @derweili, unassigned this from the current sprint and from you for now

[mohitwp]

QA Update ✅

• Tested StoryBook..

• Compared AdminBarUniqueVisitorsGA4 storybook with AdminBarUniqueVisitors.

• AdminBarUniqueVisitorsGA4 storybook have additional below cases-

   *  Loading
   *  Gathering