Gtag manager js events

GoogleTagManagerEvents.md

Google TagManager Custom Events

Trigger events in gtag manager from js.

Add events

const payload = {
    order: {
        id: 1,
        cost: 123.55,
        currency: 'pln',
    },
    client_id: 123,
};

export default function tagManagerPurchaseEvent(payload: object = {}, event: string = 'purchase') {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: event,
        payload: payload,
    });
}

export default function tagManagerContactEvent(payload: object = {}, event: string = 'contact.form.submited') {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: event,
        payload: payload,
    });
}


export function tagManagerCustomEvent(event: any, payload: object = {}) {
    window.dataLayer.push({
        event: 'custom.event.' + event.type || 'dragstart',
        'custom.gtm.element': event.target,
        'custom.gtm.elementClasses': event.target.className || '',
        'custom.gtm.elementId': event.target.id || '',
        'custom.gtm.elementTarget': event.target.target || '',
        'custom.gtm.elementUrl': event.target.href || event.target.action || '',
        'custom.gtm.originalEvent': event,
        'custom.gtm.payload': payload,
    });
}

Ts add to types/windows.d.ts

declare global {
    interface Window {
        dataLayer: any[];
    }
}

export {}; // Ensures the file is treated as a module

Blade

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){
		dataLayer.push(arguments);
	}
	gtag('consent', 'default', {
		'ad_user_data': 'granted',
		'ad_personalization': 'granted',
		'ad_storage': 'granted',
		'analytics_storage': 'granted',
		// 'wait_for_update': 500,
	});
	gtag('js', new Date());
	gtag('config', 'TAG_ID');
</script>