memser-spaceport · NivedhaSV · Mar 18, 2024 · Mar 10, 2024 · Mar 12, 2024 · Mar 13, 2024
diff --git a/analytics/events.analytics.ts b/analytics/events.analytics.ts
@@ -0,0 +1,63 @@
+import { usePostHog } from "posthog-js/react";
+
+export default function useEventsAnalytics() {
+  const posthog = usePostHog();
+  const events = {
+    EVENT_CARD_CLICKED: "EVENT_CARD_CLICKED",
+    EVENT_CARD_LINK_CLICKED: "EVENT_CARD_LINK_CLICKED",
+    EVENT_TIMELINE_MONTH_MENU_CLICKED: "EVENT_TIMELINE_MONTH_MENU_CLICKED",
+    EVENT_TIMELINE_MONTH_MENUITEM_CLICKED: "EVENT_TIMELINE_MONTH_MENUITEM_CLICKED",
+    EVENT_CALENDAR_MONTH_NAV: "EVENT_CALENDAR_MONTH_NAV"
+  };
+
+  const captureEvent = (eventName: string, eventParams = {}) => {
+    try {
+      if (posthog?.capture) {
+        const allParams = { ...eventParams };
+        posthog.capture(eventName, { ...allParams });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  function onCardLinkClicked(type, url, viewType){
+    captureEvent(events.EVENT_CARD_LINK_CLICKED, {
+        linkType: type,
+        linkUrl: url,
+        viewType
+    })
+  }
+
+  function onMonthSelected(type, value) {
+    captureEvent(events.EVENT_TIMELINE_MONTH_MENUITEM_CLICKED, {
+        menuType: type,
+        menuValue: value
+    })
+  }
+
+  function onMonthMenuClicked() {
+    captureEvent(events.EVENT_TIMELINE_MONTH_MENU_CLICKED)
+  }
+
+  function onCalendarMonthNav(direction) {
+    captureEvent(events.EVENT_CALENDAR_MONTH_NAV, {
+      direction
+    })
+  }
+
+  function onCalendarCardClicked(eventInfo) {
+    captureEvent(events.EVENT_CARD_CLICKED, {
+        type: 'calendar',
+        ...eventInfo
+    })
+  }
+
+  return {
+    onCardLinkClicked,
+    onMonthSelected,
+    onMonthMenuClicked,
+    onCalendarCardClicked,
+    onCalendarMonthNav
+  };
+}
diff --git a/analytics/filter.analytics.ts b/analytics/filter.analytics.ts
@@ -0,0 +1,112 @@
+import { usePostHog } from "posthog-js/react";
+
+export default function useFilterAnalytics() {
+  const posthog = usePostHog();
+  const events = {
+    EVENT_FILTERS_APPLIED: "EVENT_FILTERS_APPLIED",
+    EVENT_VIEW_TYPE: "EVENT_VIEW_TYPE",
+    CLEAR_ALL_FILTERS: "CLEAR_ALL_FILTERS"
+  };
+
+  const captureEvent = (eventName: string, eventParams = {}) => {
+    try {
+      if (posthog?.capture) {
+        const allParams = { ...eventParams };
+        posthog.capture(eventName, { ...allParams });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  function onFilterMenuClicked(value) {
+    captureEvent(events.EVENT_VIEW_TYPE, {viewType: value})
+  }
+
+  function onClearFiltersClicked() {
+    captureEvent(events.CLEAR_ALL_FILTERS)
+  }
+
+  function onFiltersApplied(filters, type, key, value) {
+    try {
+        if(type === 'multi-select') {
+            const items = [...filters[key]];
+            if(items.includes(value)) {
+                if(items.filter(v => v !== value).length > 0) {
+                    filters[key] = items.filter(v => v !== value)
+                    const eventObj = {
+                        filterType: type,
+                        filterKey: key,
+                        allFilters: JSON.parse(JSON.stringify(filters)),
+                        filterValue:  items.filter(v => v !== value).join('|'),
+                        filterValues:  items.filter(v => v !== value)
+                    }
+                    captureEvent(events.EVENT_FILTERS_APPLIED, eventObj);
+                }
+            } else {
+                filters[key] = [...items, value]
+                const eventObj = {
+                    filterType: type,
+                    filterKey: key,
+                    filterValue:  [...items, value].join('|'),
+                    filterValues:  [...items, value],
+                    allFilters: JSON.parse(JSON.stringify(filters))
+                }
+                captureEvent(events.EVENT_FILTERS_APPLIED, eventObj);
+            }
+
+        } else if(type === 'single-select' || type === 'toggle') {
+            if(filters[key] !== value) {
+                filters[key] =  value;
+                const eventObj = {
+                    filterType: type,
+                    filterKey: key,
+                    filterValue:  value,
+                    filterValues:  [value],
+                    allFilters: JSON.parse(JSON.stringify(filters))
+                }
+                captureEvent(events.EVENT_FILTERS_APPLIED, eventObj);
+            }
+
+        } else if(type === 'date-range') {
+            filters.dateRange[key] = value
+            if(key === 'start') {
+                const eventObj = {
+                    filterType: type,
+                    filterKey: key,
+                    filterValue:  `${value} - ${filters.dateRange['end']}`,
+                    filterValues:  [filters.dateRange['end'].toString(), value.toString()],
+                    allFilters: JSON.parse(JSON.stringify(filters))
+                }
+                captureEvent(events.EVENT_FILTERS_APPLIED, eventObj);
+            } else {
+                const eventObj = {
+                    filterType: type,
+                    filterKey: key,
+                    filterValue:  `${filters.dateRange['start']} - ${value}`,
+                    filterValues:  [filters.dateRange['start'].toString(), value.toString()],
+                    allFilters: JSON.parse(JSON.stringify(filters))
+                }
+                captureEvent(events.EVENT_FILTERS_APPLIED, eventObj);
+            }
+        } else {
+            const eventObj = {
+                filterType: type,
+                filterKey: key,
+                filterValue:  value,
+                filterValues:  [value],
+                allFilters: JSON.parse(JSON.stringify(filters))
+            }
+            captureEvent(events.EVENT_FILTERS_APPLIED, eventObj);
+        }
+    } catch (e) {
+        console.error(e)
+    }
+  }
+
+  return {
+    onFiltersApplied,
+    onFilterMenuClicked,
+    onClearFiltersClicked
+  };
+}
diff --git a/analytics/header.analytics.ts b/analytics/header.analytics.ts
@@ -0,0 +1,27 @@
+import { usePostHog } from "posthog-js/react";
+
+export default function useHeaderAnalytics() {
+  const posthog = usePostHog();
+  const events = {
+    HEADER_HOSTEVENT_CLICKED: "HEADER_HOSTEVENT_CLICKED",
+  };
+
+  const captureEvent = (eventName: string, eventParams = {}) => {
+    try {
+      if (posthog?.capture) {
+        const allParams = { ...eventParams };
+        posthog.capture(eventName, { ...allParams });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  function onHostEventClicked(){
+    captureEvent(events.HEADER_HOSTEVENT_CLICKED)
+  }
+
+  return {
+    onHostEventClicked,
+  };
+}
diff --git a/components/core/app-header.tsx b/components/core/app-header.tsx
@@ -1,9 +1,10 @@
-import { trackGoal } from "fathom-client";
 import AnnouncementBanner from "./announcement-banner";
+import useHeaderAnalytics from "../../analytics/header.analytics";
 
 function AppHeader({ bannerContent, setBannerState, showBanner }) {
-    const onHostEventClicked = () => {
-        trackGoal('CXB9QJA8', 0)
+    const { onHostEventClicked} = useHeaderAnalytics()
+    const onSubmitClicked = () => {
+        onHostEventClicked()
     }
     return <>
         <div className="ah__contianer">
@@ -15,7 +16,7 @@ function AppHeader({ bannerContent, setBannerState, showBanner }) {
                         <h1 className="ah__logo__heading__text">Protocol Labs</h1>
                         <h1 className="ah__logo__heading__text">network events</h1>
                     </div></div>
-                <a className="ah__btn" onClick={onHostEventClicked} target="_blank" href="https://github.com/memser-spaceport/pln-events#submitting-events">Submit an event</a>
+                <a className="ah__btn" onClick={onSubmitClicked} target="_blank" href="https://github.com/memser-spaceport/pln-events#submitting-events">Submit an event</a>
                 {/* <img src="/icons/pln-menu-icon.svg" className="ah__menu"/> */}
             </header>
         </div>
@@ -32,7 +33,7 @@ function AppHeader({ bannerContent, setBannerState, showBanner }) {
             .ah__menu {display: inline; cursor: pointer;}
             @media(min-width: 1200px) {
                 .ah__menu {display: none;}
-                
+
                 .ah__logo__heading { margin:0; padding:0; line-height: 18px; font-size: 18px; font-weight: 700; display: block; margin-left: 8px;}
             }
 

diff --git a/components/page/home/hp-calendar-popup.tsx b/components/page/home/hp-calendar-popup.tsx
@@ -1,15 +1,21 @@
 import { useState, useEffect } from "react"
 import PlEventCard from "../../ui/pl-event-card";
+import useEventsAnalytics from "../../../analytics/events.analytics";
 
 function HpCalendarPopup(props) {
     const [selectedEvent, setSelectedEvent] = useState({});
     const [isEventCardActive, setEventCardStatus] = useState(false);
+    const { onCardLinkClicked } = useEventsAnalytics()
 
     const onCloseCard = () => {
         setEventCardStatus(false);
         setSelectedEvent({});
     }
 
+    const onLinkItemClicked = (item, url) => {
+        onCardLinkClicked(item, url, 'calender')
+    }
+
     useEffect(() => {
         function handleEventPopup(e) {
             setEventCardStatus(true);
@@ -24,7 +30,7 @@ function HpCalendarPopup(props) {
     return <>
         {isEventCardActive && <div className="eventCard">
             <div className="eventCard__item">
-                <PlEventCard {...selectedEvent} />
+                <PlEventCard onLinkItemClicked={onLinkItemClicked} {...selectedEvent} />
                 <p onClick={onCloseCard} className="eventCard__item__close">
                     <img src="/icons/pln-close-white.svg" className="eventCard__item__close__img" />
                 </p>

diff --git a/components/page/home/hp-calendar.tsx b/components/page/home/hp-calendar.tsx
@@ -5,6 +5,7 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import HpCalendarEvent from "./hp-calender-event";
 import HpCalendarDateCell from "./hp-calendar-datecell";
 import HpCalendarPopup from "./hp-calendar-popup";
+import useEventsAnalytics from "../../../analytics/events.analytics";
 
 function HpCalendar(props) {
     const monthWiseEvents = props.monthWiseEvents ?? [];
@@ -17,6 +18,7 @@ function HpCalendar(props) {
     const { state } = useContext(HpContext)
     const {filters} = state;
     const currentYear = filters.year;
+    const {onCalendarCardClicked, onCalendarMonthNav} = useEventsAnalytics()
 
     const onMonthNavigate = (type) => {
         const calendarElement: any = calenderRef?.current
@@ -25,17 +27,20 @@ function HpCalendar(props) {
             if (monthIndex - 1 > -1) {
                 ca.prev()
                 setMonthIndex(v => v - 1)
+                onCalendarMonthNav("previous")
             }
         } else {
             if (monthIndex + 1 < monthNames.length) {
                 ca.next()
                 setMonthIndex(v => v + 1)
+                onCalendarMonthNav("next")
             }
         }
     }
 
     const onEventClicked = (v) => {
         if(v) {
+            onCalendarCardClicked(v?.event?.extendedProps ?? {})
             document.dispatchEvent(new CustomEvent('showCalenderPopup', {detail: v?.event?.extendedProps }))
         }
     }

diff --git a/components/page/home/hp-filter-head.tsx b/components/page/home/hp-filter-head.tsx
@@ -1,12 +1,13 @@
 import { useContext } from "react"
 import { getNoFiltersApplied,HpContext } from './hp-helper'
-import { trackGoal } from "fathom-client";
+import useFilterAnalytics from "../../../analytics/filter.analytics";
 
 function HpFilterHead(props) {
     const {state, dispatch} = useContext(HpContext)
     const {filters, flags} = state
     const {eventMenu} = flags;
     const filterCount = getNoFiltersApplied(filters);
+    const {onFilterMenuClicked}  = useFilterAnalytics()
     const menus = [
         {name: 'timeline', img: '/icons/pln-timeline.svg', title: "Timeline View", imgActive: '/icons/pln-timeline-active.svg'},
         {name: 'calendar', img: '/icons/pln-calendar.svg', title: "Calendar View", imgActive: '/icons/pln-calendar-active.svg'},
@@ -15,17 +16,13 @@ function HpFilterHead(props) {
     const toggleMobileFilter = () => {
         dispatch({ type: 'toggleMobileFilter' })
       }
-    
+
       const onClearFilters = () => {
         dispatch({ type: 'clearAllFilters' })
       }
 
       const onMenuSelection = (value) => {
-        if(value === 'timeline') {
-            trackGoal('E98R34BE', 0)
-        } else {
-            trackGoal('BBAJPYJQ', 0)
-        }
+        onFilterMenuClicked(value)
         dispatch({type: 'setEventMenu', value: value})
     }
 
@@ -70,7 +67,7 @@ function HpFilterHead(props) {
                 @media(max-width: 638px) {
                     .hp__maincontent__tools{top:${props.showBanner ? '220px' : '60px'}}
                 }
-                
+
                 `
             }
         </style>