Add analytics for report actions (open, play)

orcasound · Nov 20, 2023 · 9c9748e · 9c9748e
1 parent 9ef2b38
commit 9c9748e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git a/ui/src/components/DetectionsTable.tsx b/ui/src/components/DetectionsTable.tsx
@@ -7,23 +7,27 @@ import {
   TableRow,
 } from "@mui/material";
 
-import { Detection, Feed } from "@/graphql/generated";
+import { Candidate, Detection, Feed } from "@/graphql/generated";
+import { analytics } from "@/utils/analytics";
 import { formatTimestamp } from "@/utils/time";
 
 import { DetectionsPlayer } from "./Player/DetectionsPlayer";
 
 export default function DetectionsTable({
   detections,
   feed,
+  candidate
 }: {
   detections: Detection[];
   feed: Pick<Feed, "slug" | "nodeName">;
+  candidate: Pick<Candidate, "id">;
 }) {
   const offsetPadding = 15;
   const minOffset = Math.min(...detections.map((d) => +d.playerOffset));
   const maxOffset = Math.max(...detections.map((d) => +d.playerOffset));
   const startOffset = Math.max(0, minOffset - offsetPadding);
   const endOffset = maxOffset + offsetPadding;
+
   return (
     <Box>
       <DetectionsPlayer
@@ -37,6 +41,11 @@ export default function DetectionsTable({
         timestamp={Math.min(...detections.map((d) => d.playlistTimestamp))}
         startOffset={startOffset}
         endOffset={endOffset}
+        onAudioPlay={() => {
+          if (candidate.id) {
+            analytics.reports.reportAudioPlayed(candidate.id);
+          }
+        }}
       />
       <Table sx={{ marginTop: 6 }}>
         <TableHead>

diff --git a/ui/src/components/Player/DetectionsPlayer.tsx b/ui/src/components/Player/DetectionsPlayer.tsx
@@ -22,12 +22,14 @@ export function DetectionsPlayer({
   timestamp,
   startOffset,
   endOffset,
+  onAudioPlay
 }: {
   feed: Pick<Feed, "nodeName">;
   marks: { label: string; value: number }[];
   timestamp: number;
   startOffset: number;
   endOffset: number;
+  onAudioPlay?: () => void;
 }) {
   const [playerStatus, setPlayerStatus] = useState<PlayerStatus>("idle");
   const playerRef = useRef<VideoJSPlayer | null>(null);
@@ -113,6 +115,7 @@ export function DetectionsPlayer({
         player.pause();
       } else {
         player.play();
+        onAudioPlay?.();
       }
     } catch (e) {
       console.error(e);

diff --git a/ui/src/pages/reports/[candidateId].tsx b/ui/src/pages/reports/[candidateId].tsx
@@ -13,6 +13,7 @@ import DetectionsTable from "@/components/DetectionsTable";
 import Header from "@/components/Header";
 import { useCandidateQuery } from "@/graphql/generated";
 import type { NextPageWithLayout } from "@/pages/_app";
+import { analytics } from "@/utils/analytics";
 
 const CandidatePage: NextPageWithLayout = () => {
   const router = useRouter();
@@ -23,6 +24,10 @@ const CandidatePage: NextPageWithLayout = () => {
   });
   const candidate = candidatesQuery.data?.candidate;
 
+  if (candidateId && typeof candidateId === "string") {
+    analytics.reports.reportOpened(candidateId);
+  }
+
   return (
     <div>
       <Head>Report {candidateId} | Orcasound </Head>
@@ -62,6 +67,7 @@ const CandidatePage: NextPageWithLayout = () => {
                     <DetectionsTable
                       detections={candidate.detections}
                       feed={candidate.feed}
+                      candidate={candidate}
                     />
                   )}
                 </Box>

diff --git a/ui/src/pages/reports/index.tsx b/ui/src/pages/reports/index.tsx
@@ -22,6 +22,7 @@ import DetectionsTable from "@/components/DetectionsTable";
 import Header from "@/components/Header";
 import { CandidatesQuery, useCandidatesQuery } from "@/graphql/generated";
 import type { NextPageWithLayout } from "@/pages/_app";
+import { analytics } from "@/utils/analytics";
 import { formatTimestamp } from "@/utils/time";
 
 type CandidateQueryCandidates = NonNullable<CandidatesQuery["candidates"]>;
@@ -73,6 +74,7 @@ const DetectionsPage: NextPageWithLayout = () => {
       if (candidate) {
         setSelectedCandidate(candidate);
         setDetectionModalOpen(true);
+        analytics.reports.reportOpened(candidateIdParam);
       }
     }
   }, [candidates, candidateIdParam]);
@@ -122,6 +124,7 @@ const DetectionsPage: NextPageWithLayout = () => {
                           <DetectionsTable
                             detections={selectedCandidate.detections}
                             feed={selectedCandidate.feed}
+                            candidate={selectedCandidate}
                           />
                         )}
                       </Box>

diff --git a/ui/src/utils/analytics.ts b/ui/src/utils/analytics.ts
@@ -91,10 +91,26 @@ const form = {
     sendEvent({ category: "Form", action: "Feedback button clicked" }),
 };
 
+const reports = {
+  reportOpened: (candidateId: string) =>
+    sendEvent({
+      category: "Reports",
+      action: "Report opened",
+      label: candidateId,
+    }),
+  reportAudioPlayed: (candidateId: string) =>
+    sendEvent({
+      category: "Reports",
+      action: "Report audio played",
+      label: candidateId,
+    }),
+};
+
 export const analytics = {
   about,
   detection,
   stream,
   nav,
   form,
+  reports,
 };