Merge pull request #6536 from google/enhancement/#6082-gte-existing-site

Populate Google tag data for existing sites

assets/js/components/DashboardEntryPoint.js

@@ -20,14 +20,25 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useMount } from 'react-use';
 
 /**
  * Internal dependencies
  */
+import Data from 'googlesitekit-data';
+import { MODULES_ANALYTICS_4 } from '../modules/analytics-4/datastore/constants';
 import ModuleSetup from './setup/ModuleSetup';
 import DashboardMainApp from './DashboardMainApp';
 
+const { useDispatch } = Data;
+
 export default function DashboardEntryPoint( { setupModuleSlug } ) {
+	const { syncGoogleTagSettings } = useDispatch( MODULES_ANALYTICS_4 );
+
+	useMount( () => {
+		syncGoogleTagSettings();
+	} );
+
 	if ( !! setupModuleSlug ) {
 		return <ModuleSetup moduleSlug={ setupModuleSlug } />;
 	}

assets/js/components/DashboardEntryPoint.test.js

@@ -19,24 +19,33 @@
 /**
  * Internal dependencies
  */
-import { render } from '../../../tests/js/test-utils';
+import { provideModules, render } from '../../../tests/js/test-utils';
 import { mockCreateComponent } from '../../../tests/js/mock-component-utils';
 import DashboardEntryPoint from './DashboardEntryPoint';
+import { MODULES_ANALYTICS_4 } from '../modules/analytics-4/datastore/constants';
 
 jest.mock( './setup/ModuleSetup', () => mockCreateComponent( 'ModuleSetup' ) );
 jest.mock( './DashboardMainApp', () =>
 	mockCreateComponent( 'DashboardMainApp' )
 );
 
 describe( 'DashboardEntryPoint', () => {
+	const setupRegistry = ( registry ) => {
+		provideModules( registry );
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {} );
+	};
+
 	it( 'should render the unified dashboard', () => {
-		const { container } = render( <DashboardEntryPoint /> );
+		const { container } = render( <DashboardEntryPoint />, {
+			setupRegistry,
+		} );
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render the module setup component when the setupModuleSlug prop is passed', () => {
 		const { container } = render(
-			<DashboardEntryPoint setupModuleSlug="analytics" />
+			<DashboardEntryPoint setupModuleSlug="analytics" />,
+			{ setupRegistry }
 		);
 		expect( container ).toMatchSnapshot();
 	} );

assets/js/modules/analytics-4/datastore/base.js

@@ -53,6 +53,7 @@ const baseModuleStore = Modules.createModuleStore( 'analytics-4', {
 		'googleTagID',
 		'googleTagAccountID',
 		'googleTagContainerID',
+		'googleTagLastSyncedAtMs',
 	],
 	submitChanges,
 	rollbackChanges,

assets/js/modules/analytics-4/datastore/properties.js

@@ -27,13 +27,14 @@ import invariant from 'invariant';
 import API from 'googlesitekit-api';
 import Data from 'googlesitekit-data';
 import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
+import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
 import {
 	MODULES_ANALYTICS_4,
 	PROPERTY_CREATE,
 	MAX_WEBDATASTREAMS_PER_BATCH,
 	WEBDATASTREAM_CREATE,
 } from './constants';
-import { normalizeURL } from '../../../util';
+import { HOUR_IN_SECONDS, normalizeURL } from '../../../util';
 import { createFetchStore } from '../../../googlesitekit/data/create-fetch-store';
 import { isValidPropertySelection } from '../utils/validation';
 import { actions as webDataStreamActions } from './webdatastreams';
@@ -490,6 +491,58 @@ const baseActions = {
 			.setGoogleTagContainerID( googleTagContainerID );
 		registry.dispatch( MODULES_ANALYTICS_4 ).setGoogleTagID( googleTagID );
 	},
+
+	/**
+	 * Syncs Google Tag settings.
+	 *
+	 * @since n.e.x.t
+	 */
+	*syncGoogleTagSettings() {
+		if ( ! isFeatureEnabled( 'gteSupport' ) ) {
+			return;
+		}
+
+		const { select, dispatch, __experimentalResolveSelect } =
+			yield Data.commonActions.getRegistry();
+
+		// Wait for modules to be available before selecting.
+		yield Data.commonActions.await(
+			__experimentalResolveSelect( CORE_MODULES ).getModules()
+		);
+
+		const { isModuleConnected } = select( CORE_MODULES );
+
+		if ( ! isModuleConnected( 'analytics-4' ) ) {
+			return;
+		}
+
+		// Wait for module settings to be available before selecting.
+		yield Data.commonActions.await(
+			__experimentalResolveSelect( MODULES_ANALYTICS_4 ).getSettings()
+		);
+
+		const { getGoogleTagID, getMeasurementID, getGoogleTagLastSyncedAtMs } =
+			select( MODULES_ANALYTICS_4 );
+
+		const googleTagID = getGoogleTagID();
+		const measurementID = getMeasurementID();
+		const googleTagLastSyncedAtMs = getGoogleTagLastSyncedAtMs();
+
+		if (
+			! googleTagID &&
+			measurementID &&
+			( ! googleTagLastSyncedAtMs ||
+				Date.now() - googleTagLastSyncedAtMs >= HOUR_IN_SECONDS * 1000 )
+		) {
+			yield baseActions.updateSettingsForMeasurementID( measurementID );
+
+			dispatch( MODULES_ANALYTICS_4 ).setGoogleTagLastSyncedAtMs(
+				Date.now()
+			);
+
+			dispatch( MODULES_ANALYTICS_4 ).saveSettings();
+		}
+	},
 };
 
 const baseControls = {