Merge pull request #5066 from google/enhance/5044-tag-manager-amp-effect

Enhance/5044 tag manager amp effect
google · Apr 13, 2022 · 7a4fe24 · 7a4fe24
2 parents b8ee344 + 58f2cc8
commit 7a4fe24
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 1 deletion.
diff --git a/assets/js/modules/tagmanager/datastore/containers.js b/assets/js/modules/tagmanager/datastore/containers.js
@@ -36,6 +36,7 @@ import {
 import { createFetchStore } from '../../../googlesitekit/data/create-fetch-store';
 const { createRegistrySelector, createRegistryControl } = Data;
 import { createValidatedAction } from '../../../googlesitekit/data/utils';
+import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
 
 // Actions
 const WAIT_FOR_CONTAINERS = 'WAIT_FOR_CONTAINERS';
@@ -404,6 +405,24 @@ const baseSelectors = {
 	isDoingCreateContainer( state ) {
 		return Object.values( state.isFetchingCreateContainer ).some( Boolean );
 	},
+
+	/**
+	 * Gets primary container ID based on the AMP status.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {(string|undefined)} Primary container ID or `undefined` if not loaded yet.
+	 */
+	getPrimaryContainerID: createRegistrySelector( ( select ) => () => {
+		const isPrimaryAMP = select( CORE_SITE ).isPrimaryAMP();
+		if ( undefined === isPrimaryAMP ) {
+			return undefined;
+		}
+		if ( isPrimaryAMP ) {
+			return select( MODULES_TAGMANAGER ).getAMPContainerID();
+		}
+		return select( MODULES_TAGMANAGER ).getContainerID();
+	} ),
 };
 
 const store = Data.combineStores(

diff --git a/assets/js/modules/tagmanager/datastore/containers.test.js b/assets/js/modules/tagmanager/datastore/containers.test.js
@@ -29,6 +29,7 @@ import {
 } from '../../../../../tests/js/utils';
 import * as factories from './__factories__';
 import * as fixtures from './__fixtures__';
+import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
 
 describe( 'modules/tagmanager containers', () => {
 	let registry;
@@ -593,5 +594,94 @@ describe( 'modules/tagmanager containers', () => {
 				).toEqual( ampContainers );
 			} );
 		} );
+
+		describe( 'getPrimaryContainerID', () => {
+			it( 'returns undefined when isPrimaryAMP is not loaded', () => {
+				const account = factories.accountBuilder();
+				const [ webContainer ] = factories.buildContainers( 1, {
+					// eslint-disable-next-line sitekit/acronym-case
+					accountId: account.accountId,
+					usageContext: [ CONTEXT_WEB ],
+				} );
+				const [ ampContainer ] = factories.buildContainers( 1, {
+					// eslint-disable-next-line sitekit/acronym-case
+					accountId: account.accountId,
+					usageContext: [ CONTEXT_AMP ],
+				} );
+
+				registry
+					.dispatch( MODULES_TAGMANAGER )
+					.setContainerID( webContainer );
+				registry
+					.dispatch( MODULES_TAGMANAGER )
+					.setAMPContainerID( ampContainer );
+
+				expect(
+					registry
+						.select( MODULES_TAGMANAGER )
+						.getPrimaryContainerID()
+				).toBeUndefined();
+			} );
+			it( 'returns webContainer when isPrimaryAMP is false', () => {
+				const account = factories.accountBuilder();
+				const [ webContainer ] = factories.buildContainers( 1, {
+					// eslint-disable-next-line sitekit/acronym-case
+					accountId: account.accountId,
+					usageContext: [ CONTEXT_WEB ],
+				} );
+				const [ ampContainer ] = factories.buildContainers( 1, {
+					// eslint-disable-next-line sitekit/acronym-case
+					accountId: account.accountId,
+					usageContext: [ CONTEXT_AMP ],
+				} );
+
+				registry.dispatch( CORE_SITE ).receiveSiteInfo( {
+					ampMode: 'reader',
+				} );
+
+				registry
+					.dispatch( MODULES_TAGMANAGER )
+					.setContainerID( webContainer );
+				registry
+					.dispatch( MODULES_TAGMANAGER )
+					.setAMPContainerID( ampContainer );
+
+				expect(
+					registry
+						.select( MODULES_TAGMANAGER )
+						.getPrimaryContainerID()
+				).toEqual( webContainer );
+			} );
+			it( 'returns ampContainer when isPrimaryAMP is true', () => {
+				const account = factories.accountBuilder();
+				const [ webContainer ] = factories.buildContainers( 1, {
+					// eslint-disable-next-line sitekit/acronym-case
+					accountId: account.accountId,
+					usageContext: [ CONTEXT_WEB ],
+				} );
+				const [ ampContainer ] = factories.buildContainers( 1, {
+					// eslint-disable-next-line sitekit/acronym-case
+					accountId: account.accountId,
+					usageContext: [ CONTEXT_AMP ],
+				} );
+
+				registry.dispatch( CORE_SITE ).receiveSiteInfo( {
+					ampMode: 'primary',
+				} );
+
+				registry
+					.dispatch( MODULES_TAGMANAGER )
+					.setContainerID( webContainer );
+				registry
+					.dispatch( MODULES_TAGMANAGER )
+					.setAMPContainerID( ampContainer );
+
+				expect(
+					registry
+						.select( MODULES_TAGMANAGER )
+						.getPrimaryContainerID()
+				).toEqual( ampContainer );
+			} );
+		} );
 	} );
 } );
diff --git a/assets/js/modules/tagmanager/hooks/useExistingTagEffect.js b/assets/js/modules/tagmanager/hooks/useExistingTagEffect.js
@@ -33,7 +33,7 @@ export default function useExistingTagEffect() {
 		select( MODULES_TAGMANAGER ).getExistingTag()
 	);
 	const containerID = useSelect( ( select ) =>
-		select( MODULES_TAGMANAGER ).getContainerID()
+		select( MODULES_TAGMANAGER ).getPrimaryContainerID()
 	);
 
 	const skipEffect = useRef( true );

diff --git a/assets/js/modules/tagmanager/hooks/useExistingTagEffect.test.js b/assets/js/modules/tagmanager/hooks/useExistingTagEffect.test.js
@@ -21,6 +21,7 @@
  */
 import { renderHook, actHook as act } from '../../../../../tests/js/test-utils';
 import { createTestRegistry } from '../../../../../tests/js/utils';
+import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
 import { MODULES_TAGMANAGER, CONTEXT_WEB } from '../datastore/constants';
 import * as factories from '../datastore/__factories__';
 import useExistingTagEffect from './useExistingTagEffect';
@@ -33,6 +34,9 @@ describe( 'useExistingTagEffect', () => {
 		registry.dispatch( MODULES_TAGMANAGER ).receiveGetSettings( {} );
 		// Set set no existing tag.
 		registry.dispatch( MODULES_TAGMANAGER ).receiveGetExistingTag( null );
+		registry.dispatch( CORE_SITE ).receiveSiteInfo( {
+			ampMode: 'reader',
+		} );
 	} );
 
 	it( 'sets useSnippet value based on existing tag and selected container', async () => {