- Array.isArray( availableAudiences ) &&
- ! availableAudiences.includes( audience )
- );
-
- const configurableAudiences = availableAudiences?.filter(
- ( element ) =>
- Array.isArray( configuredAudiences ) &&
- ! configuredAudiences.includes( element )
+ const hasNoMatchingAudience = configuredAudiences?.every(
+ ( audience ) =>
+ Array.isArray( availableAudiences ) &&
+ ! availableAudiences.includes( audience )
);
-
- if ( hasNoMatchingAudience ) {
+ if (
+ !! configuredAudiences &&
+ ( configuredAudiences?.length === 0 || hasNoMatchingAudience )
+ ) {
return (
);
diff --git a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.test.js b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.test.js
index 77b1331d79f..69ed8ad3a26 100644
--- a/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.test.js
+++ b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/index.test.js
@@ -61,29 +61,6 @@ describe( 'NoAudienceBannerWidget', () => {
jest.clearAllMocks();
} );
- it( 'should not render when availableAudiences and configuredAudiences are not loaded', () => {
- muteFetch( audienceSettingsRegExp );
-
- const { container } = render( , {
- registry,
- } );
-
- expect( container ).toBeEmptyDOMElement();
- } );
-
- it( 'should not render when availableAudiences is not loaded', () => {
- registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetAudienceSettings( {
- configuredAudiences: [ 'properties/12345/audiences/1' ],
- isAudienceSegmentationWidgetHidden: false,
- } );
-
- const { container } = render( , {
- registry,
- } );
-
- expect( container ).toBeEmptyDOMElement();
- } );
-
it( 'should not render when configuredAudiences is not loaded', () => {
muteFetch( audienceSettingsRegExp );
@@ -115,7 +92,7 @@ describe( 'NoAudienceBannerWidget', () => {
expect( container ).toBeEmptyDOMElement();
} );
- it( 'should not render when there is no configured audience.', () => {
+ it( 'should render when there is no configured audience.', () => {
registry
.dispatch( MODULES_ANALYTICS_4 )
.setAvailableAudiences( availableAudiences );
@@ -129,7 +106,7 @@ describe( 'NoAudienceBannerWidget', () => {
registry,
} );
- expect( container ).toBeEmptyDOMElement();
+ expect( container ).toMatchSnapshot();
} );
it( 'should not render when configured audience is matching available audiences', () => {
diff --git a/assets/js/modules/analytics-4/datastore/audiences.js b/assets/js/modules/analytics-4/datastore/audiences.js
index e15a4a79e43..16c59331848 100644
--- a/assets/js/modules/analytics-4/datastore/audiences.js
+++ b/assets/js/modules/analytics-4/datastore/audiences.js
@@ -166,10 +166,64 @@ const baseActions = {
* @return {Object} Object with `response` and `error`.
*/
*syncAvailableAudiences() {
- const { response, error } =
+ const { response: availableAudiences, error } =
yield fetchSyncAvailableAudiencesStore.actions.fetchSyncAvailableAudiences();
- return { response, error };
+ if ( error ) {
+ return { response: availableAudiences, error };
+ }
+
+ const registry = yield commonActions.getRegistry();
+ const { select, dispatch } = registry;
+
+ // Remove any configuredAudiences that are no longer available in availableAudiences.
+ const configuredAudiences =
+ select( MODULES_ANALYTICS_4 ).getConfiguredAudiences();
+ const newConfiguredAudiences = configuredAudiences?.filter(
+ ( configuredAudience ) =>
+ availableAudiences?.some(
+ ( { name } ) => name === configuredAudience
+ )
+ );
+
+ if (
+ configuredAudiences &&
+ newConfiguredAudiences &&
+ newConfiguredAudiences !== configuredAudiences
+ ) {
+ dispatch( MODULES_ANALYTICS_4 ).setConfiguredAudiences(
+ newConfiguredAudiences || []
+ );
+ }
+
+ return { response: availableAudiences, error };
+ },
+
+ /**
+ * Syncs available audiences older than 1 hour.
+ *
+ * @since n.e.x.t
+ *
+ * @return {void}
+ */
+ *maybeSyncAvailableAudiences() {
+ const registry = yield commonActions.getRegistry();
+ const { select, dispatch } = registry;
+
+ const availableAudiencesLastSyncedAt =
+ select( MODULES_ANALYTICS_4 ).getAvailableAudiencesLastSyncedAt();
+
+ // Update the audience cache if the availableAudiencesLastSyncedAt setting is older than 1 hour.
+ if (
+ ! availableAudiencesLastSyncedAt ||
+ availableAudiencesLastSyncedAt * 1000 <
+ // eslint-disable-next-line sitekit/no-direct-date
+ Date.now() - 1 * 60 * 60 * 1000
+ ) {
+ yield commonActions.await(
+ dispatch( MODULES_ANALYTICS_4 ).syncAvailableAudiences()
+ );
+ }
},
/**
diff --git a/assets/js/modules/analytics-4/datastore/audiences.test.js b/assets/js/modules/analytics-4/datastore/audiences.test.js
index d268284060a..ed08c7f4cff 100644
--- a/assets/js/modules/analytics-4/datastore/audiences.test.js
+++ b/assets/js/modules/analytics-4/datastore/audiences.test.js
@@ -53,6 +53,9 @@ describe( 'modules/analytics-4 audiences', () => {
const syncAvailableAudiencesEndpoint = new RegExp(
'^/google-site-kit/v1/modules/analytics-4/data/sync-audiences'
);
+ const audienceSettingsEndpoint = new RegExp(
+ '^/google-site-kit/v1/modules/analytics-4/data/audience-settings'
+ );
const audience = {
displayName: 'Recently active users',
@@ -267,10 +270,20 @@ describe( 'modules/analytics-4 audiences', () => {
status: 500,
} );
+ fetchMock.getOnce( audienceSettingsEndpoint, {
+ body: {
+ data: {
+ configuredAudiences: [],
+ },
+ },
+ } );
+
const { response, error } = await registry
.dispatch( MODULES_ANALYTICS_4 )
.syncAvailableAudiences();
+ await waitForDefaultTimeouts();
+
expect( response ).toBeUndefined();
expect( error ).toEqual( errorResponse );
@@ -289,10 +302,20 @@ describe( 'modules/analytics-4 audiences', () => {
status: 200,
} );
+ fetchMock.get( audienceSettingsEndpoint, {
+ body: {
+ data: {
+ configuredAudiences: [],
+ },
+ },
+ } );
+
const { response, error } = await registry
.dispatch( MODULES_ANALYTICS_4 )
.syncAvailableAudiences();
+ await waitForDefaultTimeouts();
+
expect( response ).toEqual( availableAudiences );
expect( error ).toBeUndefined();
@@ -302,6 +325,127 @@ describe( 'modules/analytics-4 audiences', () => {
.getAvailableAudiences()
).toEqual( availableAudiences );
} );
+
+ it( 'should remove configured audiences which are no longer available', async () => {
+ const availableAudiencesSubset = [
+ availableAudiencesFixture[ 0 ],
+ availableAudiencesFixture[ 2 ],
+ ];
+
+ fetchMock.post( syncAvailableAudiencesEndpoint, {
+ body: availableAudiencesSubset,
+ status: 200,
+ } );
+
+ const settings = {
+ configuredAudiences: availableAudiencesFixture.reduce(
+ ( acc, { name } ) => [ ...acc, name ],
+ []
+ ),
+ isAudienceSegmentationWidgetHidden: false,
+ };
+
+ registry
+ .dispatch( MODULES_ANALYTICS_4 )
+ .receiveGetAudienceSettings( settings );
+
+ await registry
+ .dispatch( MODULES_ANALYTICS_4 )
+ .syncAvailableAudiences();
+
+ expect( fetchMock ).toHaveFetchedTimes( 1 );
+ expect( fetchMock ).toHaveFetched(
+ syncAvailableAudiencesEndpoint
+ );
+
+ expect(
+ registry
+ .select( MODULES_ANALYTICS_4 )
+ .getConfiguredAudiences()
+ ).toEqual(
+ availableAudiencesSubset.reduce(
+ ( acc, { name } ) => [ ...acc, name ],
+ []
+ )
+ );
+ } );
+ } );
+
+ describe( 'maybeSyncAvailableAudiences', () => {
+ it( 'should call syncAvailableAudiences if the availableAudiencesLastSyncedAt setting is undefined', async () => {
+ fetchMock.postOnce( syncAvailableAudiencesEndpoint, {
+ body: availableAudiencesFixture,
+ status: 200,
+ } );
+
+ fetchMock.getOnce( audienceSettingsEndpoint, {
+ body: {
+ data: {
+ configuredAudiences: [],
+ },
+ },
+ } );
+
+ await registry
+ .dispatch( MODULES_ANALYTICS_4 )
+ .maybeSyncAvailableAudiences();
+
+ await waitForDefaultTimeouts();
+
+ expect( fetchMock ).toHaveFetchedTimes( 2 );
+ expect( fetchMock ).toHaveFetched(
+ syncAvailableAudiencesEndpoint
+ );
+ } );
+
+ it( 'should not call syncAvailableAudiences if the availableAudiencesLastSyncedAt setting is within the last hour', async () => {
+ fetchMock.post( syncAvailableAudiencesEndpoint, {
+ body: availableAudiencesFixture,
+ status: 200,
+ } );
+
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ availableAudiencesLastSyncedAt:
+ ( Date.now() - 1000 ) / 1000, // Value expected to be a PHP date so divide by 1000.
+ } );
+
+ await registry
+ .dispatch( MODULES_ANALYTICS_4 )
+ .maybeSyncAvailableAudiences();
+
+ expect( fetchMock ).toHaveFetchedTimes( 0 );
+ } );
+
+ it( 'should call syncAvailableAudiences if the availableAudiencesLastSyncedAt setting is not within the last hour', async () => {
+ fetchMock.postOnce( syncAvailableAudiencesEndpoint, {
+ body: availableAudiencesFixture,
+ status: 200,
+ } );
+
+ fetchMock.getOnce( audienceSettingsEndpoint, {
+ body: {
+ data: {
+ configuredAudiences: [],
+ },
+ },
+ } );
+
+ registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetSettings( {
+ availableAudiencesLastSyncedAt:
+ ( Date.now() - 2 * 60 * 60 * 1000 ) / 1000, // Value expected to be a PHP date so divide by 1000.
+ } );
+
+ await registry
+ .dispatch( MODULES_ANALYTICS_4 )
+ .maybeSyncAvailableAudiences();
+
+ await waitForDefaultTimeouts();
+
+ expect( fetchMock ).toHaveFetchedTimes( 2 );
+ expect( fetchMock ).toHaveFetched(
+ syncAvailableAudiencesEndpoint
+ );
+ } );
} );
describe( 'enableAudienceGroup', () => {
@@ -408,10 +552,6 @@ describe( 'modules/analytics-4 audiences', () => {
};
}
- const audienceSettingsEndpoint = new RegExp(
- '^/google-site-kit/v1/modules/analytics-4/data/audience-settings'
- );
-
const testPropertyID = propertiesFixture[ 0 ]._id;
const referenceDate = '2024-05-10';
@@ -1005,10 +1145,20 @@ describe( 'modules/analytics-4 audiences', () => {
status: 500,
} );
+ fetchMock.get( audienceSettingsEndpoint, {
+ body: {
+ data: {
+ configuredAudiences: [],
+ },
+ },
+ } );
+
const { response, error } = await registry
.dispatch( MODULES_ANALYTICS_4 )
.enableAudienceGroup();
+ await waitForDefaultTimeouts();
+
expect( response ).toBeUndefined();
expect( error ).toEqual( errorResponse );
diff --git a/assets/js/modules/analytics-4/index.js b/assets/js/modules/analytics-4/index.js
index a1280ec1817..54a8d5a6d8d 100644
--- a/assets/js/modules/analytics-4/index.js
+++ b/assets/js/modules/analytics-4/index.js
@@ -154,7 +154,7 @@ export const registerWidgets = ( widgets ) => {
isActive: ( select ) => {
const configuredAudiences =
select( MODULES_ANALYTICS_4 ).getConfiguredAudiences();
- return configuredAudiences?.length > 0;
+ return !! configuredAudiences;
},
},
[ AREA_MAIN_DASHBOARD_TRAFFIC_AUDIENCE_SEGMENTATION ]
diff --git a/assets/sass/components/analytics-4/_index.scss b/assets/sass/components/analytics-4/_index.scss
index e139b957ad3..57e85b51094 100644
--- a/assets/sass/components/analytics-4/_index.scss
+++ b/assets/sass/components/analytics-4/_index.scss
@@ -23,6 +23,7 @@
@import "googlesitekit-analytics-enhanced-measurement";
@import "audience-segmentation/googlesitekit-audience-segmentation-setup-cta";
@import "audience-segmentation/googlesitekit-audience-segmentation-tile";
+@import "audience-segmentation/googlesitekit-audience-segmentation-tile-loading";
@import "audience-segmentation/googlesitekit-audience-segmentation-tile-error";
@import "audience-segmentation/googlesitekit-audience-segmentation-info-notice";
@import "audience-segmentation/googlesitekit-audience-segmentation-error";
diff --git a/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile-loading.scss b/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile-loading.scss
new file mode 100644
index 00000000000..557357ad96e
--- /dev/null
+++ b/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-segmentation-tile-loading.scss
@@ -0,0 +1,50 @@
+/**
+ * Audience Segmentation Loading styles.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.googlesitekit-plugin {
+ .googlesitekit-audience-segmentation-tile-loading {
+ margin: $grid-gap-phone $grid-gap-phone $grid-gap-phone + 4px;
+
+ @media (min-width: $bp-desktop) {
+ margin: $grid-gap-desktop $grid-gap-desktop $grid-gap-desktop + 4px;
+ }
+
+ .googlesitekit-preview-block {
+ margin: 22px 0;
+
+ &:first-of-type {
+ display: none;
+ }
+
+ &:last-of-type {
+ // Match the no data height of the final metric block
+ // on tablet and desktop to minimize layout shift.
+ margin-bottom: 31px;
+ }
+
+ @media (min-width: $bp-desktop) {
+ margin: 24px 0;
+
+ &:first-of-type {
+ display: flex;
+ margin-bottom: 35px;
+ }
+ }
+ }
+ }
+}
diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_0_small.png
new file mode 100644
index 00000000000..38a6c1013f7
Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_0_small.png differ
diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_1_medium.png
new file mode 100644
index 00000000000..e6502866221
Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_1_medium.png differ
diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_2_large.png
new file mode 100644
index 00000000000..9acbdde09e6
Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceTile_Loading_0_document_2_large.png differ