feat: Kasandra Analytics (#618)

Author: Xavier-Charles

packages/frontend/src/api/hooks/useActivityLogger.ts

@@ -16,6 +16,7 @@ interface IActivityLogger {
     logKeywordSelected: (id: number) => void;
     logWalletConnection: (method: EWalletConnectionMethod) => void;
     logShareSuperfeedItem: (item: TSuperfeedItem) => void;
+    logButtonClicked: (buttonName: string, data?: JSONValue) => void;
 }
 
 export const useActivityLogger = (): IActivityLogger => {
@@ -134,11 +135,33 @@ export const useActivityLogger = (): IActivityLogger => {
             );
     };
 
+    const logButtonClicked = (buttonName: string, data?: JSONValue) => {
+        sendActivityLog({
+            event_type: EActivityLogEventTypes.ButtonClicked,
+            object_name: buttonName,
+            data,
+        })
+            .unwrap()
+            .then((resp) =>
+                Logger.debug(
+                    "useActivityLogger::logButtonClicked: updated button clicked activity log",
+                    resp
+                )
+            )
+            .catch((err) =>
+                Logger.error(
+                    "useActivityLogger::logButtonClicked: error updating button clicked activity log",
+                    err
+                )
+            );
+    };
+
     return {
         logViewVisited,
         logCookieChoice,
         logKeywordSelected,
         logWalletConnection,
         logShareSuperfeedItem,
+        logButtonClicked,
     };
 };

packages/frontend/src/api/hooks/useCustomAnalytics.ts

@@ -0,0 +1,31 @@
+import { logEvent } from "firebase/analytics";
+import { EActivityLogEventTypes } from "../services/activity-log/types";
+import { analytics } from "../utils/firebaseUtils";
+
+import { Logger } from "../utils/logging";
+import { useActivityLogger } from "./useActivityLogger";
+
+export type TButtonClickEventPayload = {
+    buttonName:
+        | "kasandra-coin"
+        | "kasandra-case"
+        | "kasandra-date-range"
+        | "kasandra-disclaimer"
+        | "kasandra-datapoint";
+    data?: JSONValue;
+};
+
+export const useCustomAnalytics = () => {
+    const { logButtonClicked: logButtonClickedActivity } = useActivityLogger();
+
+    const logButtonClicked = (payload: TButtonClickEventPayload) => {
+        const key = EActivityLogEventTypes.ButtonClicked;
+        logEvent(analytics, key, payload);
+        logButtonClickedActivity(payload.buttonName, payload.data);
+        Logger.debug("logButtonClicked", key, payload);
+    };
+
+    return {
+        logButtonClicked,
+    };
+};

packages/frontend/src/api/services/activity-log/types.ts

@@ -5,6 +5,7 @@ export enum EActivityLogEventTypes {
     CookieChoiceSet = "COOKIE_CHOICE_SET",
     WalletConnection = "WALLET_CONNECT",
     ShareSuperfeedItem = "SHARE_ITEM",
+    ButtonClicked = "BUTTON_CLICKED",
 }
 
 export enum EActivityLogObjectTypes {
@@ -13,6 +14,7 @@ export enum EActivityLogObjectTypes {
     View,
     WalletConnection,
     ShareSuperfeedItem,
+    Button,
 }
 
 export type TKeywordActivityLog = {
@@ -54,13 +56,20 @@ export type TShareSuperfeedItemActivityLog = {
     data: JSONValue;
 };
 
+export type TButtonClickedActivityLog = {
+    event_type: EActivityLogEventTypes.ButtonClicked;
+    object_name: string;
+    data?: JSONValue;
+};
+
 export type TRemoteActivityLog =
     | TKeywordActivityLog
     | TWidgetActivityLog
     | TViewActivityLog
     | TCookieActivityLog
     | TWalletConnectionActivityLog
-    | TShareSuperfeedItemActivityLog;
+    | TShareSuperfeedItemActivityLog
+    | TButtonClickedActivityLog;
 
 export type TActivityLogRequest = TRemoteActivityLog;
 export type TActivityLogResponse = TRemoteActivityLog;

packages/frontend/src/api/utils/firebaseUtils.ts

@@ -1,7 +1,9 @@
+import { getAnalytics } from "firebase/analytics";
 import { initializeApp } from "firebase/app";
 import CONFIG from "src/config/config";
 
 // Initialize Firebase
 const { APP_CONFIG } = CONFIG.FIREBASE;
 export const isConfigured = !!APP_CONFIG.apiKey;
 export const firebaseApp = isConfigured ? initializeApp(APP_CONFIG) : undefined;
+export const analytics = getAnalytics(firebaseApp);

packages/frontend/src/components/kasandra/KasandraModule.tsx

@@ -2,7 +2,7 @@ import { FC, useMemo } from "react";
 import { ModuleLoader } from "@alphaday/ui-kit";
 import { useTranslation } from "react-i18next";
 import useHeaderScroll from "src/api/hooks/useHeaderScroll";
-import {
+import type {
     TChartRange,
     TCoin,
     TCoinMarketHistory,

packages/frontend/src/components/market/MarketsList.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { TabsBar } from "@alphaday/ui-kit";
-import { TCoin } from "src/api/types";
-import { TMarketMeta } from "./types";
+import type { TCoin } from "src/api/types";
+import type { TMarketMeta } from "./types";
 
 interface IMarketsList {
     markets?: TMarketMeta[] | undefined;

packages/frontend/src/containers/kasandra/KasandraContainer.tsx

@@ -1,5 +1,6 @@
 import { FC, useEffect, useMemo, useCallback, Suspense } from "react";
 import { useGlobalSearch, useWidgetHeight } from "src/api/hooks";
+import { useCustomAnalytics } from "src/api/hooks/useCustomAnalytics";
 import {
     useGetKasandraCoinsQuery,
     useGetMarketHistoryQuery,
@@ -28,6 +29,7 @@ const KasandraContainer: FC<IModuleContainer> = ({ moduleData }) => {
     const WIDGET_HEIGHT = useWidgetHeight(moduleData);
 
     const isAuthenticated = useAppSelector(selectIsAuthenticated);
+    const { logButtonClicked } = useCustomAnalytics();
 
     const selectedTimestamp = useAppSelector(
         (state) => state.widgets.kasandra?.[moduleData.hash]?.selectedTimestamp
@@ -125,12 +127,38 @@ const KasandraContainer: FC<IModuleContainer> = ({ moduleData }) => {
         limit: 24,
     });
 
+    const logData = useMemo(() => {
+        return {
+            selectedTimestamp: selectedTimestamp ?? 0,
+            widgetName: moduleData.name,
+            case: selectedCase,
+            chartRange: selectedChartRange,
+            marketId: selectedMarket?.id,
+            marketTicker: selectedMarket?.ticker,
+        };
+    }, [
+        moduleData.name,
+        selectedCase,
+        selectedChartRange,
+        selectedMarket?.id,
+        selectedMarket?.ticker,
+        selectedTimestamp,
+    ]);
+
     const handleSelectedMarket = useCallback(
         (market: TMarketMeta) => {
             dispatch(setKasandraData({ widgetHash: moduleData.hash, market }));
+            logButtonClicked({
+                buttonName: "kasandra-coin",
+                data: {
+                    ...logData,
+                    marketId: market.id,
+                    marketTicker: market.ticker,
+                },
+            });
         },
 
-        [dispatch, moduleData.hash]
+        [dispatch, logButtonClicked, logData, moduleData.hash]
     );
 
     const handleSelectedChartRange = useCallback(
@@ -141,18 +169,32 @@ const KasandraContainer: FC<IModuleContainer> = ({ moduleData }) => {
                     chartRange,
                 })
             );
+            logButtonClicked({
+                buttonName: "kasandra-date-range",
+                data: {
+                    ...logData,
+                    chartRange,
+                },
+            });
         },
 
-        [dispatch, moduleData.hash]
+        [dispatch, logButtonClicked, logData, moduleData.hash]
     );
 
     const handleSelectedCase = useCallback(
         (kase: TKasandraCase) => {
             dispatch(
                 setKasandraData({ widgetHash: moduleData.hash, case: kase })
             );
+            logButtonClicked({
+                buttonName: "kasandra-case",
+                data: {
+                    ...logData,
+                    case: kase,
+                },
+            });
         },
-        [dispatch, moduleData.hash]
+        [dispatch, logButtonClicked, logData, moduleData.hash]
     );
 
     const handleselectedTimestamp = useCallback(
@@ -163,8 +205,15 @@ const KasandraContainer: FC<IModuleContainer> = ({ moduleData }) => {
                     timestamp,
                 })
             );
+            logButtonClicked({
+                buttonName: "kasandra-datapoint",
+                data: {
+                    ...logData,
+                    selectedTimestamp: timestamp,
+                },
+            });
         },
-        [dispatch, moduleData.hash]
+        [dispatch, logButtonClicked, logData, moduleData.hash]
     );
 
     const handleAcceptDisclaimer = useCallback(() => {
@@ -174,7 +223,13 @@ const KasandraContainer: FC<IModuleContainer> = ({ moduleData }) => {
                 disclaimerAccepted: true,
             })
         );
-    }, [dispatch, moduleData.hash]);
+        logButtonClicked({
+            buttonName: "kasandra-disclaimer",
+            data: {
+                widgetName: moduleData.name,
+            },
+        });
+    }, [dispatch, logButtonClicked, moduleData.hash, moduleData.name]);
 
     /**
      * if user searches for some keyword and tags are included, automatically set the selected market