diff --git a/assets/js/modules/analytics/index.js b/assets/js/modules/analytics/index.js
index 959417f1513..69cde93d2fc 100644
--- a/assets/js/modules/analytics/index.js
+++ b/assets/js/modules/analytics/index.js
@@ -35,11 +35,19 @@ import { MODULES_ANALYTICS } from './datastore/constants';
 import { SetupMain } from './components/setup';
 import { SettingsEdit, SettingsView } from './components/settings';
 import DashboardAllTrafficWidget from './components/dashboard/DashboardAllTrafficWidget';
+import DashboardAllTrafficWidgetGA4 from './components/dashboard/DashboardAllTrafficWidgetGA4';
 import DashboardOverallPageMetricsWidget from './components/dashboard/DashboardOverallPageMetricsWidget';
-import { ModulePopularPagesWidget } from './components/module';
+import DashboardOverallPageMetricsWidgetGA4 from './components/dashboard/DashboardOverallPageMetricsWidgetGA4';
+import {
+	ModulePopularPagesWidget,
+	ModulePopularPagesWidgetGA4,
+} from './components/module';
+import { isFeatureEnabled } from '../../features';
 
 export { registerStore } from './datastore';
 
+const ga4ReportingEnabled = isFeatureEnabled( 'ga4Reporting' );
+
 export const registerModule = ( modules ) => {
 	modules.registerModule( 'analytics', {
 		storeName: MODULES_ANALYTICS,
@@ -59,7 +67,9 @@ export const registerWidgets = ( widgets ) => {
 	widgets.registerWidget(
 		'analyticsAllTraffic',
 		{
-			Component: DashboardAllTrafficWidget,
+			Component: ga4ReportingEnabled
+				? DashboardAllTrafficWidgetGA4
+				: DashboardAllTrafficWidget,
 			width: widgets.WIDGET_WIDTHS.FULL,
 			priority: 1,
 			wrapWidget: false,
@@ -74,7 +84,9 @@ export const registerWidgets = ( widgets ) => {
 	widgets.registerWidget(
 		'analyticsOverallPageMetrics',
 		{
-			Component: DashboardOverallPageMetricsWidget,
+			Component: ga4ReportingEnabled
+				? DashboardOverallPageMetricsWidgetGA4
+				: DashboardOverallPageMetricsWidget,
 			width: widgets.WIDGET_WIDTHS.FULL,
 			priority: 3,
 			wrapWidget: false,
@@ -86,7 +98,9 @@ export const registerWidgets = ( widgets ) => {
 	widgets.registerWidget(
 		'analyticsModulePopularPages',
 		{
-			Component: ModulePopularPagesWidget,
+			Component: ga4ReportingEnabled
+				? ModulePopularPagesWidgetGA4
+				: ModulePopularPagesWidget,
 			width: widgets.WIDGET_WIDTHS.FULL,
 			priority: 4,
 			wrapWidget: false,
diff --git a/assets/js/modules/search-console/index.js b/assets/js/modules/search-console/index.js
index 47e46fb511c..6eaa3701301 100644
--- a/assets/js/modules/search-console/index.js
+++ b/assets/js/modules/search-console/index.js
@@ -22,6 +22,7 @@
 import { SettingsEdit, SettingsView } from './components/settings';
 import DashboardPopularKeywordsWidget from './components/dashboard/DashboardPopularKeywordsWidget';
 import SearchFunnelWidget from './components/dashboard/SearchFunnelWidget';
+import SearchFunnelWidgetGA4 from './components/dashboard/SearchFunnelWidgetGA4';
 import {
 	AREA_MAIN_DASHBOARD_CONTENT_PRIMARY,
 	AREA_MAIN_DASHBOARD_TRAFFIC_PRIMARY,
@@ -36,6 +37,8 @@ import { isFeatureEnabled } from '../../features';
 
 export { registerStore } from './datastore';
 
+const ga4ReportingEnabled = isFeatureEnabled( 'ga4Reporting' );
+
 export const registerModule = ( modules ) => {
 	modules.registerModule( 'search-console', {
 		storeName: MODULES_SEARCH_CONSOLE,
@@ -64,7 +67,9 @@ export const registerWidgets = ( widgets ) => {
 	widgets.registerWidget(
 		'searchFunnel',
 		{
-			Component: SearchFunnelWidget,
+			Component: ga4ReportingEnabled
+				? SearchFunnelWidgetGA4
+				: SearchFunnelWidget,
 			width: [ widgets.WIDGET_WIDTHS.FULL ],
 			priority: 3,
 			wrapWidget: false,