GA4 Top Earning Pages Widget

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

@@ -31,32 +31,35 @@ import { __, _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { ADSENSE_GA4_TOP_EARNING_PAGES_NOTICE_DISMISSED_ITEM_KEY as DISMISSED_KEY } from '../../constants';
+import Link from '../../../../components/Link';
+import PreviewTable from '../../../../components/PreviewTable';
+import ReportTable from '../../../../components/ReportTable';
+import SourceLink from '../../../../components/SourceLink';
+import TableOverflowContainer from '../../../../components/TableOverflowContainer';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
-import { MODULES_ADSENSE } from '../../datastore/constants';
-import {
-	MODULES_ANALYTICS,
-	DATE_RANGE_OFFSET,
-} from '../../../analytics/datastore/constants';
+import useViewOnly from '../../../../hooks/useViewOnly';
+import { numFmt } from '../../../../util';
+import whenActive from '../../../../util/when-active';
 import { MODULES_ANALYTICS_4 } from '../../../analytics-4/datastore/constants';
+import { ZeroDataMessage } from '../../../analytics/components/common';
+import { DATE_RANGE_OFFSET } from '../../../analytics/datastore/constants';
 import { generateDateRangeArgs } from '../../../analytics/util/report-date-range-args';
-import whenActive from '../../../../util/when-active';
-import AdBlockerWarning from '../common/AdBlockerWarning';
+import { ADSENSE_GA4_TOP_EARNING_PAGES_NOTICE_DISMISSED_ITEM_KEY as DISMISSED_KEY } from '../../constants';
+import { MODULES_ADSENSE } from '../../datastore/constants';
 import { AdSenseLinkCTA } from '../common';
-import SourceLink from '../../../../components/SourceLink';
-import SettingsNotice from '../../../../components/SettingsNotice';
-import useViewOnly from '../../../../hooks/useViewOnly';
-import ReportTable from '../../../../components/ReportTable';
-import Null from '../../../../components/Null';
-import InfoIcon from '../../../../../svg/icons/info-circle.svg';
-import { Grid } from '../../../../material-components';
-const { useSelect } = Data;
+import AdBlockerWarning from '../common/AdBlockerWarning';
+
+const { useSelect, useInViewSelect } = Data;
 
-function DashboardTopEarningPagesWidgetGA4( { WidgetNull, Widget } ) {
+function DashboardTopEarningPagesWidgetGA4( {
+	WidgetNull,
+	WidgetReportError,
+	Widget,
+} ) {
 	const viewOnlyDashboard = useViewOnly();
 
-	const isDismissed = useSelect( ( select ) =>
-		select( CORE_USER ).isItemDismissed( DISMISSED_KEY )
+	const isGatheringData = useInViewSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).isGatheringData()
 	);
 
 	const { startDate, endDate } = useSelect( ( select ) =>
@@ -65,11 +68,42 @@ function DashboardTopEarningPagesWidgetGA4( { WidgetNull, Widget } ) {
 		} )
 	);
 
+	const args = {
+		startDate,
+		endDate,
+		dimensions: [ 'pageTitle', 'pagePath' ],
+		metrics: [ { name: 'totalAdRevenue' } ],
+		orderBys: [ { metric: { metricName: 'totalAdRevenue' } } ],
+		limit: 5,
+	};
+
+	const data = useInViewSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getReport( args )
+	);
+
+	const error = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getErrorForSelector( 'getReport', [
+			args,
+		] )
+	);
+
+	const loading = useSelect(
+		( select ) =>
+			! select( MODULES_ANALYTICS_4 ).hasFinishedResolution(
+				'getReport',
+				[ args ]
+			)
+	);
+
+	const isDismissed = useSelect( ( select ) =>
+		select( CORE_USER ).isItemDismissed( DISMISSED_KEY )
+	);
+
 	const analyticsMainURL = useSelect( ( select ) => {
 		if ( viewOnlyDashboard ) {
 			return null;
 		}
-		return select( MODULES_ANALYTICS ).getServiceReportURL(
+		return select( MODULES_ANALYTICS_4 ).getServiceReportURL(
 			'content-publisher-overview',
 			generateDateRangeArgs( { startDate, endDate } )
 		);
@@ -99,6 +133,14 @@ function DashboardTopEarningPagesWidgetGA4( { WidgetNull, Widget } ) {
 		);
 	}
 
+	if ( loading || isGatheringData === undefined ) {
+		return (
+			<Widget noPadding Footer={ Footer }>
+				<PreviewTable rows={ 5 } padding />
+			</Widget>
+		);
+	}
+
 	if ( ! isAdSenseLinked && ! viewOnlyDashboard ) {
 		return (
 			<Widget Footer={ Footer }>
@@ -107,6 +149,14 @@ function DashboardTopEarningPagesWidgetGA4( { WidgetNull, Widget } ) {
 		);
 	}
 
+	if ( error ) {
+		return (
+			<Widget Footer={ Footer }>
+				<WidgetReportError moduleSlug="analytics-4" error={ error } />
+			</Widget>
+		);
+	}
+
 	function Footer() {
 		return (
 			<SourceLink
@@ -123,37 +173,73 @@ function DashboardTopEarningPagesWidgetGA4( { WidgetNull, Widget } ) {
 			title: __( 'Top Earning Pages', 'google-site-kit' ),
 			tooltip: __( 'Top Earning Pages', 'google-site-kit' ),
 			primary: true,
-			Component: Null,
+			Component( { row } ) {
+				const [ { value: title }, { value: url } ] =
+					row.dimensionValues;
+				const serviceURL = useSelect( ( select ) => {
+					return ! viewOnlyDashboard
+						? select( MODULES_ANALYTICS_4 ).getServiceReportURL(
+								'all-pages-and-screens',
+								{
+									filters: {
+										unifiedPagePathScreen: url,
+									},
+									dates: {
+										startDate,
+										endDate,
+									},
+								}
+						  )
+						: null;
+				} );
+
+				return (
+					<Link
+						href={ serviceURL }
+						title={ title }
+						external
+						hideExternalIndicator
+					>
+						{ title }
+					</Link>
+				);
+			},
+		},
+		{
+			title: __( 'Earnings', 'google-site-kit' ),
+			tooltip: __( 'Earnings', 'google-site-kit' ),
+			field: 'metricValues.0.value',
+			Component( { fieldValue } ) {
+				return (
+					<span>
+						{ numFmt( fieldValue, {
+							style: 'currency',
+							currency: data?.metadata?.currencyCode,
+						} ) }
+					</span>
+				);
+			},
 		},
 	];
 
 	return (
 		<Widget noPadding Footer={ Footer }>
-			<ReportTable rows={ [] } columns={ tableColumns } />
-
-			<Grid className="googlesitekit-padding-top-0">
-				<SettingsNotice
-					Icon={ InfoIcon }
-					notice={ __(
-						'Top earning pages are not yet available in Google Analytics 4',
-						'google-site-kit'
-					) }
-					dismiss={ DISMISSED_KEY }
-					className="googlesitekit-margin-top-0 googlesitekit-margin-bottom-0 googlesitekit-settings-notice-adsense-top-earning-pages-widget"
-				>
-					{ __(
-						'Site Kit will notify you as soon as you can connect AdSense and Analytics again',
-						'google-site-kit'
-					) }
-				</SettingsNotice>
-			</Grid>
+			<TableOverflowContainer>
+				<ReportTable
+					rows={ data?.rows || [] }
+					columns={ tableColumns }
+					zeroState={ ZeroDataMessage }
+					gatheringData={ isGatheringData }
+				/>
+			</TableOverflowContainer>
 		</Widget>
 	);
 }
 
 DashboardTopEarningPagesWidgetGA4.propTypes = {
 	Widget: PropTypes.elementType.isRequired,
 	WidgetNull: PropTypes.elementType.isRequired,
+	WidgetReportError: PropTypes.elementType.isRequired,
 };
 
 export default compose(

assets/js/modules/adsense/components/dashboard/DashboardTopEarningPagesWidgetGA4.stories.js

@@ -19,24 +19,82 @@
 /**
  * Internal dependencies
  */
-import { provideModules } from '../../../../../../tests/js/utils';
+import {
+	provideModuleRegistrations,
+	provideModules,
+} from '../../../../../../tests/js/utils';
 import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
 import { MODULES_ADSENSE } from '../../datastore/constants';
 import { MODULES_ANALYTICS_4 } from '../../../analytics-4/datastore/constants';
 import DashboardTopEarningPagesWidgetGA4 from './DashboardTopEarningPagesWidgetGA4';
-import Widget from '../../../../googlesitekit/widgets/components/Widget';
+import { provideAnalytics4MockReport } from '../../../analytics-4/utils/data-mock';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
+
+const reportOptions = {
+	startDate: '2020-08-11',
+	endDate: '2020-09-07',
+	dimensions: [ 'pageTitle', 'pagePath' ],
+	metrics: [ { name: 'totalAdRevenue' } ],
+	orderBys: [ { metric: { metricName: 'totalAdRevenue' } } ],
+	limit: 5,
+};
+
+const WidgetWithComponentProps = withWidgetComponentProps(
+	'adsenseTopEarningPagesGA4'
+)( DashboardTopEarningPagesWidgetGA4 );
 
 function Template() {
-	return <DashboardTopEarningPagesWidgetGA4 Widget={ Widget } />;
+	return <WidgetWithComponentProps />;
 }
 
 export const Default = Template.bind( {} );
 Default.args = {
 	setupRegistry: ( registry ) => {
-		registry.dispatch( MODULES_ANALYTICS_4 ).setAdSenseLinked( true );
+		provideAnalytics4MockReport( registry, reportOptions );
 	},
 };
 Default.storyName = 'Default';
+Default.scenario = {
+	label: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4/Default',
+};
+
+export const Loading = Template.bind( {} );
+Loading.args = {
+	setupRegistry: ( registry ) => {
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.startResolution( 'getReport', [ reportOptions ] );
+	},
+};
+Loading.storyName = 'Loading';
+
+export const DataUnavailable = Template.bind( {} );
+DataUnavailable.args = {
+	setupRegistry: ( registry ) => {
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveIsGatheringData( true );
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveGetReport( [], { options: reportOptions } );
+	},
+};
+DataUnavailable.storyName = 'Data Unavailable';
+DataUnavailable.scenario = {
+	label: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4/DataUnavailable',
+};
+
+export const ZeroData = Template.bind( {} );
+ZeroData.args = {
+	setupRegistry: ( registry ) => {
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveGetReport( [], { options: reportOptions } );
+	},
+};
+ZeroData.storyName = 'Zero Data';
+ZeroData.scenario = {
+	label: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4/ZeroData',
+};
 
 export const AdSenseNotLinked = Template.bind( {} );
 AdSenseNotLinked.args = {
@@ -45,6 +103,9 @@ AdSenseNotLinked.args = {
 	},
 };
 AdSenseNotLinked.storyName = 'AdSense Not Linked';
+AdSenseNotLinked.scenario = {
+	label: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4/AdSenseNotLinked',
+};
 
 export const AdBlockerActive = Template.bind( {} );
 AdBlockerActive.args = {
@@ -53,6 +114,30 @@ AdBlockerActive.args = {
 	},
 };
 AdBlockerActive.storyName = 'Ad Blocker Active';
+AdBlockerActive.scenario = {
+	label: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4/AdBlockerActive',
+};
+
+export const Error = Template.bind( {} );
+Error.args = {
+	setupRegistry: ( registry ) => {
+		const error = {
+			code: 'missing_required_param',
+			message: 'Request parameter is empty: metrics.',
+		};
+
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.receiveError( error, 'getReport', [ reportOptions ] );
+		registry
+			.dispatch( MODULES_ANALYTICS_4 )
+			.finishResolution( 'getReport', [ reportOptions ] );
+	},
+};
+Error.storyName = 'Error';
+Error.scenario = {
+	label: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4/Error',
+};
 
 export default {
 	title: 'Modules/AdSense/Widgets/DashboardTopEarningPagesWidgetGA4',
@@ -72,6 +157,18 @@ export default {
 					},
 				] );
 
+				provideModuleRegistrations( registry );
+
+				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
+
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setAdSenseLinked( true );
+
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.receiveIsGatheringData( false );
+
 				args?.setupRegistry( registry );
 			};
 

includes/Modules/AdSense/Settings.php

@@ -14,7 +14,6 @@
 use Google\Site_Kit\Core\Storage\Setting_With_Legacy_Keys_Trait;
 use Google\Site_Kit\Core\Storage\Setting_With_Owned_Keys_Interface;
 use Google\Site_Kit\Core\Storage\Setting_With_Owned_Keys_Trait;
-use Google\Site_Kit\Core\Util\Feature_Flags;
 
 /**
  * Class for AdSense settings.

includes/Modules/Analytics_4/Report/Request.php

@@ -220,6 +220,7 @@ protected function validate_shared_metrics( $metrics ) {
 				'sessions',
 				'sessionConversionRate',
 				'sessionsPerUser',
+				'totalAdRevenue',
 				'totalUsers',
 			)
 		);
@@ -273,6 +274,7 @@ protected function validate_shared_dimensions( $dimensions ) {
 		$valid_dimensions = apply_filters(
 			'googlesitekit_shareable_analytics_4_dimensions',
 			array(
+				'adSourceName',
 				'city',
 				'country',
 				'date',