Use GA4 data for `DashboardTopEarningPagesWidget`

[tofumatt]

Feature Description

The DashboardTopEarningPagesWidgetGA4 should be updated to use GA4 data/APIs once #8048 is available to detect AdSense linked accounts in GA4 properties.

---

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

Acceptance criteria

• DashboardTopEarningPagesWidgetGA4 should fetch the top earning pages from the GA4 API and display them in the same way that DashboardTopEarningPagesWidget does.
• The widget should only output data when an adSenseLinked account setting is detected (see: #8048).
• If adSenseLinked account setting is not set, AdSenseLinkCTA should appear instead, instructing the user on how to link their accounts. See: https://docs.google.com/document/d/1-JenwPTAkw0eTkmESzjTOfgphs9qpRYH0h3xk_s3a4o/edit#heading=h.g3qjqjqd6s0x

Implementation Brief

In assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidgetGA4.js:

• Wait for the completion of the merge of #8050.
• Copy the contents from DashboardTopEarningPagesWidget.js into DashboardTopEarningPagesWidgetGA4.js.
• Displaying the AdSenseLinkCTA based on the adSenseLinked account setting is being implemented in #8050.
• Update the following selectors to use MODULES_ANALYTICS_4 store instead of MODULES_ANALYTICS:
  • isGatheringData
  • getReport
  • getErrorForSelector
  • hasFinishedResolution
  • getAdsenseLinked
  • getServiceReportURL
• Construct the report arguments object with the necessary properties, including a dimension filter for the AdSense account. This object should be structured as follows and passed to the getReport selector:
  • dimensions: [ 'pageTitle', 'pagePath', 'adSourceName' ]
  • metrics: [ { name: 'totalAdRevenue' } ],
  • dimensionFilter: { filter: { fieldName: 'adSourceName', stringFilter: { matchType: 'EXACT', value: 'Google AdSense account (pub-XXXXX)', }, }, } (Replace pub-XXXXX with the actual AdSense account ID. See Querying AdSense metrics via Analytics 4)
  • orderBys: [ { metric: { metricName: 'totalAdRevenue' } } ],
  • limit: 5.
• Update the tableColumns array with the following:
  • Get the the title and the url from row.dimensionValues instead of row.dimensions.
  • Get the service URL from getServiceReportURL with the unifiedPagePathScreen filters and pass it to the Link component.
  • Update the field to metricValues.0.value instead of metrics.0.values.0.
• Pass data?.rows to the rows prop of the ReportTable component instead of data?.[ 0 ]?.data?.rows.

Test Coverage

• Add possible stories in DashboardTopEarningPagesWidgetGA4.stories.js.
• Add VRT scenarios for the stories.

Test Coverage

QA Brief

• [ ] Enable the ga4AdSenseIntegration feature flag
• Connect both Analytics and Adsense module and ensure the selected property and adsense accounts are linked.
• Visit SK dashboard and run the following snippet on Browser Console to fore linked state.
  • googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true)
• The Widget with data should show up in the monetization section.
• Check view only dashboard.

When the ga4AdSenseIntegration feature flag is disabled, this KMW tile should not appear.

Changelog entry

• Use Google Analytics 4 API to get revenue data for pages in the "Top earning pages" widget when user has linked AdSense and Analytics account.

[tofumatt]

Note: parts of the logic for rendering this widget is covered in #8050. This IB should add the loading || isGatheringData === undefined logic from here though: https://github.com/google/site-kit-wp/blob/8612fe95e03b6029aab6cd32c9df6afd1d860225/assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidget.js#L152-L158

[hussain-t]

Hi @aaemnnosttv @tofumatt, I've encountered a challenge as we progress with this. In the GA4 migration documentation, I couldn't locate the GA4 equivalents for ga:adsenseRevenue, ga:adsenseECPM, and ga:adsensePageImpressions. It appears that totalAdRevenue might correspond to ga:adsenseRevenue, but the direct mappings for the other two metrics are unclear. Additionally, I found some extra metrics in this support guide. The Analytics UI provides some insight into the new metrics, but this implies we'll need to adapt our widget and revise the design doc accordingly. Could you give me insights or guidance on approaching these metric mappings and the widget modification?

[aaemnnosttv]

@hussain-t as noted in the design doc (see Querying AdSense metrics via Analytics 4), there is not an equivalent for these metrics, but the only one we're really concerned about is totalAdRevenue which we need to filter for the specific AdSense account to get the numbers just for AdSense.

While the legacy component we're reimplementing here has references to other metrics in it as you pointed out, they aren't actually used in its current state. It could be those were removed from the presentation at some point without being removed from the report we request, but the component will only show linked page titles with one column for earnings (revenue).

Let me know if you have any other questions 👍

[hussain-t]

Sounds good. Thanks, @aaemnnosttv 👍

[aaemnnosttv]

Construct the report arguments object with the following properties and pass it to the getReport selector:

• dimensions: pageTitle and pagePath,
• metrics: totalAdRevenue

@hussain-t please refer to the part of the design doc I referenced in the comment above. totalAdRevenue is not AdSense-specific and could contain revenue from other sources, or even other AdSense accounts than the one connected in SK. In order to get accurate metrics, we need to apply filtering in the request.

[hussain-t]

Thanks, @aaemnnosttv. I've updated the IB to include the dimension filters. I've also verified it using https://ga-dev-tools.google/ga4/query-explorer/. Please LMK if that looks good.

[hussain-t]

Hi @tofumatt @bethanylang, I have marked this issue as blocked due to its dependency on #8050. Displaying the AdSenseLinkCTA based on the adSenseLinked account setting is being implemented in 8050. Please refer to this comment and this.

[mxbclang]

Thanks @hussain-t! Heads up for @ivonac4 as well as she's managing sprints at the moment.

[ivonac4]

Thanks for the info, updated in the Epic tracker and Design doc.

[aaemnnosttv]

• dimensions: [ 'pageTitle', 'pagePath', 'adSourceName' ]

@hussain-t I don't think we need to include adSourceName as a dimension in the request since we won't display that anywhere, it should only be needed as a filter. We can confirm this during execution/review though.

getAdsenseLinked

FWIW, this is getAdSenseLinked in GA4.

IB ✅

[zutigrm]

There is still a pending issue in execution before the blocking dependency in MR can be merged. Un-assigning myself until this is ready to be worked on

[zutigrm]

Got a confirmation that blocking issues will most likely be merged tomorrow, assigning myself back

[tofumatt]

I've checked with @marrrmarrr to see whether this tile should filter out non-AdSense revenue or not. Currently it doesn't, which is expected from a QA perspective (eg. revenue from other sources should appear, see: https://10up.slack.com/archives/CBKKQEBR9/p1708348963677589?thread_ts=1708348556.944389&cid=CBKKQEBR9).

If it should be filtered, we'll file a follow-up issue.

[mohitwp]

QA Update ⚠️

• Tested on dev environment.
• Tested by running code snippet in console.
• Verified DashboardTopEarningPagesWidget shows up with data.

@kuasha420

Question > There is some data difference between DashboardTopEarningPagesWidget and 'Top Earning Pages" KM widget. I'm expecting that revenue data for pages in both widgets will be similaer. But see below screenshots under KM Widget revenue data for `[What do “L” or “N” car stickers mean in Ireland? – Oi.ie – Brasileiros na Irlanda] page is different in both widget in KM it is $0.55 and in Dashboard widget it is $0.51. Key metrics data is more close to actual revenue which is $0.56.

  

[kuasha420]

@mohitwp Thanks for the findings! This is a known issue and will be fixed in #8281 where data for both sources will be filtered by AdSense only. Cheers!

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Tested by linked GA4 and AdSense through code snippet mentioned under QAB.
• Verified when ga4AdSenseIntegration feature flag is enabled and both AdSense and Analytcis are connected and linked then and only DashboardTopEarningPagesWidget is showing.
• Verified when ga4AdSenseIntegration feature flag is not enabled then DashboardTopEarningPagesWidget is not showing.
• Verified storybooks stories.
• Note : Data difference issue reported above will get resolve by #8281.
• Note : Putting note here to test again when https://github.com/google/site-kit-wp/issues/8049 get merge.