From 9586b58a80cacca80e99dcfc4490c8bab68bfffd Mon Sep 17 00:00:00 2001 From: Jan Berg Date: Mon, 15 Jul 2024 15:51:15 +0300 Subject: [PATCH] Added some classes for defining Google Analytics events --- frontend/src/analytics/AnalyticsEvent.ts | 6 ++-- .../googleAnalytics/googleAnalyticsEvents.ts | 32 +++++++++++++++++++ .../googleAnalytics/googleAnalyticsService.ts | 22 +++++++++++++ .../src/analytics/googleAnalyticsService.ts | 28 ---------------- .../AvailableRoomList/AvailableRoomList.tsx | 6 ++-- .../CurrentBooking/CurrentBooking.tsx | 7 ++++ 6 files changed, 69 insertions(+), 32 deletions(-) create mode 100644 frontend/src/analytics/googleAnalytics/googleAnalyticsEvents.ts create mode 100644 frontend/src/analytics/googleAnalytics/googleAnalyticsService.ts delete mode 100644 frontend/src/analytics/googleAnalyticsService.ts diff --git a/frontend/src/analytics/AnalyticsEvent.ts b/frontend/src/analytics/AnalyticsEvent.ts index 370ef7e6..f952a077 100644 --- a/frontend/src/analytics/AnalyticsEvent.ts +++ b/frontend/src/analytics/AnalyticsEvent.ts @@ -1,9 +1,11 @@ +// Defines the common enum to use for event names across all analytics services export enum AnalyticsEventEnum { BOOKING, - CANCEL_BOOKING + END_BOOKING } +// Defines the common event names to use across all analytics services export const analyticsEventMap: { [key in AnalyticsEventEnum]: string } = { [AnalyticsEventEnum.BOOKING]: 'booking', - [AnalyticsEventEnum.CANCEL_BOOKING]: 'cancelBooking' + [AnalyticsEventEnum.END_BOOKING]: 'endBooking' }; diff --git a/frontend/src/analytics/googleAnalytics/googleAnalyticsEvents.ts b/frontend/src/analytics/googleAnalytics/googleAnalyticsEvents.ts new file mode 100644 index 00000000..7a2a4aa7 --- /dev/null +++ b/frontend/src/analytics/googleAnalytics/googleAnalyticsEvents.ts @@ -0,0 +1,32 @@ +import { AnalyticsEventEnum } from '../AnalyticsEvent'; +import { Room } from '../../types'; + +// Basic interface for all google analytics events +export interface GoogleAnalyticsEvent { + eventType: AnalyticsEventEnum; + eventObject: object; +} + +export class BookingEvent implements GoogleAnalyticsEvent { + eventType: AnalyticsEventEnum = AnalyticsEventEnum.BOOKING; + eventObject: object; + + constructor(room: Room) { + this.eventObject = { + roomName: room.name, + building: room.building + }; + } +} + +export class EndBookingEvent implements GoogleAnalyticsEvent { + eventType: AnalyticsEventEnum = AnalyticsEventEnum.END_BOOKING; + eventObject: object; + + constructor(room: Room) { + this.eventObject = { + roomName: room.name, + building: room.building + }; + } +} diff --git a/frontend/src/analytics/googleAnalytics/googleAnalyticsService.ts b/frontend/src/analytics/googleAnalytics/googleAnalyticsService.ts new file mode 100644 index 00000000..6555d7a9 --- /dev/null +++ b/frontend/src/analytics/googleAnalytics/googleAnalyticsService.ts @@ -0,0 +1,22 @@ +import { analyticsEventMap } from '../AnalyticsEvent'; +import { GoogleAnalyticsEvent } from './googleAnalyticsEvents'; + +function isGAEnabled(): boolean { + // @ts-ignore + if (!window.gtag) { + console.log('Google Analytics is not enabled!'); + return false; + } + return true; +} + +export function triggerGoogleAnalyticsEvent(event: GoogleAnalyticsEvent) { + if (isGAEnabled()) { + // @ts-ignore + window.gtag( + 'event', + analyticsEventMap[event.eventType], + event.eventObject + ); + } +} diff --git a/frontend/src/analytics/googleAnalyticsService.ts b/frontend/src/analytics/googleAnalyticsService.ts deleted file mode 100644 index eaf0de41..00000000 --- a/frontend/src/analytics/googleAnalyticsService.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { AnalyticsEventEnum, analyticsEventMap } from './AnalyticsEvent'; - -export const analyticsGAEventMap: { [key in AnalyticsEventEnum]: object } = { - [AnalyticsEventEnum.BOOKING]: { booking: 'Booked a Room' }, - [AnalyticsEventEnum.CANCEL_BOOKING]: { - cancelBooking: 'Cancelled a booked room' - } -}; - -function isGAEnabled(): boolean { - // @ts-ignore - if (!window.gtag) { - console.log('Google Analytics is not enabled!'); - return false; - } - return true; -} - -export function triggerGoogleAnalyticsEvent(event: AnalyticsEventEnum) { - if (isGAEnabled()) { - // @ts-ignore - window.gtag( - 'event', - analyticsEventMap[event], - analyticsGAEventMap[event] - ); - } -} diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx index 2f9fd0db..7d6905ee 100644 --- a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx +++ b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx @@ -17,7 +17,8 @@ import dayjs from 'dayjs'; import { sortByFavoritedAndName } from '../../util/arrayUtils'; import { triggerClarityEvent } from '../../analytics/clarityService'; import { AnalyticsEventEnum } from '../../analytics/AnalyticsEvent'; -import { triggerGoogleAnalyticsEvent } from '../../analytics/googleAnalyticsService'; +import { triggerGoogleAnalyticsEvent } from '../../analytics/googleAnalytics/googleAnalyticsService'; +import { BookingEvent } from '../../analytics/googleAnalytics/googleAnalyticsEvents'; const SKIP_CONFIRMATION = true; @@ -291,7 +292,8 @@ const AvailableRoomList = (props: BookingListProps) => { createSuccessNotification('Booking was successful'); setBookingLoading('false'); document.getElementById('main-view-content')?.scrollTo(0, 0); - triggerGoogleAnalyticsEvent(AnalyticsEventEnum.BOOKING); + + triggerGoogleAnalyticsEvent(new BookingEvent(room)); triggerClarityEvent(AnalyticsEventEnum.BOOKING); }) .catch(() => { diff --git a/frontend/src/components/CurrentBooking/CurrentBooking.tsx b/frontend/src/components/CurrentBooking/CurrentBooking.tsx index 186cf91b..2a9ec7ac 100644 --- a/frontend/src/components/CurrentBooking/CurrentBooking.tsx +++ b/frontend/src/components/CurrentBooking/CurrentBooking.tsx @@ -14,6 +14,10 @@ import { getTimeAvailableMinutes, getBookingTimeLeft } from '../RoomCard/RoomCard'; +import { triggerGoogleAnalyticsEvent } from '../../analytics/googleAnalytics/googleAnalyticsService'; +import { triggerClarityEvent } from '../../analytics/clarityService'; +import { AnalyticsEventEnum } from '../../analytics/AnalyticsEvent'; +import { EndBookingEvent } from '../../analytics/googleAnalytics/googleAnalyticsEvents'; const NO_CONFIRMATION = true; @@ -127,6 +131,9 @@ const CurrentBooking = (props: CurrentBookingProps) => { updateRooms(); createNotificationWithType('Booking ended', 'success'); window.scrollTo(0, 0); + + triggerGoogleAnalyticsEvent(new EndBookingEvent(booking.room)); + triggerClarityEvent(AnalyticsEventEnum.END_BOOKING); }) .catch(() => { setBookingProcessing('false');