Create GA4 ModulePopularPagesWidget

[aaemnnosttv]

Feature Description

---

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

Acceptance criteria

• A new component ModulePopularPagesWidgetGA4 should be created based on the existing ModulePopularPagesWidget
• 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/modules/analytics-4/components/module/ModulePopularPagesWidgetGA4.js which exports the ModulePopularPagesWidgetGA4 functional component.
  • Component should be similar to the one in assets/js/modules/analytics/components/module/ModulePopularPagesWidget with the following updates:
    • Extract the Header and Footer if needed as it's done for ModulePopularPagesWidget
    • Replace occurrences of the Analytics data store (MODULES_ANALYTICS) by the GA4 Analytics data store (MODULES_ANALYTICS_4) except for getServiceReportURL selector call.
    • Replace the metrics and dimensions by their GA4 counterparts as per the doc here, including the metric names.
  • Stories should be within assets/js/modules/analytics-4/components/module/ModulePopularPagesWidgetGA4.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

• Add tests similar to assets/js/modules/analytics/components/module/ModulePopularPagesWidget/Footer.test.js

QA Brief

• This is currently only testable in Storybook.
• Check the stories under Analytics > Widgets > ModulePopularPagesWidgetGA4. These should be broadly in line with the existing UA version under Analytics Module > Components > Module Page > Popular Pages Widget, except with different data, and with the Engaged Sessions rather than Bounce Rate column.
• PR Storybook (will be deleted when merged to develop).
• develop Storybook.
• main Storybook.

Changelog entry

• Create the Analytics 4 version of the popular pages widget.

[techanvil]

IB ✅

[mohitwp]

QA Update ⚠️

@techanvil
I've noticed that under 'OverAllpagemetricesWidgetGA4" Engaged sessions value is in percentage % where as under "ModulePopularWidfgestStory" value of 'EngagedSessions' is not defined. I'm wondering is the current implementation is correct, or we should show all values in percentage ?

[techanvil]

Hmm, thanks for raising this @mohitwp. We have been implementing Engaged Sessions as a regular integer, rather than a percentage, so this suggests the DashboardOverallPageMetricsWidgetGA4 implementation is inconsistent with our approach so far.

However, referring back to the PRD I've noticed that there's an ambiguity about this and it may be the case we need to revisit and use a different metric instead, engagementRate, and display it as a percentage. I've asked @marrrmarrr to clarify this with a question on the PRD.

[techanvil]

@mohitwp, as discussed on Slack we need to ensure Engaged Sessions is presented as a percentage, and additionally we need to change the metric being queried from engagedSessions to engagementRate. I'm moving this issue back to Execution to address this. I'm also raising a following PR for #6218 to address DashboardOverallPageMetricsWidgetGA4.

[mohitwp]

QA Update ✅

• Tested Storybook..

• Compared ModulePopularPagesWidgetGA4 with PopularPagesWidget .

• As per comment above - Engaged sessions are now presented in percentage.

• Storybook stories added to cover the following cases

  • Loading
  • Gathering data ("Data unavailable")
  • Zero data (data available but metric is 0)
  • Error
  • Ready (data available and non-zero)

Note - As discussed with @techanvil - Engaged sessions title will change to engagement rate through this PR - #6693