[PostHog] implement "wallet | session start | Pageview" event (#606)

* refactor(extension): add post hog client context

* feat(extension): add post hog experiments provider

* refactor(extension): move posthog client to posthog provider folder

* feat(extension): expose subscription to user tracking type changes

* fix(extension): posthog tests

* test(extension): add posthog client mock to broken test

* refactor(extension): create subject for userTrackingType

* refactor(extension): make postHogClientInstance static

* test(extension): fix userIdService test

* refactor(extension): move createInstance to PostHogClient

* feat(extension): integrate experiment with password and name component

* test(extension): fix broken tests

* refactor(extension): improve naming and types

* refactor(extension): move subscribeToDistinctIdUpdate to client constructor

* test(extension): fix test for AnalyticsTracker

* refactor(extension): remove comment and use Pick instead Partial

* refactor(extension): remove local variant update

* refactor(extension): load experiments on agree click

* fix(extension): run experiment only for opted in user

* test(extension): fix tests

* feat(extension): postHog send start session event

* fix(extension): check for cache on get variant call

* fix(extension): address issue with analytics agree event

* fix(extension): update userTrackingType on wallet base ID generation

* feat(extension): postHog send start session event

* feat(extension): logging start session PostHog

* feat(extension): loggin start session posthog

* feat(extension): send session start fix tests

* feat(extension): post-hog-start-session LW-8343

* feat(extension): fix teset

* feat(extension): fixing test

* feat(extension): posthog fix test

* feat(extension): fix-signing previous commits

* Merge branch 'main' into feature/LW-8343-posthog-start-session-event

---------

Co-authored-by: JP Lorek <juan.lorek@globant.com>
Co-authored-by: jplorek-atix <65184652+jplorek-atix@users.noreply.github.com>

Author: tommayeliog

apps/browser-extension-wallet/src/lib/scripts/background/config.ts

@@ -48,5 +48,6 @@ export const userIdServiceProperties: RemoteApiProperties<UserIdServiceInterface
   getRandomizedUserId: RemoteApiPropertyType.MethodReturningPromise,
   getUserId: RemoteApiPropertyType.MethodReturningPromise,
   userTrackingType$: RemoteApiPropertyType.HotObservable,
+  isNewSession: RemoteApiPropertyType.MethodReturningPromise,
   resetToDefaultValues: RemoteApiPropertyType.MethodReturningPromise
 };

apps/browser-extension-wallet/src/lib/scripts/background/services/userIdService.test.ts

@@ -7,13 +7,27 @@ import { UserTrackingType } from '@providers/AnalyticsProvider/analyticsTracker'
 const mockWalletBasedId =
   '15d632f6b0ab82c72a194d634d8783ea0ef5419c8a8f638cb0c3fc49280e0a0285fc88fbfad04554779d19bec4ab30e5afee2f9ee736ba090c2213d98fe3a475';
 
+const mockedStorage = { state: {} };
 const generateStorageMocks = (
-  store: Pick<BackgroundStorage, 'usePersistentUserId' | 'userId' | 'keyAgentsByChain'> = {}
-) => ({
-  getStorageMock: jest.fn(() => Promise.resolve(store)),
-  setStorageMock: jest.fn(),
-  clearStorageMock: jest.fn()
-});
+  state: Pick<BackgroundStorage, 'usePersistentUserId' | 'userId' | 'keyAgentsByChain'> = {}
+) => {
+  mockedStorage.state = { ...state };
+  return {
+    getStorageMock: jest.fn(() => Promise.resolve(mockedStorage.state)),
+    // setStorageMock: jest.fn(),
+    setStorageMock: jest.fn((newState) => {
+      mockedStorage.state = {
+        ...mockedStorage.state,
+        ...newState
+      };
+      return Promise.resolve();
+    }),
+    clearStorageMock: jest.fn(() => {
+      mockedStorage.state = {};
+      return Promise.resolve();
+    })
+  };
+};
 
 describe('userIdService', () => {
   describe('restoring persistent user id', () => {
@@ -55,10 +69,9 @@ describe('userIdService', () => {
         userId: 'test'
       };
       const { getStorageMock, setStorageMock } = generateStorageMocks(store);
-
       const userIdService = new UserIdService(getStorageMock, setStorageMock);
+      await userIdService.init();
       await userIdService.makeTemporary();
-
       expect(setStorageMock).toHaveBeenCalledWith({
         usePersistentUserId: false,
         userId: undefined
@@ -83,6 +96,7 @@ describe('userIdService', () => {
       const { getStorageMock, setStorageMock } = generateStorageMocks(store);
 
       const userIdService = new UserIdService(getStorageMock, setStorageMock);
+      await userIdService.init();
       await userIdService.makeTemporary();
 
       // simulate an almost session timeout

apps/browser-extension-wallet/src/lib/scripts/background/services/userIdService.ts

@@ -25,6 +25,7 @@ export class UserIdService implements UserIdServiceInterface {
   private sessionTimeout?: NodeJS.Timeout;
   private userIdRestored = false;
   public userTrackingType$ = new BehaviorSubject<UserTrackingType>(UserTrackingType.Basic);
+  private hasNewSessionStarted = false;
 
   constructor(
     private getStorage: typeof getBackgroundStorage = getBackgroundStorage,
@@ -33,6 +34,18 @@ export class UserIdService implements UserIdServiceInterface {
     private sessionLength: number = SESSION_LENGTH
   ) {}
 
+  async init(): Promise<void> {
+    if (!this.userIdRestored) {
+      console.debug('[ANALYTICS] Restoring user ID...');
+      await this.restoreUserId();
+    }
+
+    if (!this.randomizedUserId) {
+      console.debug('[ANALYTICS] User ID not found - generating new one');
+      this.randomizedUserId = randomBytes(USER_ID_BYTE_SIZE).toString('hex');
+    }
+  }
+
   private async getWalletBasedUserId(networkMagic: Wallet.Cardano.NetworkMagic): Promise<string | undefined> {
     const { keyAgentsByChain, usePersistentUserId } = await this.getStorage();
 
@@ -59,16 +72,9 @@ export class UserIdService implements UserIdServiceInterface {
     return this.walletBasedUserId;
   }
 
+  // TODO: make this method private when Motamo is not longer in use
   async getRandomizedUserId(): Promise<string> {
-    if (!this.userIdRestored) {
-      console.debug('[ANALYTICS] Restoring user ID...');
-      await this.restoreUserId();
-    }
-
-    if (!this.randomizedUserId) {
-      console.debug('[ANALYTICS] User ID not found - generating new one');
-      this.randomizedUserId = randomBytes(USER_ID_BYTE_SIZE).toString('hex');
-    }
+    await this.init();
 
     console.debug(`[ANALYTICS] getId() called (current ID: ${this.randomizedUserId})`);
     return this.randomizedUserId;
@@ -104,12 +110,14 @@ export class UserIdService implements UserIdServiceInterface {
     this.walletBasedUserId = undefined;
     this.userTrackingType$.next(UserTrackingType.Basic);
     this.clearSessionTimeout();
+    this.hasNewSessionStarted = false;
     await this.clearStorage({ keys: ['userId', 'usePersistentUserId'] });
   }
 
   async makePersistent(): Promise<void> {
     console.debug('[ANALYTICS] Converting user ID into persistent');
     this.clearSessionTimeout();
+    this.setSessionTimeout();
     const userId = await this.getRandomizedUserId();
     await this.setStorage({ usePersistentUserId: true, userId });
     this.userTrackingType$.next(UserTrackingType.Enhanced);
@@ -123,9 +131,6 @@ export class UserIdService implements UserIdServiceInterface {
   }
 
   async extendLifespan(): Promise<void> {
-    if (!this.sessionTimeout) {
-      return;
-    }
     console.debug('[ANALYTICS] Extending temporary ID lifespan');
     this.clearSessionTimeout();
     this.setSessionTimeout();
@@ -151,8 +156,10 @@ export class UserIdService implements UserIdServiceInterface {
       return;
     }
     this.sessionTimeout = setTimeout(() => {
-      this.randomizedUserId = undefined;
-      console.debug('[ANALYTICS] Session timed out');
+      if (this.userTrackingType$.value === UserTrackingType.Basic) {
+        this.randomizedUserId = undefined;
+      }
+      this.hasNewSessionStarted = false;
     }, this.sessionLength);
   }
 
@@ -167,6 +174,12 @@ export class UserIdService implements UserIdServiceInterface {
     const hash = hashExtendedAccountPublicKey(extendedAccountPublicKey);
     return hashExtendedAccountPublicKey(hash);
   }
+
+  async isNewSession(): Promise<boolean> {
+    const isNewSession = !this.hasNewSessionStarted;
+    this.hasNewSessionStarted = true;
+    return isNewSession;
+  }
 }
 
 const userIdService = new UserIdService();

apps/browser-extension-wallet/src/lib/scripts/types/userIdService.ts

@@ -13,4 +13,5 @@ export interface UserIdService {
   extendLifespan(): Promise<void>;
   resetToDefaultValues(): Promise<void>;
   userTrackingType$: BehaviorSubject<UserTrackingType>;
+  isNewSession(): Promise<boolean>;
 }

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/AnalyticsTracker.test.ts

@@ -157,6 +157,20 @@ describe('AnalyticsTracker', () => {
     });
   });
 
+  describe('posthog sendSessionStartEvent', () => {
+    it('should send start session event', async () => {
+      const tracker = new AnalyticsTracker({
+        chain: preprodChain,
+        postHogClient: getPostHogClient()
+      });
+      const mockedPostHogClient = (PostHogClient as any).mock.instances[0];
+      const event = PostHogAction.OnboardingCreateClick;
+      await tracker.sendEventToPostHog(event);
+      expect(mockedPostHogClient.sendSessionStartEvent).toHaveBeenCalled();
+      expect(mockedPostHogClient.sendEvent).toHaveBeenCalledWith(event, {});
+    });
+  });
+
   describe('excluded events', () => {
     it('should ommit sending onboarding | new wallet events', async () => {
       const tracker = new AnalyticsTracker({

apps/browser-extension-wallet/src/providers/AnalyticsProvider/analyticsTracker/AnalyticsTracker.ts

@@ -61,31 +61,46 @@ export class AnalyticsTracker implements IAnalyticsTracker {
     }
   }
 
+  private async checkNewSessionStarted(): Promise<void> {
+    if (!this.postHogClient) {
+      console.debug('[ANALYTICS] no posthog client');
+      return;
+    }
+    if (await this.userIdService.isNewSession()) {
+      await this.postHogClient.sendSessionStartEvent();
+    }
+  }
+
   async sendPageNavigationEvent(): Promise<void> {
     const shouldOmitEvent = this.shouldOmitSendEventToPostHog();
     if (shouldOmitEvent) return;
+    await this.userIdService?.extendLifespan();
+    await this.checkNewSessionStarted();
     await this.postHogClient?.sendPageNavigationEvent();
   }
 
   async sendAliasEvent(): Promise<void> {
     const shouldOmitEvent = this.shouldOmitSendEventToPostHog();
     if (shouldOmitEvent) return;
+    await this.userIdService?.extendLifespan();
+    await this.checkNewSessionStarted();
     await this.postHogClient?.sendAliasEvent();
   }
 
   async sendEventToMatomo(props: MatomoSendEventProps): Promise<void> {
     const isOptedOutUser = this.userTrackingType === UserTrackingType.Basic;
     if (MATOMO_OPTED_OUT_EVENTS_DISABLED && isOptedOutUser) return;
-    await this.matomoClient?.sendEvent(props);
     await this.userIdService?.extendLifespan();
+    await this.matomoClient?.sendEvent(props);
   }
 
   async sendEventToPostHog(action: PostHogAction, properties: PostHogProperties = {}): Promise<void> {
     const isEventExcluded = this.isEventExcluded(action);
     const shouldOmitEvent = this.shouldOmitSendEventToPostHog();
     if (shouldOmitEvent || isEventExcluded) return;
-    await this.postHogClient?.sendEvent(action, properties);
     await this.userIdService?.extendLifespan();
+    await this.checkNewSessionStarted();
+    await this.postHogClient?.sendEvent(action, properties);
   }
 
   setChain(chain: Wallet.Cardano.ChainId): void {

apps/browser-extension-wallet/src/providers/AnalyticsProvider/context.tsx

@@ -61,9 +61,10 @@ export const AnalyticsProvider = ({
   // Track page changes with PostHog in order to keep the user session alive
   useEffect(() => {
     const trackActivePageChange = debounce(() => analyticsTracker.sendPageNavigationEvent(), PAGE_VIEW_DEBOUNCE_DELAY);
-
+    window.addEventListener('load', trackActivePageChange);
     window.addEventListener('popstate', trackActivePageChange);
     return () => {
+      window.removeEventListener('load', trackActivePageChange);
       window.removeEventListener('popstate', trackActivePageChange);
     };
   }, [analyticsTracker]);

apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.test.ts

@@ -56,6 +56,19 @@ describe('PostHogClient', () => {
     );
   });
 
+  it('should send session started event', async () => {
+    const client = new PostHogClient(chain, mockUserIdService, mockBackgroundStorageUtil, undefined, publicPosthogHost);
+    await client.sendSessionStartEvent();
+    expect(posthog.capture).toHaveBeenCalledWith(
+      PostHogAction.WalletSessionStartPageview,
+      expect.objectContaining({
+        // eslint-disable-next-line camelcase
+        distinct_id: userId,
+        view: 'extended'
+      })
+    );
+  });
+
   it('should send events with distinct id', async () => {
     const client = new PostHogClient(chain, mockUserIdService, mockBackgroundStorageUtil, undefined, publicPosthogHost);
     const event = PostHogAction.OnboardingCreateClick;

apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.ts

@@ -120,6 +120,13 @@ export class PostHogClient {
     });
   }
 
+  async sendSessionStartEvent(): Promise<void> {
+    console.debug('[ANALYTICS] Logging Session Start Event');
+    posthog.capture(String(PostHogAction.WalletSessionStartPageview), {
+      ...(await this.getEventMetadata())
+    });
+  }
+
   async sendPageNavigationEvent(): Promise<void> {
     console.debug('[ANALYTICS] Logging page navigation event to PostHog');
 

apps/browser-extension-wallet/src/utils/mocks/test-helpers.tsx

@@ -604,8 +604,9 @@ export const userIdServiceMock: Record<keyof UserIdService, jest.Mock> = {
   getRandomizedUserId: jest.fn(),
   getUserId: jest.fn(),
   getAliasProperties: jest.fn(),
-  resetToDefaultValues: jest.fn(),
-  userTrackingType$: new Subject() as any
+  userTrackingType$: new Subject() as any,
+  isNewSession: jest.fn(() => true),
+  resetToDefaultValues: jest.fn()
 };
 
 export const matomoClientMocks: Record<keyof typeof MatomoClient.prototype, jest.Mock> = {
@@ -624,7 +625,8 @@ export const postHogClientMocks: Record<keyof typeof PostHogClient.prototype, je
   overrideFeatureFlags: jest.fn(),
   getExperimentVariant: jest.fn(),
   subscribeToDistinctIdUpdate: jest.fn(),
-  shutdown: jest.fn()
+  shutdown: jest.fn(),
+  sendSessionStartEvent: jest.fn()
 };
 
 export const mockAnalyticsTracker: Record<keyof typeof AnalyticsTracker.prototype, jest.Mock> = {