dataLayerPush.ts

/**
 * Add an event callback when pushing events to Google Tag Manager's datalayer.
 * Also provides a fallback if Google Tag Manager is not available.
 * @see https://www.simoahava.com/gtm-tips/use-eventtimeout-eventcallback/
 */

const GTM_CONTAINER_ID = 'GTM-XXXXX';

export default function dataLayerPush(
	eventObject: { [key: string]: string | number },
	eventCallback?: () => void,
	eventTimeout = 2000
) {
	if (window['google_tag_manager']) {
		const dataLayerEvent = {
			...eventObject
		} as any;

		if (eventCallback) {
			dataLayerEvent.eventCallback = (containerId: string) => {
				/**
				 * eventCallback is run for every container on the page. To only apply the callback once,
				 * we check the container ID to only apply the callback for the one container.
				 * @see https://www.simoahava.com/analytics/check-container-id-with-eventcallback/
				 */
				if (containerId === GTM_CONTAINER_ID) {
					eventCallback();
				}
			};
			
			dataLayerEvent.eventTimeout = eventTimeout;
		}

		console.log(`Pushing event '${dataLayerEvent.event}' to Google Tag Manager.`);

		window.dataLayer.push(dataLayerEvent);
	} else if (eventCallback) {
		console.log(`Google Tag Manager is not found on the page. Skipping ${eventObject.event}.`);

		eventCallback();
	}
}