chore: timeline plausible tracking (#8338)

frontend/src/component/events/EventTimeline/EventTimelineEventGroup/EventTimelineEventGroup.tsx

@@ -3,6 +3,7 @@ import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { EventTimelineEventTooltip } from './EventTimelineEventTooltip/EventTimelineEventTooltip';
 import type { TimelineEventGroup } from '../EventTimeline';
 import { EventTimelineEventCircle } from './EventTimelineEventCircle';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledEvent = styled('div', {
     shouldForwardProp: (prop) => prop !== 'position',
@@ -27,13 +28,17 @@ export const EventTimelineEventGroup = ({
     startTime,
     endTime,
 }: IEventTimelineEventProps) => {
+    const { trackEvent } = usePlausibleTracker();
     const timelineDuration = endTime - startTime;
     const eventTime = group[0].timestamp;
 
     const position = `${((eventTime - startTime) / timelineDuration) * 100}%`;
+    const trackHover = () => {
+        trackEvent('event-timeline-event-hover');
+    };
 
     return (
-        <StyledEvent position={position}>
+        <StyledEvent position={position} onMouseEnter={trackHover}>
             <HtmlTooltip
                 title={<EventTimelineEventTooltip group={group} />}
                 maxWidth={350}

frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx

@@ -11,6 +11,7 @@ import { useEffect, useMemo } from 'react';
 import { timeSpanOptions } from '../EventTimelineProvider';
 import CloseIcon from '@mui/icons-material/Close';
 import { useEventTimelineContext } from '../EventTimelineContext';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { EventTimelineHeaderTip } from './EventTimelineHeaderTip';
 
 const StyledCol = styled('div')(({ theme }) => ({
@@ -50,6 +51,7 @@ export const EventTimelineHeader = ({
         () => environments.filter(({ enabled }) => enabled),
         [environments],
     );
+    const { trackEvent } = usePlausibleTracker();
 
     useEffect(() => {
         if (activeEnvironments.length > 0 && !environment) {
@@ -117,7 +119,10 @@ export const EventTimelineHeader = ({
                     <IconButton
                         aria-label='close'
                         size='small'
-                        onClick={() => setOpen(false)}
+                        onClick={() => {
+                            trackEvent('event-timeline-close');
+                            setOpen(false);
+                        }}
                     >
                         <CloseIcon />
                     </IconButton>

frontend/src/component/menu/Header/Header.tsx

@@ -35,6 +35,7 @@ import { useUiFlag } from 'hooks/useUiFlag';
 import { CommandBar } from 'component/commandBar/CommandBar';
 import LinearScaleIcon from '@mui/icons-material/LinearScale';
 import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const HeaderComponent = styled(AppBar)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -111,6 +112,7 @@ const Header = () => {
     const eventTimeline = useUiFlag('eventTimeline') && !isOss();
     const { open: showTimeline, setOpen: setShowTimeline } =
         useEventTimelineContext();
+    const { trackEvent } = usePlausibleTracker();
 
     const routes = getRoutes();
     const adminRoutes = useAdminRoutes();
@@ -197,9 +199,14 @@ const Header = () => {
                                     arrow
                                 >
                                     <StyledIconButton
-                                        onClick={() =>
-                                            setShowTimeline(!showTimeline)
-                                        }
+                                        onClick={() => {
+                                            trackEvent(
+                                                showTimeline
+                                                    ? 'event-timeline-close'
+                                                    : 'event-timeline-open',
+                                            );
+                                            setShowTimeline(!showTimeline);
+                                        }}
                                         size='large'
                                     >
                                         <LinearScaleIcon />

frontend/src/hooks/usePlausibleTracker.ts

@@ -66,7 +66,10 @@ export type CustomEvents =
     | 'new-in-unleash-click'
     | 'new-in-unleash-dismiss'
     | 'search-opened'
-    | 'events-exported';
+    | 'events-exported'
+    | 'event-timeline-open'
+    | 'event-timeline-close'
+    | 'event-timeline-event-hover';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);