Added some classes for defining Google Analytics events

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'
 };

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
+        };
+    }
+}

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
+        );
+    }
+}

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(() => {

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');