Wire up more Posthog tracking (#7689)

src/components/structures/LoggedInView.tsx

@@ -630,10 +630,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                 pageElement = <MyGroups />;
                 break;
 
-            case PageTypes.RoomDirectory:
-                // handled by MatrixChat for now
-                break;
-
             case PageTypes.HomePage:
                 pageElement = <HomePage justRegistered={this.props.justRegistered} />;
                 break;

src/components/structures/MatrixChat.tsx

@@ -20,7 +20,6 @@ import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
 import { MatrixError } from 'matrix-js-sdk/src/http-api';
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { Screen as ScreenEvent } from "matrix-analytics-events/types/typescript/Screen";
 import { defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 import { throttle } from "lodash";
@@ -30,6 +29,7 @@ import 'focus-visible';
 // what-input helps improve keyboard accessibility
 import 'what-input';
 
+import PosthogTrackers from '../../PosthogTrackers';
 import Analytics from "../../Analytics";
 import CountlyAnalytics from "../../CountlyAnalytics";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
@@ -118,39 +118,10 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import { ActionPayload } from "../../dispatcher/payloads";
 import { SummarizedNotificationState } from "../../stores/notifications/SummarizedNotificationState";
 import GenericToast from '../views/toasts/GenericToast';
+import Views from '../../Views';
 
-/** constants for MatrixChat.state.view */
-export enum Views {
-    // a special initial state which is only used at startup, while we are
-    // trying to re-animate a matrix client or register as a guest.
-    LOADING,
-
-    // we are showing the welcome view
-    WELCOME,
-
-    // we are showing the login view
-    LOGIN,
-
-    // we are showing the registration view
-    REGISTER,
-
-    // showing the 'forgot password' view
-    FORGOT_PASSWORD,
-
-    // showing flow to trust this new device with cross-signing
-    COMPLETE_SECURITY,
-
-    // flow to setup SSSS / cross-signing on this account
-    E2E_SETUP,
-
-    // we are logged in with an active matrix client. The logged_in state also
-    // includes guests users as they too are logged in at the client level.
-    LOGGED_IN,
-
-    // We are logged out (invalid token) but have our local state again. The user
-    // should log back in to rehydrate the client.
-    SOFT_LOGOUT,
-}
+// legacy export
+export { default as Views } from "../../Views";
 
 const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas", "welcome"];
 
@@ -455,7 +426,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             const durationMs = this.stopPageChangeTimer();
             Analytics.trackPageChange(durationMs);
             CountlyAnalytics.instance.trackPageChange(durationMs);
-            this.trackScreenChange(durationMs);
+            PosthogTrackers.instance.trackPageChange(this.state.view, this.state.page_type, durationMs);
         }
         if (this.focusComposer) {
             dis.fire(Action.FocusSendMessageComposer);
@@ -475,36 +446,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
     }
 
-    public trackScreenChange(durationMs: number): void {
-        const notLoggedInMap: Partial<Record<Views, ScreenEvent["screenName"]>> = {};
-        notLoggedInMap[Views.LOADING] = "WebLoading";
-        notLoggedInMap[Views.WELCOME] = "Welcome";
-        notLoggedInMap[Views.LOGIN] = "Login";
-        notLoggedInMap[Views.REGISTER] = "Register";
-        notLoggedInMap[Views.FORGOT_PASSWORD] = "ForgotPassword";
-        notLoggedInMap[Views.COMPLETE_SECURITY] = "WebCompleteSecurity";
-        notLoggedInMap[Views.E2E_SETUP] = "WebE2ESetup";
-        notLoggedInMap[Views.SOFT_LOGOUT] = "WebSoftLogout";
-
-        const loggedInPageTypeMap: Partial<Record<PageType, ScreenEvent["screenName"]>> = {};
-        loggedInPageTypeMap[PageType.HomePage] = "Home";
-        loggedInPageTypeMap[PageType.RoomView] = "Room";
-        loggedInPageTypeMap[PageType.RoomDirectory] = "RoomDirectory";
-        loggedInPageTypeMap[PageType.UserView] = "User";
-        loggedInPageTypeMap[PageType.GroupView] = "Group";
-        loggedInPageTypeMap[PageType.MyGroups] = "MyGroups";
-
-        const screenName = this.state.view === Views.LOGGED_IN ?
-            loggedInPageTypeMap[this.state.page_type] :
-            notLoggedInMap[this.state.view];
-
-        return PosthogAnalytics.instance.trackEvent<ScreenEvent>({
-            eventName: "$screen",
-            screenName,
-            durationMs,
-        });
-    }
-
     private onWindowResized = (): void => {
         // XXX: This is a very unreliable way to detect whether or not the the devtools are open
         this.warnInConsole();

src/components/structures/RoomDirectory.tsx

@@ -811,6 +811,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
                 hasCancel={true}
                 onFinished={this.onFinished}
                 title={title}
+                screenName="RoomDirectory"
             >
                 <div className="mx_RoomDirectory">
                     { explanation }

src/components/structures/TabbedView.tsx

@@ -24,6 +24,7 @@ import { _t } from '../../languageHandler';
 import AutoHideScrollbar from './AutoHideScrollbar';
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import AccessibleButton from "../views/elements/AccessibleButton";
+import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
 
 /**
  * Represents a tab for the TabbedView.
@@ -35,9 +36,15 @@ export class Tab {
      * @param {string} label The untranslated tab label.
      * @param {string} icon The class for the tab icon. This should be a simple mask.
      * @param {React.ReactNode} body The JSX for the tab container.
+     * @param {string} screenName The screen name to report to Posthog.
      */
-    constructor(public id: string, public label: string, public icon: string, public body: React.ReactNode) {
-    }
+    constructor(
+        public readonly id: string,
+        public readonly label: string,
+        public readonly icon: string,
+        public readonly body: React.ReactNode,
+        public readonly screenName?: ScreenName,
+    ) {}
 }
 
 export enum TabLocation {
@@ -50,6 +57,7 @@ interface IProps {
     initialTabId?: string;
     tabLocation: TabLocation;
     onChange?: (tabId: string) => void;
+    screenName?: ScreenName;
 }
 
 interface IState {
@@ -132,7 +140,8 @@ export default class TabbedView extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         const labels = this.props.tabs.map(tab => this.renderTabLabel(tab));
-        const panel = this.renderTabPanel(this.props.tabs[this.getActiveTabIndex()]);
+        const tab = this.props.tabs[this.getActiveTabIndex()];
+        const panel = this.renderTabPanel(tab);
 
         const tabbedViewClasses = classNames({
             'mx_TabbedView': true,
@@ -142,6 +151,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
 
         return (
             <div className={tabbedViewClasses}>
+                <PosthogScreenTracker screenName={tab?.screenName ?? this.props.screenName} />
                 <div className="mx_TabbedView_tabLabels">
                     { labels }
                 </div>