Merge pull request #7173 from google/enhancement/6243-fix-kmw-data-in…

…-ga4-widgets
google · Jun 15, 2023 · 3f65a39 · 3f65a39
2 parents 367b984 + c7532af
commit 3f65a39
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 29 deletions.
diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
@@ -20,6 +20,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -68,26 +69,36 @@ function LoyalVisitorsWidget( { Widget } ) {
 			)
 	);
 
-	const newVisitors =
-		parseInt( report?.rows?.[ 1 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const returningVisitors =
-		parseInt( report?.rows?.[ 3 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const totalVisitors = newVisitors + returningVisitors;
+	const { rows = [] } = report || {};
 
-	const prevNewVisitors =
-		parseInt( report?.rows?.[ 0 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const prevReturningVisitors =
-		parseInt( report?.rows?.[ 2 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const prevTotalVisitors = prevNewVisitors + prevReturningVisitors;
+	const makeFind = ( dateRange ) => ( row ) =>
+		get( row, 'dimensionValues.0.value' ) === 'returning' &&
+		get( row, 'dimensionValues.1.value' ) === dateRange;
+	const makeFilter = ( dateRange ) => ( row ) =>
+		get( row, 'dimensionValues.1.value' ) === dateRange;
+	const reducer = ( acc, row ) =>
+		acc + ( parseInt( get( row, 'metricValues.0.value' ), 10 ) || 0 );
 
-	const currentPercentage =
-		totalVisitors > 0 ? returningVisitors / totalVisitors : 0;
-	const prevPercentage =
-		prevTotalVisitors > 0 ? prevReturningVisitors / prevTotalVisitors : 0;
+	const returning =
+		rows.find( makeFind( 'date_range_0' ) )?.metricValues?.[ 0 ]?.value ||
+		0;
+	const total = rows
+		.filter( makeFilter( 'date_range_0' ) )
+		.reduce( reducer, 0 );
+
+	const prevReturning =
+		rows.find( makeFind( 'date_range_1' ) )?.metricValues?.[ 0 ]?.value ||
+		0;
+	const prevTotal = rows
+		.filter( makeFilter( 'date_range_1' ) )
+		.reduce( reducer, 0 );
+
+	const currentPercentage = total > 0 ? returning / total : 0;
+	const prevPercentage = prevTotal > 0 ? prevReturning / prevTotal : 0;
 
 	const format = {
 		style: 'percent',
-		signDisplay: 'exceptZero',
+		signDisplay: 'never',
 		maximumFractionDigits: 1,
 	};
 
@@ -100,7 +111,7 @@ function LoyalVisitorsWidget( { Widget } ) {
 			subText={ sprintf(
 				/* translators: %d: Number of total visitors visiting the site. */
 				__( 'of %d total visitors', 'google-site-kit' ),
-				totalVisitors
+				total
 			) }
 			previousValue={ prevPercentage }
 			currentValue={ currentPercentage }

diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
@@ -20,6 +20,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -68,17 +69,25 @@ function NewVisitorsWidget( { Widget } ) {
 			)
 	);
 
-	const newVisitors =
-		parseInt( report?.rows?.[ 1 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const returningVisitors =
-		parseInt( report?.rows?.[ 3 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const totalVisitors = newVisitors + returningVisitors;
+	const { rows = [] } = report || {};
+
+	const makeFind = ( dateRange ) => ( row ) =>
+		get( row, 'dimensionValues.0.value' ) === 'new' &&
+		get( row, 'dimensionValues.1.value' ) === dateRange;
+	const makeFilter = ( dateRange ) => ( row ) =>
+		get( row, 'dimensionValues.1.value' ) === dateRange;
+	const reducer = ( acc, row ) =>
+		acc + ( parseInt( get( row, 'metricValues.0.value' ), 10 ) || 0 );
 
-	const compareNewVisitors =
-		parseInt( report?.rows?.[ 0 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const compareReturningVisitors =
-		parseInt( report?.rows?.[ 2 ]?.metricValues[ 0 ]?.value, 10 ) || 0;
-	const compareTotalVisitors = compareNewVisitors + compareReturningVisitors;
+	const newVisitors =
+		rows.find( makeFind( 'date_range_0' ) )?.metricValues?.[ 0 ]?.value ||
+		0;
+	const total = rows
+		.filter( makeFilter( 'date_range_0' ) )
+		.reduce( reducer, 0 );
+	const prevTotal = rows
+		.filter( makeFilter( 'date_range_1' ) )
+		.reduce( reducer, 0 );
 
 	return (
 		<MetricTileNumeric
@@ -88,10 +97,10 @@ function NewVisitorsWidget( { Widget } ) {
 			subText={ sprintf(
 				/* translators: %d: Number of total visitors visiting the site. */
 				__( 'of %d total visitors', 'google-site-kit' ),
-				totalVisitors
+				total
 			) }
-			previousValue={ compareTotalVisitors }
-			currentValue={ totalVisitors }
+			previousValue={ prevTotal }
+			currentValue={ total }
 			loading={ loading }
 		/>
 	);

diff --git a/...reference/google-site-kit_KeyMetrics_LoyalVisitors_Ready_0_document_0_small.png b/...reference/google-site-kit_KeyMetrics_LoyalVisitors_Ready_0_document_0_small.png
diff --git a/...eference/google-site-kit_KeyMetrics_LoyalVisitors_Ready_0_document_1_medium.png b/...eference/google-site-kit_KeyMetrics_LoyalVisitors_Ready_0_document_1_medium.png
diff --git a/...reference/google-site-kit_KeyMetrics_LoyalVisitors_Ready_0_document_2_large.png b/...reference/google-site-kit_KeyMetrics_LoyalVisitors_Ready_0_document_2_large.png
diff --git a/...p/reference/google-site-kit_KeyMetrics_NewVisitors_Ready_0_document_0_small.png b/...p/reference/google-site-kit_KeyMetrics_NewVisitors_Ready_0_document_0_small.png
diff --git a/.../reference/google-site-kit_KeyMetrics_NewVisitors_Ready_0_document_1_medium.png b/.../reference/google-site-kit_KeyMetrics_NewVisitors_Ready_0_document_1_medium.png
diff --git a/...p/reference/google-site-kit_KeyMetrics_NewVisitors_Ready_0_document_2_large.png b/...p/reference/google-site-kit_KeyMetrics_NewVisitors_Ready_0_document_2_large.png