feat: analytics events

* chore: standard formatting

* chore: format

* feat: analytics events

src/lib/hooks/useFavorites.ts

@@ -1,11 +1,30 @@
 import { useContext } from "react";
+import { event } from "@/lib/utils";
 import { FavoritesContext } from "@/lib/context/favorites";
 
 export function useFavorites() {
   const { favs, setFavs } = useContext(FavoritesContext);
 
-  const add = (id: string) => setFavs([...favs, id]);
-  const remove = (id: string) => setFavs(favs.filter((f) => id !== f));
+  const add = (id: string) => {
+    setFavs([...favs, id]);
+    event({
+      action: "fav",
+      label: "Radio faved",
+      category: "favorites",
+      value: id,
+    });
+  };
+
+  const remove = (id: string) => {
+    setFavs(favs.filter((f) => id !== f));
+    event({
+      action: "unfav",
+      label: "Radio unfaved",
+      category: "favorites",
+      value: id,
+    });
+  };
+
   const isFaved = (id: string) => favs.includes(id);
 
   return { favs, add, remove, isFaved };

src/lib/hooks/usePlayer.ts

@@ -1,4 +1,5 @@
 import { useEffect, useContext } from "react";
+import { event } from "@/lib/utils";
 import { PlayerContext } from "@/lib/context/player";
 import { AudioElementContext } from "@/lib/context/audio";
 import { Station } from "@/lib/graphql/gqless/generated";
@@ -16,6 +17,14 @@ export function usePlayer() {
   const load = (station: Station) => {
     if (audio.current.src !== station.url) {
       audio.current.src = station.url;
+
+      event({
+        action: "load",
+        label: "Radio load",
+        category: "player",
+        value: station.stationuuid,
+      });
+
       setState((state) => ({
         ...state,
         error: false,
@@ -29,6 +38,7 @@ export function usePlayer() {
 
   const stop = () => {
     audio.current.src = EMPTY_AUDIO;
+
     setState({
       error: false,
       paused: false,
@@ -39,13 +49,22 @@ export function usePlayer() {
   };
 
   const onPlaying = () =>
-    setState((state) => ({
-      ...state,
-      error: false,
-      paused: false,
-      loading: false,
-      playing: true,
-    }));
+    setState((state) => {
+      event({
+        action: "play",
+        label: "Radio playing",
+        category: "player",
+        value: state?.station?.stationuuid,
+      });
+
+      return {
+        ...state,
+        error: false,
+        paused: false,
+        loading: false,
+        playing: true,
+      };
+    });
 
   const onPause = () =>
     setState((state) => ({
@@ -75,26 +94,25 @@ export function usePlayer() {
     }));
 
   const onError = () =>
-    setState((state) => ({
-      ...state,
-      error: true,
-      paused: false,
-      loading: false,
-      playing: false,
-    }));
+    setState((state) => {
+      event({
+        action: "error",
+        label: "Player error",
+        category: "player",
+        value: state?.station?.stationuuid,
+      });
 
-  const onEnded = () =>
-    setState((state) => ({
-      ...state,
-      error: false,
-      paused: false,
-      playing: false,
-      station: null,
-    }));
+      return {
+        ...state,
+        error: true,
+        paused: false,
+        loading: false,
+        playing: false,
+      };
+    });
 
   useEffect(() => {
     audio.current.addEventListener("error", onError);
-    audio.current.addEventListener("ended", onEnded);
     audio.current.addEventListener("pause", onPause);
     audio.current.addEventListener("playing", onPlaying);
     audio.current.addEventListener("loadstart", onLoadStart);

src/lib/utils.ts

@@ -14,18 +14,18 @@ export function mapValueToRange(
   return ((n - a) * (y - x)) / (b - a) + x;
 }
 
-export const pageview = (url) => {
+export const pageview = (page_path: string) => {
   // @ts-expect-error
   window.gtag("config", process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
-    page_path: url,
+    page_path,
   });
 };
 
 export const event = ({ action, category, label, value }) => {
   // @ts-expect-error
   window.gtag("event", action, {
-    event_category: category,
+    value,
     event_label: label,
-    value: value,
+    event_category: category,
   });
 };