feat: ensure platform defaults correctly set on mobile

Author: camerow

apps/mobile/.env.development

@@ -1 +1 @@
-export EXPO_PUBLIC_NODE_ENV="development"
+EXPO_PUBLIC_NODE_ENV="development"

apps/mobile/src/store/settings/settings.ts

@@ -114,7 +114,7 @@ export function useSettings() {
       void analytics?.track('user_setting_updated', {
         analytics: pref,
       });
-      void analytics?.identify({
+      void analytics?.identify(undefined, {
         analytics_preference: pref,
       });
     },
@@ -129,7 +129,7 @@ export function useSettings() {
       void analytics?.track('user_setting_updated', {
         email_address: address,
       });
-      void analytics?.identify({
+      void analytics?.identify(undefined, {
         has_email_address: !!address,
       });
     },
@@ -184,7 +184,7 @@ export function useSettings() {
       const network =
         networkPreference.chain.bitcoin.bitcoinNetwork === 'mainnet' ? 'testnet' : 'mainnet';
       dispatch(userChangedNetworkPreference(network));
-      void analytics?.identify({
+      void analytics?.identify(undefined, {
         active_network: network,
       });
       void analytics?.track('user_setting_updated', {
@@ -197,7 +197,7 @@ export function useSettings() {
       void analytics?.track('user_setting_updated', {
         theme,
       });
-      void analytics?.identify({
+      void analytics?.identify(undefined, {
         active_theme: theme,
       });
     },

apps/mobile/src/utils/analytics-plugins.ts

@@ -0,0 +1,30 @@
+import {
+  EventType,
+  PlatformPlugin,
+  PluginType,
+  SegmentClient,
+  SegmentEvent,
+} from '@segment/analytics-react-native';
+
+/**
+ * This plugin is used to ensure that any default event tracks, eg app lifecycle events,
+ * have the platform property set to 'mobile'.
+ *
+ * Docs on these are sparse but this source code is a good reference:
+ * https://github.com/segmentio/analytics-react-native/tree/master/packages/plugins
+ *
+ */
+export class AppLifecycleEventPlugin extends PlatformPlugin {
+  type = PluginType.before;
+
+  configure(analytics: SegmentClient) {
+    this.analytics = analytics;
+  }
+  // Ensures all events have the platform property set to 'mobile', especially default Segment controlled events.'
+  execute(event: SegmentEvent): SegmentEvent {
+    if (event.type === EventType.TrackEvent || event.type === EventType.ScreenEvent) {
+      return { ...event, properties: { ...event.properties, platform: 'mobile' } };
+    }
+    return event;
+  }
+}

apps/mobile/src/utils/analytics.ts

@@ -1,5 +1,6 @@
 import { store } from '@/store';
 import { selectAnalyticsPreference } from '@/store/settings/settings.read';
+import { AppLifecycleEventPlugin } from '@/utils/analytics-plugins';
 import { SegmentClient, createClient } from '@segment/analytics-react-native';
 
 import { configureAnalyticsClient } from '@leather.io/analytics';
@@ -10,6 +11,8 @@ const segmentClient = createClient({
   debug: false,
 });
 
+segmentClient.add({ plugin: new AppLifecycleEventPlugin() });
+
 const leatherAnalyticsClient = configureAnalyticsClient<SegmentClient>({
   client: segmentClient,
   defaultProperties: {

packages/analytics/package.json

@@ -16,6 +16,8 @@
     "build:watch": "tsup --watch --onSuccess 'tsup --dts-only'",
     "format": "prettier . --write \"src/**/*.ts\" --ignore-path ../../.prettierignore",
     "format:check": "prettier . --check \"src/**/*.ts\" --ignore-path ../../.prettierignore",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   },
   "exports": {

packages/analytics/src/client.spec.ts

@@ -2,23 +2,27 @@
 import { AnalyticsClient } from './client';
 
 export const mockExternalAnalyticsClient = {
-  track: vi.fn().mockResolvedValue(undefined),
-  screen: vi.fn().mockResolvedValue(undefined),
-  group: vi.fn().mockResolvedValue(undefined),
-  identify: vi.fn().mockResolvedValue(undefined),
-  page: vi.fn().mockResolvedValue(undefined),
-  register: vi.fn().mockResolvedValue(undefined),
-  deregister: vi.fn().mockResolvedValue(undefined),
+  track: vi.fn(),
+  screen: vi.fn(),
+  group: vi.fn(),
+  identify: vi.fn(),
+  page: vi.fn(),
+  register: vi.fn(),
+  deregister: vi.fn(),
 };
 
 describe('AnalyticsClient', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
   it('should be able to track all events with default properties', async () => {
-    const analytics = AnalyticsClient(mockExternalAnalyticsClient, {
+    const analytics = AnalyticsClient({
+      client: mockExternalAnalyticsClient,
       defaultProperties: { platform: 'web' },
     });
 
     await analytics.track('background_analytics_schema_fail');
-    await analytics.client.screen('/home/screen', undefined);
+    await analytics.screen('/home/screen');
 
     expect(mockExternalAnalyticsClient.track).toHaveBeenCalledWith(
       'background_analytics_schema_fail',
@@ -33,12 +37,13 @@ describe('AnalyticsClient', () => {
   });
 
   it('should be able to track group and identify with default traits', async () => {
-    const analytics = AnalyticsClient(mockExternalAnalyticsClient, {
+    const analytics = AnalyticsClient({
+      client: mockExternalAnalyticsClient,
       defaultTraits: { user: 'test' },
     });
 
-    await analytics.client.identify('1df3_34j3');
-    await analytics.client.group('1df3_34j3');
+    await analytics.identify('1df3_34j3');
+    await analytics.group('1df3_34j3');
 
     expect(mockExternalAnalyticsClient.identify).toHaveBeenCalledWith('1df3_34j3', {
       user: 'test',
@@ -50,7 +55,8 @@ describe('AnalyticsClient', () => {
   });
 
   it('should enforce snake case for untyped track', async () => {
-    const client = AnalyticsClient(mockExternalAnalyticsClient, {
+    const client = AnalyticsClient({
+      client: mockExternalAnalyticsClient,
       defaultProperties: { platform: 'web' },
     });
 

packages/analytics/src/client.ts

@@ -1,26 +1,55 @@
 import { AnalyticsClientConfig, AnalyticsClientInterface, Events, JsonMap } from './types';
 
 export function AnalyticsClient<T extends AnalyticsClientInterface>(
-  analyticsClient: T,
-  options: Pick<AnalyticsClientConfig<T>, 'defaultProperties' | 'defaultTraits'>
+  config: AnalyticsClientConfig<T>
 ) {
+  const { client: analyticsClient, defaultProperties = {}, defaultTraits = {} } = config;
+
   return {
     async track<K extends keyof Events>(
       event: K,
       ...properties: undefined extends Events[K] ? [] : [param: Events[K]]
     ) {
-      return analyticsClient.track(event, { ...properties, ...options.defaultProperties });
+      return analyticsClient.track(event, { ...properties, ...defaultProperties });
     },
-    async untypedTrack(event: string, properties?: JsonMap) {
+
+    async untypedTrack(event: string, properties?: JsonMap | Record<string, unknown>) {
       if (event.match(/^[a-zA-Z0-9\s][a-zA-Z0-9\s]*$/)) {
         throw new Error('Event must be snake_case');
       }
-      return analyticsClient.track(event as any, { ...properties, ...options.defaultProperties });
+      return analyticsClient.track(event as any, {
+        ...properties,
+        ...defaultProperties,
+      });
+    },
+
+    async screen(name: string, properties?: JsonMap | Record<string, unknown>) {
+      return analyticsClient.screen(name, { ...properties, ...defaultProperties });
+    },
+
+    group(groupId: string, traits?: JsonMap | Record<string, unknown>) {
+      return analyticsClient.group(groupId, { ...traits, ...defaultTraits });
+    },
+
+    async identify(userId?: string, traits?: JsonMap | Record<string, unknown>) {
+      return await analyticsClient.identify(userId, {
+        ...traits,
+        ...defaultTraits,
+      });
+    },
+
+    page(category?: string, name?: string, properties?: JsonMap | Record<string, unknown>) {
+      if (typeof analyticsClient.page === 'function') {
+        return analyticsClient.page(category, name, {
+          ...properties,
+          ...defaultProperties,
+        });
+      }
+      return Promise.resolve();
+    },
+
+    get client() {
+      return analyticsClient;
     },
-    screen: analyticsClient.screen.bind(analyticsClient),
-    group: analyticsClient.group.bind(analyticsClient),
-    identify: analyticsClient.identify.bind(analyticsClient),
-    page: analyticsClient.page ? analyticsClient.page.bind(analyticsClient) : Promise.resolve(),
-    client: analyticsClient,
   };
 }

packages/analytics/src/index.ts

@@ -12,5 +12,5 @@ export function configureAnalyticsClient<T extends AnalyticsClientInterface>({
   defaultProperties: DefaultProperties;
   defaultTraits?: JsonMap;
 }) {
-  return AnalyticsClient<T>(client, { defaultProperties, defaultTraits });
+  return AnalyticsClient<T>({ client, defaultProperties, defaultTraits });
 }

packages/analytics/src/types.ts

@@ -10,7 +10,7 @@ export interface AnalyticsClientInterface {
   track: (event: string, ...args: any[]) => Promise<any>;
   group: (groupId: string, traits?: any, ...args: any[]) => Promise<any>;
   identify: (...args: any[]) => Promise<any>;
-  page?: (name: string, ...args: any[]) => Promise<any>;
+  page?: (category?: string, name?: string, ...args: any[]) => Promise<any>;
 }
 
 export interface AnalyticsClientConfig<T extends AnalyticsClientInterface> {