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

@props([
    'gtmId' => null, // Możliwość przekazania TAG_ID GTM przez atrybut komponentu
])

@if($gtmId)
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ $gtmId }}"></script>

<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){
		dataLayer.push(arguments);
	}
	
	// Disable tracking cookies
	gtag('consent', 'default', {
        ad_storage: 'denied',
        ad_user_data: 'denied',
        ad_personalization: 'denied',
        analytics_storage: 'denied',
		wait_for_update: 500,
    })
	
	gtag('js', new Date());
	gtag('config', '{{ $gtmId }}')
</script>
@endif

<script>
	// Run function when client accept Analytics cookies
	function isAnalyticsAllowed() {
		gtag('consent', 'update', {
			analytics_storage: 'granted',			
		});
	}
	
	// Run function when client accept Marketing cookies
	function isMarketingAllowed() {
		gtag('consent', 'update', {
			ad_storage: 'granted',
			ad_user_data: 'granted',			
			ad_personalization: 'granted',
		});
	}
	
	// Trigger event
	function handleEvent() {
		gtag('event', 'button_click', {
			'button_id': 'contact1',
			'button_name': 'ContactForm'
		});
	}
	
	// Example function called after successful login
	function handleUserLogin(userId) {
	  if (userId) {
		gtag('set', {'user_id': userId});
		console.log('User ID set for GA:', userId);

		// You can also send a login event
		gtag('event', 'login', { method: 'your_login_method' });
	  }
	}
	
	// Example function called after logout
	function handleUserLogout() {
	  gtag('set', {'user_id': null});
	  console.log('User ID cleared for GA.');

	  // You can also send a logout event
	  gtag('event', 'logout');
	}
</script>