Update metric events to fire on player callback (#693)

* Move player started/paused analytics events to player callback. Add error event * Wrap sendEvent with try/catch * Initialize GA only once * Add more detail to event sending error * Add events for when user starts and pauses player
orcasound · Nov 5, 2024 · 4ce27d8 · 4ce27d8
1 parent 1c1de4d
commit 4ce27d8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 14 deletions.
diff --git a/ui/src/components/Player/Player.tsx b/ui/src/components/Player/Player.tsx
@@ -119,16 +119,26 @@ export default function Player({
     }
   }, [playerRef, updateMediaSession]);
 
-  const handleReady = useCallback((player: VideoJSPlayer) => {
-    playerRef.current = player;
+  const handleReady = useCallback(
+    (player: VideoJSPlayer) => {
+      playerRef.current = player;
 
-    player.on("playing", () => {
-      setPlayerStatus("playing");
-    });
-    player.on("pause", () => setPlayerStatus("paused"));
-    player.on("waiting", () => setPlayerStatus("loading"));
-    player.on("error", () => setPlayerStatus("error"));
-  }, []);
+      player.on("playing", () => {
+        setPlayerStatus("playing");
+        currentFeed?.slug && analytics.stream.started(currentFeed.slug);
+      });
+      player.on("pause", () => {
+        setPlayerStatus("paused");
+        currentFeed?.slug && analytics.stream.paused(currentFeed.slug);
+      });
+      player.on("waiting", () => setPlayerStatus("loading"));
+      player.on("error", () => {
+        setPlayerStatus("error");
+        currentFeed?.slug && analytics.stream.error(currentFeed.slug);
+      });
+    },
+    [currentFeed?.slug],
+  );
 
   const handlePlayPauseClick = async () => {
     const player = playerRef.current;
@@ -146,10 +156,10 @@ export default function Player({
     try {
       if (playerStatus === "loading" || playerStatus === "playing") {
         await player.pause();
-        currentFeed?.slug && analytics.stream.paused(currentFeed.slug);
+        currentFeed?.slug && analytics.stream.userPaused(currentFeed.slug);
       } else {
         await player.play();
-        currentFeed?.slug && analytics.stream.started(currentFeed.slug);
+        currentFeed?.slug && analytics.stream.userStarted(currentFeed.slug);
       }
     } catch (e) {
       console.error(e);

diff --git a/ui/src/utils/analytics.ts b/ui/src/utils/analytics.ts
@@ -1,6 +1,7 @@
 import ReactGA from "react-ga4";
 
 export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
+let analyticsInitialized = false;
 
 const about = {
   sampleAudioPlayed: (exampleTitle: string) =>
@@ -49,6 +50,24 @@ const stream = {
       action: "Player paused",
       label: feedSlug,
     }),
+  userStarted: (feedSlug: string) =>
+    sendEvent({
+      category: "Stream",
+      action: "User started player",
+      label: feedSlug,
+    }),
+  userPaused: (feedSlug: string) =>
+    sendEvent({
+      category: "Stream",
+      action: "User paused player",
+      label: feedSlug,
+    }),
+  error: (feedSlug: string) =>
+    sendEvent({
+      category: "Stream",
+      action: "Player errored",
+      label: feedSlug,
+    }),
   playerTextClicked: (playerText: string) => {
     sendEvent({
       category: "Stream",
@@ -59,9 +78,19 @@ const stream = {
 };
 
 function sendEvent(...eventParams: Parameters<typeof ReactGA.event>) {
-  if (GA_TRACKING_ID) {
-    ReactGA.initialize(GA_TRACKING_ID);
-    ReactGA.event(...eventParams);
+  try {
+    if (GA_TRACKING_ID) {
+      if (!analyticsInitialized) {
+        ReactGA.initialize(GA_TRACKING_ID);
+        analyticsInitialized = true;
+      }
+      ReactGA.event(...eventParams);
+    }
+  } catch (e) {
+    console.error("Failed to send analytics event:", {
+      error: e,
+      eventParams,
+    });
   }
 }