Wire up more Posthog tracking

package.json

@@ -91,7 +91,7 @@
     "linkifyjs": "^4.0.0-beta.4",
     "lodash": "^4.17.20",
     "maplibre-gl": "^1.15.2",
-    "matrix-analytics-events": "github:matrix-org/matrix-analytics-events.git#53844e3f6f9fefa88384a996b2bf5e60bb301b94",
+    "matrix-analytics-events": "github:matrix-org/matrix-analytics-events.git#035d02303996c1fa7119bd8a09f2e00db9a4c648",
     "matrix-events-sdk": "^0.0.1-beta.6",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^0.1.0-beta.18",

src/PageTypes.ts

@@ -19,7 +19,6 @@ limitations under the License.
 enum PageType {
     HomePage = "home_page",
     RoomView = "room_view",
-    RoomDirectory = "room_directory",
     UserView = "user_view",
     GroupView = "group_view",
     MyGroups = "my_groups",

src/PosthogTrackers.ts

@@ -0,0 +1,110 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { PureComponent } from "react";
+import { Screen as ScreenEvent } from "matrix-analytics-events/types/typescript/Screen";
+
+import PageType from "./PageTypes";
+import Views from "./Views";
+import { PosthogAnalytics } from "./PosthogAnalytics";
+
+export type ScreenName = ScreenEvent["screenName"];
+
+const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
+    [Views.LOADING]: "WebLoading",
+    [Views.WELCOME]: "Welcome",
+    [Views.LOGIN]: "Login",
+    [Views.REGISTER]: "Register",
+    [Views.FORGOT_PASSWORD]: "ForgotPassword",
+    [Views.COMPLETE_SECURITY]: "WebCompleteSecurity",
+    [Views.E2E_SETUP]: "WebE2ESetup",
+    [Views.SOFT_LOGOUT]: "WebSoftLogout",
+};
+
+const loggedInPageTypeMap: Record<PageType, ScreenName> = {
+    [PageType.HomePage]: "Home",
+    [PageType.RoomView]: "Room",
+    [PageType.UserView]: "User",
+    [PageType.GroupView]: "Group",
+    [PageType.MyGroups]: "MyGroups",
+};
+
+export default class PosthogTrackers {
+    private static internalInstance: PosthogTrackers;
+
+    public static get instance(): PosthogTrackers {
+        if (!PosthogTrackers.internalInstance) {
+            PosthogTrackers.internalInstance = new PosthogTrackers();
+        }
+        return PosthogTrackers.internalInstance;
+    }
+
+    private view: Views = Views.LOADING;
+    private pageType?: PageType = null;
+    private override?: ScreenName = null;
+
+    public trackPageChange(view: Views, pageType: PageType | undefined, durationMs: number): void {
+        this.view = view;
+        this.pageType = pageType;
+        if (this.override) return;
+        this.trackPage(durationMs);
+    }
+
+    private trackPage(durationMs?: number): void {
+        const screenName = this.view === Views.LOGGED_IN
+            ? loggedInPageTypeMap[this.pageType]
+            : notLoggedInMap[this.view];
+        PosthogAnalytics.instance.trackEvent<ScreenEvent>({
+            eventName: "$screen",
+            screenName,
+            durationMs,
+        });
+    }
+
+    public trackOverride(screenName: ScreenName): void {
+        if (!screenName) return;
+        this.override = screenName;
+        PosthogAnalytics.instance.trackEvent<ScreenEvent>({
+            eventName: "$screen",
+            screenName,
+        });
+    }
+
+    public clearOverride(screenName: ScreenName): void {
+        if (screenName !== this.override) return;
+        this.override = null;
+        this.trackPage();
+    }
+}
+
+export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName }> {
+    componentDidMount() {
+        PosthogTrackers.instance.trackOverride(this.props.screenName);
+    }
+
+    componentDidUpdate() {
+        // We do not clear the old override here so that we do not send the non-override screen as a transition
+        PosthogTrackers.instance.trackOverride(this.props.screenName);
+    }
+
+    componentWillUnmount() {
+        PosthogTrackers.instance.clearOverride(this.props.screenName);
+    }
+
+    render() {
+        return null; // no need to render anything, we just need to hook into the React lifecycle
+    }
+}

src/Views.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/** constants for MatrixChat.state.view */
+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,
+}
+
+export default Views;

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>

src/components/views/dialogs/BaseDialog.tsx

@@ -29,6 +29,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import Heading from '../typography/Heading';
 import { IDialogProps } from "./IDialogProps";
+import { PosthogScreenTracker, ScreenName } from "../../../PosthogTrackers";
 
 interface IProps extends IDialogProps {
     // Whether the dialog should have a 'close' button that will
@@ -66,6 +67,9 @@ interface IProps extends IDialogProps {
     titleClass?: string | string[];
 
     headerButton?: JSX.Element;
+
+    // optional Posthog ScreenName to supply during the lifetime of this dialog
+    screenName?: ScreenName;
 }
 
 /*
@@ -119,6 +123,7 @@ export default class BaseDialog extends React.Component<IProps> {
 
         return (
             <MatrixClientContext.Provider value={this.matrixClient}>
+                <PosthogScreenTracker screenName={this.props.screenName} />
                 <FocusLock
                     returnFocus={true}
                     lockProps={{

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -326,7 +326,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         }
 
         return (
-            <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished} title={title}>
+            <BaseDialog
+                className="mx_CreateRoomDialog"
+                onFinished={this.props.onFinished}
+                title={title}
+                screenName="CreateRoom"
+            >
                 <form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
                     <div className="mx_Dialog_content">
                         <Field