Initialize commercial queue early and flush after modules load

Author: dskamiotis

bundle/src/commercial.ts

@@ -1,6 +1,10 @@
 import type { ConsentState } from '@guardian/libs';
 import { getConsentFor, onConsent } from '@guardian/libs';
 import { commercialFeatures } from './lib/commercial-features';
+import { createCommercialQueue } from './lib/guardian-commercial-queue';
+
+window.guardian.commercial ??= { queue: createCommercialQueue() };
+
 
 const shouldBootConsentless = (consentState: ConsentState) => {
 	return (

bundle/src/lib/commercial-boot-utils.ts

@@ -48,7 +48,10 @@ const bootCommercial = async (
 
 	try {
 		return Promise.allSettled(modules.map((module) => module())).then(
-			recordCommercialMetrics,
+			()=>{
+				recordCommercialMetrics();
+				window.guardian.commercial?.queue?.flush()
+			}
 		);
 	} catch (error) {
 		// report async errors in bootCommercial to Sentry with the commercial feature tag

core/src/global.ts

@@ -46,7 +46,7 @@ declare global {
 			commercial?: {
 				dfpEnv?: DfpEnv;
 				a9WinningBids?: FetchBidResponse[];
-				queue: QueueArray;
+				queue?: QueueArray;
 			};
 			notificationEventHistory?: HeaderNotification[][];
 			commercialTimer?: EventTimer;