upstream-rocketchat/apps/meteor/client/views/root/hooks/useAnalyticsEventTracking.ts

import { clientCallbacks } from '@rocket.chat/ui-client';
import { useRouter, useSetting, useUserId } from '@rocket.chat/ui-contexts';
import { useEffect } from 'react';

function trackEvent(category: string, action: string, label?: unknown) {
	const { _paq, ga } = window;

	_paq?.push(['trackEvent', category, action, label]);
	ga?.('send', 'event', category, action, label);
}

export const useAnalyticsEventTracking = () => {
	const router = useRouter();

	useEffect(
		() =>
			router.subscribeToRouteChange(() => {
				const { _paq, ga } = window;

				if (_paq) {
					const http = location.protocol;
					const slashes = http.concat('//');
					const host = slashes.concat(location.hostname);
					_paq.push(['setCustomUrl', host + router.getLocationPathname()]);
					_paq.push(['trackPageView']);
				}

				ga?.('send', 'pageview', router.getLocationPathname());
			}),
		[router],
	);

	useEffect(() => {
		clientCallbacks.add(
			'loginPageStateChange',
			(state) => {
				trackEvent('Navigation', 'Login Page State Change', state);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-login-state-change',
		);

		return () => {
			clientCallbacks.remove('loginPageStateChange', 'analytics-login-state-change');
		};
	}, []);

	const featuresMessages = useSetting('Analytics_features_messages', true);

	useEffect(() => {
		if (!featuresMessages) {
			return;
		}

		clientCallbacks.add(
			'afterSaveMessage',
			(_message, { room }) => {
				trackEvent('Message', 'Send', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.LOW,
			'trackEvents',
		);

		return () => {
			clientCallbacks.remove('afterSaveMessage', 'trackEvents');
		};
	}, [featuresMessages]);

	const featuresRooms = useSetting('Analytics_features_rooms', true);

	useEffect(() => {
		if (!featuresRooms) {
			return;
		}

		clientCallbacks.add(
			'afterCreateChannel',
			(_owner, room) => {
				trackEvent('Room', 'Create', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-after-create-channel',
		);

		clientCallbacks.add(
			'roomNameChanged',
			(room) => {
				trackEvent('Room', 'Changed Name', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-room-name-changed',
		);

		clientCallbacks.add(
			'roomTopicChanged',
			(room) => {
				trackEvent('Room', 'Changed Topic', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-room-topic-changed',
		);

		clientCallbacks.add(
			'roomAnnouncementChanged',
			(room) => {
				trackEvent('Room', 'Changed Announcement', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-room-announcement-changed',
		);

		clientCallbacks.add(
			'roomTypeChanged',
			(room) => {
				trackEvent('Room', 'Changed Room Type', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-room-type-changed',
		);

		clientCallbacks.add(
			'archiveRoom',
			(room) => {
				trackEvent('Room', 'Archived', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-archive-room',
		);

		clientCallbacks.add(
			'unarchiveRoom',
			(room) => {
				trackEvent('Room', 'Unarchived', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-unarchive-room',
		);

		clientCallbacks.add(
			'roomAvatarChanged',
			(room) => {
				trackEvent('Room', 'Changed Avatar', `${room.name} (${room._id})`);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-room-avatar-changed',
		);

		return () => {
			clientCallbacks.remove('afterCreateChannel', 'analytics-after-create-channel');
			clientCallbacks.remove('roomNameChanged', 'analytics-room-name-changed');
			clientCallbacks.remove('roomTopicChanged', 'analytics-room-topic-changed');
			clientCallbacks.remove('roomAnnouncementChanged', 'analytics-room-announcement-changed');
			clientCallbacks.remove('roomTypeChanged', 'analytics-room-type-changed');
			clientCallbacks.remove('archiveRoom', 'analytics-archive-room');
			clientCallbacks.remove('unarchiveRoom', 'analytics-unarchive-room');
			clientCallbacks.remove('roomAvatarChanged', 'analytics-room-avatar-changed');
		};
	}, [featuresRooms]);

	const featuresUsers = useSetting('Analytics_features_users', true);

	useEffect(() => {
		if (!featuresUsers) {
			return;
		}

		clientCallbacks.add(
			'userRegistered',
			() => {
				trackEvent('User', 'Registered');
			},
			clientCallbacks.priority.MEDIUM,
			'piwik-user-resitered',
		);

		clientCallbacks.add(
			'usernameSet',
			() => {
				trackEvent('User', 'Username Set');
			},
			clientCallbacks.priority.MEDIUM,
			'piweik-username-set',
		);

		clientCallbacks.add(
			'userPasswordReset',
			() => {
				trackEvent('User', 'Reset Password');
			},
			clientCallbacks.priority.MEDIUM,
			'piwik-user-password-reset',
		);

		clientCallbacks.add(
			'userConfirmationEmailRequested',
			() => {
				trackEvent('User', 'Confirmation Email Requested');
			},
			clientCallbacks.priority.MEDIUM,
			'piwik-user-confirmation-email-requested',
		);

		clientCallbacks.add(
			'userForgotPasswordEmailRequested',
			() => {
				trackEvent('User', 'Forgot Password Email Requested');
			},
			clientCallbacks.priority.MEDIUM,
			'piwik-user-forgot-password-email-requested',
		);

		clientCallbacks.add(
			'userStatusManuallySet',
			(status) => {
				trackEvent('User', 'Status Manually Changed', status);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-user-status-manually-set',
		);

		clientCallbacks.add(
			'userAvatarSet',
			(service) => {
				trackEvent('User', 'Avatar Changed', service);
			},
			clientCallbacks.priority.MEDIUM,
			'analytics-user-avatar-set',
		);

		return () => {
			clientCallbacks.remove('userRegistered', 'piwik-user-resitered');
			clientCallbacks.remove('usernameSet', 'piweik-username-set');
			clientCallbacks.remove('userPasswordReset', 'piwik-user-password-reset');
			clientCallbacks.remove('userConfirmationEmailRequested', 'piwik-user-confirmation-email-requested');
			clientCallbacks.remove('userForgotPasswordEmailRequested', 'piwik-user-forgot-password-email-requested');
			clientCallbacks.remove('userStatusManuallySet', 'analytics-user-status-manually-set');
			clientCallbacks.remove('userAvatarSet', 'analytics-user-avatar-set');
		};
	}, [featuresUsers]);

	const uid = useUserId();

	useEffect(() => {
		if (!featuresUsers) {
			return;
		}

		const { _paq } = window;

		trackEvent('User', 'Login', uid);
		_paq?.push(['setUserId', uid]);

		return () => {
			trackEvent('User', 'Logout', uid);
		};
	}, [featuresUsers, uid]);
};