Create the "Top earning content" key metric widget tile

[jimmymadon]

Feature Description

This key metric widget tile should only appear if users have both Analytics (4) and AdSense modules connected. When there is no adSenseLinked account available in Analytics settings (see #8048), this widget should display a CTA asking users to link their AdSense and Analytics (see #8050).

If the adSenseLinked account setting is set, the actual content should be displayed.

NOTE: This issue must be deployed in the same release as #8051 and #8050.

---

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

Acceptance criteria

• A new Key Metrics Widget, "Top earning content" should be created and available.
• The Widget will have following attributes:
  • title: Top earning pages
  • description: Pages that generated the most AdSense revenue
  • slug: kmAnalyticsAdSenseTopEarningContent
  • Metrics: totalAdRevenue
  • Dimensions: pagePath
  • Value: It should be a table pattern metric tile, with the pageTitle showing up as the first column, and totalAdRevenue showing up as the second column (with currency sign).
• The Widget will show top AdSense revenue earning contents (post/page).
• The module should be dependent on both analytics-4 and adsense module. If either module is not connected, the corresponding Connect{GA4/AdSense}CTATileWidget should be rendered instead.
• If both modules are connected but are not linked, a CTA should be displayed instead, asking user to connect their GA4 property with their AdSense account, similar to 8050.
• The widget should be available for view only users who have access to both Analytics 4 and AdSense module and the configured property and accounts are linked.

Implementation Brief

Update assets/js/modules/adsense/components/widgets/TopEarningContentWidget.js

• You can borrow good part of the logic from PopularContentWidget as starting point
• Update reportOptions with parameters outlined in the AC
• Leave limit to 3 for consistency with other widgets
• Check for select( MODULES_ANALYTICS_4 ).getAdsenseLinked() and whether the context is view-only dashboard. If the context is not view-only and adsenseLinked is false, output early <AdSenseLinkCTA /> component wrapped with <Widget> component
• When returning metric value in numFmt function, pass an object as second parameter {style: 'currency', currency}. You can obtain currency from report object - report.metadata.currencyCode

Move AdSenseLinkCTA component over to the Adsense module

• Move from assets/js/modules/analytics-4/components/common/AdSenseLinkCTA.js to the assets/js/modules/adsense/components/common/AdSenseLinkCTA.js

Add KM_ANALYTICS_ADSENSE_TOP_EARNING_CONTENT to the assets/js/components/KeyMetrics/key-metrics-widgets.js

• Use title and description text defined in AC
• Use description text for infoTooltip
• For displayInList it should show if following conditions are met:
  • analytics-4 and adsense modules are active
  • Or widget is active, check it using isKeyMetricActive selector on CORE_USER store
  • Or if in view only context, besides both modules being active, AdSense should be linked (getAdSenseLinked())

Update assets/js/modules/adsense/index.js:

• Under KM_ANALYTICS_ADSENSE_TOP_EARNING_CONTENT widget registration, for isActive parameter:
  • Besides the current check for isKeyMetricActive, check if we are in view only context, and in that case Analytics and AdSense should be linked (getAdSenseLinked), otherwise widget should not be displayed for view only users

Test Coverage

• Update tests to include new widget in assets/js/components/KeyMetrics/MetricsSelectionPanel/index.test.js where applicable
• Add tests and stories for TopEarningContent

QA Brief

• Enable the ga4AdSenseIntegration feature flag
• View the TopEarningContentWidget in Storybook and confirm each state matches designs/AC.
• Simulate linking your AdSense and Analytics account by updating the adSenseLinked setting in the store (this will allow you to QA this ticket before Schedule a cron task to sync adSenseLinked status #8049 is merged).
  You can achieve this by running the following the developer console:

googlesitekit.data.dispatch('modules/analytics-4').setAdSenseLinked(true)

• Enable key metric widgets, and enable the "Top earning content" widget. Results from your site, if available, should appear in the widget.

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

Changelog entry

• Add the "Top Earning Content" Key Metric widget tile.

[jimmymadon]

Moving this issue to stalled for now as we will have to wait for the GA4 API to support an integration with AdSense.

c.c. @aaemnnosttv

[mxbclang]

@tofumatt FYI, we discussed this issue for the Top earning content tile during today's Updates & Planning call. This as one of the tiles we initially had planned for KMW, but the GA4 integration with AdSense wasn't yet ready. Now that we're going to be building the integration, we'd like to add this tile, too.

@aaemnnosttv that we should be able to work on it and get it implemented in the latter part of the AdSense + GA4 epic. I'm going to make a note to myself to move it out of Stalled and into AC once we start moving on engineering for this epic. Let me know if you see any issues with this approach!

[mxbclang]

@kuasha420 Just noting that we'd like to include this in the next sprint (starting w/c 12 Feb) so we should probably get it moving to ACR soon. Thanks!

[ivonac4]

@kuasha420 can we add an estimate to this task at this point?

[mxbclang]

@ivonac4 Usually estimates aren't added until the IB step. If you're looking for an estimate to help with sprint planning, I'd put it in as a 19 to be safe – most of the tiles we've built in the past were 15 or 19 point issues. :)

[eugene-manuilov]

AC ✔️

[zutigrm]

Hi @kuasha420 , what content should we use for infoTooltip?

[techanvil]

Hi @zutigrm, thanks for drafting this IB. The HOC is an interesting idea. However, I don't think we'll need it: we already have the AdSenseLinkCTA rendering defined in #8050, and as you'll see there, we already have the placeholder component DashboardTopEarningPagesWidgetGA4 for this widget which can be updated.

So, please can you make an appropriate update to this IB.

[mohitwp]

@wpdarren As mentioned in slack are you able to link AdSense and Analytics using oi.ie or any of your live site and not getting prompt if analytics and AdSense are already linked. Like as I mentioned in slack happening with oi.ie site ?

[wpdarren]

@mohitwp the testing on this ticket is related to the Top Earning Content key metric widget but because the site is not showing as linked the metric isn't appearing in the metrics panel. I am using a live site that has Analytics and AdSense linked and the CTA within monetization is showing that it is not linked. You can see from my screenshot it is. I even deleted the old linking and re-linked and reset - set up Site Kit with Analytics and Adsense and the CTA was the same.

I am wondering if we need to wait for another ticket to be merged because we can test this ticket and #8051 so maybe @benbowler @tofumatt can help here.

[techanvil]

I believe this issue depends on #8049 #8050 to be fully E2E testable, otherwise we'd need to manually set the adSenseLinked setting to test it on the dashboard.

However, it does need a followup PR as per #8249 (review). I'm assigning back to @benbowler in Execution for the fix. Looks like Matt is on the case!

[benbowler]

@tofumatt @zutigrm I have pushed a few updates to the PR #8257 and have tested it myself and I'm able to view it successfully when manually updating the adSenseLinked state in the store. I've updated the QAB with instructions on how to QA this without the need for #8049 to be merged.

Back into CR with you @tofumatt

[kuasha420]

I have a feeling that this will not work on View only dashboard until #8059 is merged. See the commit here.

cc @wpdarren @benbowler @tofumatt

[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 ⚠️

@benbowler
Question :- Clicking on page link under KM widget navigate user to analytics page engagement report which don't show page revenue. Although QAB and AC don't have any info abut the report URL but want to flag this here. Can you please confirm if current navigation is correct or we will change this through any other ticket ?

• Tested on dev environment.
• Verified when ga4AdSenseIntegration feature flag is enabled and both AdSense and Analytcis are connected then and only KM 'Top earning pages' widgets showing under the KM widgets listing and on selecting it prompt implemented under Display Top Earning Pages Widget with a CTA to ask users to link their AdSense and Analytics when both modules are connected #8050 is appearing.
• Verified when ga4AdSenseIntegration feature flag is not enabled then KM 'Top earning pages' widgets showing under the KM widgets listing.
• Verfied widgets Title, Tooltip and slug details as per AC.
• Verified that on View only dashboard link not appear for the pages.
• Verified that if Analytics and AdSense are not linked then Key metrics Top earning page widgets is not showing under widgets listing on 'View - Only Dashboard'.
• Verified that if only Analytics is shared then then Key metrics Top earning page widgets is not showing under widgets listing on 'View - Only Dashboard'.
• Verfiied that if Only AdSense is shared then Key metrics tiles are not showing.
• Verified that if Analytics and AdSense are both connected. Shared and linked together then Top earning page widgets is showing under widgets listing on 'View - Only Dashboard' and user is able to select this KM widget.

Tool Tip Title and slug-

When both Analytics and AdSense are connected -

If Analytics is not connected -

If AdSense is not connected -

Only Analytics is shared (View Only Dashboard')

When both Analytics and Adsense are connected and linked. Also, shared with non admin users ('View Only Dashboard'

[benbowler]

@mohitwp Yes, I believe this is the correct report link because it shows the "Total revenue" metric for this specific page.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified when ga4AdSenseIntegration feature flag is enabled and both AdSense and Analytcis are connected then and only KM 'Top earning pages' widgets showing under the KM widgets listing and on selecting it prompt implemented under Display Top Earning Pages Widget with a CTA to ask users to link their AdSense and Analytics when both modules are connected #8050 is appearing.
• Verified when ga4AdSenseIntegration feature flag is not enabled then KM 'Top earning pages' widgets showing under the KM widgets listing.
• Verfied widgets Title, Tooltip and slug details as per AC.
• Verified that on View only dashboard link not appear for the pages.
• Verified that if Analytics and AdSense are not linked then Key metrics Top earning page widgets is not showing under widgets listing on 'View - Only Dashboard'.
• Verified that if only Analytics is shared then then Key metrics Top earning page widgets is not showing under widgets listing on 'View - Only Dashboard'.
• Verfiied that if Only AdSense is shared then Key metrics tiles are not showing.
• Verified that if Analytics and AdSense are both connected. Shared and linked together then Top earning page widgets is showing under widgets listing on 'View - Only Dashboard' and user is able to select this KM widget.

Tool Tip Title and slug-

When both Analytics and AdSense are connected -

If Analytics is not connected -

If AdSense is not connected -

Only Analytics is shared (View Only Dashboard')

When both Analytics and Adsense are connected and linked. Also, shared with non admin users ('View Only Dashboard'

[mohitwp]

Note : Putting note here to test again when #8049 get merge.