Analytics updates (#151)

* Add device for tracking

* tracking connect and account modal viewing. Handling for address and userid being undefined

* Add connect and disconnect events

* add changeset

* Get some device info by default

Author: WyattMufson

.changeset/long-otters-punch.md

@@ -0,0 +1,6 @@
+---
+"@treasure-dev/tdk-react": patch
+"@treasure-dev/tdk-core": patch
+---
+
+Updated analytics, device tracking + auto default analytics tracking

packages/core/src/analytics/AnalyticsManager.ts

@@ -6,8 +6,13 @@ import {
   getCachedEvents,
   removeOldEvents,
 } from "./storage";
-import type { AnalyticsPayload, AppInfo, TrackableEvent } from "./types";
-import { getEventId, getServerTime } from "./utils";
+import type {
+  AnalyticsPayload,
+  AppInfo,
+  Device,
+  TrackableEvent,
+} from "./types";
+import { getDevice, getEventId, getServerTime } from "./utils";
 
 export class AnalyticsManager {
   static _instance: AnalyticsManager;
@@ -22,6 +27,8 @@ export class AnalyticsManager {
 
   cartridgeTag!: string;
 
+  device?: Device;
+
   private constructor() {}
 
   public static get instance(): AnalyticsManager {
@@ -37,11 +44,23 @@ export class AnalyticsManager {
     apiKey,
     app,
     cartridgeTag,
-  }: { apiUri?: string; apiKey: string; app: AppInfo; cartridgeTag: string }) {
+    device,
+  }: {
+    apiUri?: string;
+    apiKey: string;
+    app: AppInfo;
+    cartridgeTag: string;
+    device?: Device;
+  }) {
     this.apiUri = apiUri;
     this.apiKey = apiKey;
     this.app = app;
     this.cartridgeTag = cartridgeTag;
+    const defaultDevice = getDevice();
+    this.device = {
+      ...defaultDevice,
+      ...device,
+    };
     this.initialized = true;
 
     setInterval(
@@ -96,6 +115,7 @@ export class AnalyticsManager {
       time_server: serverTime,
       time_local: localTime,
       app: this.app,
+      device: this.device,
       tdk_flavour: "tdk-js",
       tdk_version: pjson.version,
     };

packages/core/src/analytics/storage.ts

@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from "uuid";
 import type { AnalyticsPayload } from "./types";
 
 function getCachedEventIds(): string[] {
@@ -69,3 +70,14 @@ export function removeOldEvents(): void {
   }
   localStorage.setItem("tdk-analytics-event-ids", JSON.stringify(eventIds));
 }
+
+export function getDeviceUniqueId(): string {
+  const deviceUIDKey = "tdk-analytics-device-unique-id";
+  const stored = localStorage.getItem(deviceUIDKey);
+  if (stored) {
+    return stored;
+  }
+  const newUID = `device-${uuidv4()}`;
+  localStorage.setItem(deviceUIDKey, newUID);
+  return newUID;
+}

packages/core/src/analytics/utils.ts

@@ -1,4 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
+import { getDeviceUniqueId } from "./storage";
+import type { Device } from "./types";
 
 export async function getServerTime(apiUri: string): Promise<string> {
   const result = await fetch(`${apiUri}/utils/time-unix`);
@@ -12,3 +14,25 @@ export async function getServerTime(apiUri: string): Promise<string> {
 export function getEventId(): string {
   return `event-${uuidv4()}`;
 }
+
+export function getDevice(): Device {
+  if (typeof window !== "undefined" && window.navigator) {
+    const deviceID = getDeviceUniqueId();
+    return {
+      device_unique_id: deviceID,
+      device_os: navigator.userAgent.includes("Windows")
+        ? "Windows"
+        : navigator.userAgent.includes("Mac")
+          ? "MacOS"
+          : navigator.userAgent.includes("Linux")
+            ? "Linux"
+            : "Unknown",
+    };
+  }
+  const os = require("node:os");
+  return {
+    device_name: os.hostname(),
+    device_model: `${os.type()} ${os.release()}`,
+    device_os: os.platform(),
+  };
+}

packages/react/src/contexts/treasure.tsx

@@ -39,6 +39,10 @@ import { startUserSessionViaLauncher } from "@treasure-dev/launcher";
 import { useLauncher } from "../hooks/useLauncher";
 import { i18n } from "../i18n";
 import type { AnalyticsEvent, Config, ContextValues } from "../types";
+import {
+  EVT_TREASURECONNECT_CONNECTED,
+  EVT_TREASURECONNECT_DISCONNECTED,
+} from "../utils/defaultAnalytics";
 import {
   clearStoredAuthToken,
   getStoredAuthToken,
@@ -113,6 +117,7 @@ const TreasureProviderInner = ({
       apiKey: analyticsOptions.apiKey,
       app: analyticsOptions.appInfo,
       cartridgeTag: analyticsOptions.cartridgeTag,
+      device: analyticsOptions.device,
     });
 
     return AnalyticsManager.instance;
@@ -126,10 +131,11 @@ const TreasureProviderInner = ({
         );
       }
 
-      const address = event.address ?? user?.address;
+      let address = event.address ?? user?.address;
 
       if (address === undefined && event.userId === undefined) {
-        throw new Error("Cannot track event without userId or address");
+        address = "";
+        event.userId = "";
       }
 
       // After the previous check one must be non-null so this works
@@ -149,7 +155,7 @@ const TreasureProviderInner = ({
       const trackableEvent: TrackableEvent = {
         ...playerId,
         name: event.name,
-        properties: event.properties,
+        properties: event.properties ?? {},
       };
       return analyticsManager.trackCustomEvent(trackableEvent);
     },
@@ -175,6 +181,12 @@ const TreasureProviderInner = ({
   });
 
   const logOut = () => {
+    trackCustomEvent({
+      name: EVT_TREASURECONNECT_DISCONNECTED,
+      properties: {
+        isUsingTreasureLauncher,
+      },
+    });
     setUser(undefined);
     tdk.clearAuthToken();
     clearStoredAuthToken();
@@ -227,6 +239,13 @@ const TreasureProviderInner = ({
     setUser(nextUser);
     setStoredAuthToken(nextAuthToken as string);
 
+    trackCustomEvent({
+      name: EVT_TREASURECONNECT_CONNECTED,
+      properties: {
+        isUsingTreasureLauncher,
+      },
+    });
+
     // Trigger completion callback
     onConnect?.(nextUser);
     return nextUser;

packages/react/src/hooks/useConnect.tsx

@@ -16,6 +16,10 @@ import {
 } from "../components/connect/ConnectModal";
 import { useTreasure } from "../contexts/treasure";
 import { getLocaleId } from "../i18n";
+import {
+  EVT_TREASURECONNECT_UI_ACCOUNT,
+  EVT_TREASURECONNECT_UI_LOGIN,
+} from "../utils/defaultAnalytics";
 
 export type Options = ConnectModalOptions & {
   supportedChainIds?: number[];
@@ -72,6 +76,7 @@ export const useConnect = (props?: Props) => {
     setRootElement,
     isUsingTreasureLauncher,
     openLauncherAccountModal,
+    trackCustomEvent,
   } = useTreasure();
   const { open: openWalletDetailsModal } = useWalletDetailsModal();
   const {
@@ -94,6 +99,11 @@ export const useConnect = (props?: Props) => {
       );
       return;
     }
+
+    trackCustomEvent({
+      name: EVT_TREASURECONNECT_UI_LOGIN,
+    });
+
     setRootElement(
       <ConnectModal
         open
@@ -105,6 +115,13 @@ export const useConnect = (props?: Props) => {
   };
 
   const openAccountModal = () => {
+    trackCustomEvent({
+      name: EVT_TREASURECONNECT_UI_ACCOUNT,
+      properties: {
+        isUsingTreasureLauncher,
+      },
+    });
+
     if (isUsingTreasureLauncher) {
       openLauncherAccountModal(connectModalSize);
       return;

packages/react/src/types.ts

@@ -2,6 +2,7 @@ import type {
   AddressString,
   AppInfo,
   Contract,
+  Device,
   EcosystemIdString,
   PropertyValue,
   SessionOptions,
@@ -18,7 +19,7 @@ export type AnalyticsEvent = {
   name: string;
   userId?: string;
   address?: string;
-  properties: { [key: string]: PropertyValue | PropertyValue[] };
+  properties?: { [key: string]: PropertyValue | PropertyValue[] };
 };
 
 type LauncherOptions = {
@@ -30,6 +31,7 @@ type AnalyticsOptions = {
   apiKey: string;
   appInfo: AppInfo;
   cartridgeTag: string;
+  device?: Device;
 };
 
 export type Config = {

packages/react/src/utils/defaultAnalytics.ts

@@ -0,0 +1,4 @@
+export const EVT_TREASURECONNECT_CONNECTED = "tc_connected";
+export const EVT_TREASURECONNECT_DISCONNECTED = "tc_disconnected";
+export const EVT_TREASURECONNECT_UI_LOGIN = "tc_ui_login";
+export const EVT_TREASURECONNECT_UI_ACCOUNT = "tc_ui_account";