More posthog tracking around joining rooms and room search (#7807)

src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx

@@ -104,7 +104,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
                 dis.dispatch<ViewRoomPayload>({
                     action: Action.ViewRoom,
                     room_id: result.room_id,
-                    _trigger: undefined, // Deprecated groups
+                    metricsTrigger: undefined, // Deprecated groups
                 });
                 showCommunityRoomInviteDialog(result.room_id, this.state.name);
             } else {

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -230,7 +230,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
                 dis.dispatch<ViewRoomPayload>({
                     action: Action.ViewRoom,
                     room_id: roomId,
-                    _trigger: undefined, // other
+                    metricsTrigger: undefined, // other
                 });
             };
 

src/components/views/dialogs/ForwardDialog.tsx

@@ -81,8 +81,8 @@ const Entry: React.FC<IEntryProps> = ({ room, event, matrixClient: cli, onFinish
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             room_id: room.roomId,
-            _trigger: "WebForwardShortcut",
-            _viaKeyboard: ev.type !== "click",
+            metricsTrigger: "WebForwardShortcut",
+            metricsViaKeyboard: ev.type !== "click",
         });
         onFinished(true);
     };

src/components/views/dialogs/InviteDialog.tsx

@@ -682,7 +682,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                 room_id: existingRoom.roomId,
                 should_peek: false,
                 joining: false,
-                _trigger: "MessageUser",
+                metricsTrigger: "MessageUser",
             });
             this.props.onFinished(true);
             return;

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -94,6 +94,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
             _td("General"),
             "mx_RoomSettingsDialog_settingsIcon",
             <GeneralRoomSettingsTab roomId={this.props.roomId} />,
+            "RoomSettingsGeneral",
         ));
         tabs.push(new Tab(
             ROOM_SECURITY_TAB,
@@ -103,18 +104,21 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
                 roomId={this.props.roomId}
                 closeSettingsFn={() => this.props.onFinished(true)}
             />,
+            "RoomSettingsSecurityPrivacy",
         ));
         tabs.push(new Tab(
             ROOM_ROLES_TAB,
             _td("Roles & Permissions"),
             "mx_RoomSettingsDialog_rolesIcon",
             <RolesRoomSettingsTab roomId={this.props.roomId} />,
+            "RoomSettingsRolesPermissions",
         ));
         tabs.push(new Tab(
             ROOM_NOTIFICATIONS_TAB,
             _td("Notifications"),
             "mx_RoomSettingsDialog_notificationsIcon",
             <NotificationSettingsTab roomId={this.props.roomId} closeSettingsFn={() => this.props.onFinished(true)} />,
+            "RoomSettingsNotifications",
         ));
 
         if (SettingsStore.getValue("feature_bridge_state")) {
@@ -123,6 +127,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
                 _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
+                "RoomSettingsBridges",
             ));
         }
 
@@ -135,6 +140,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
                     roomId={this.props.roomId}
                     closeSettingsFn={() => this.props.onFinished(true)}
                 />,
+                "RoomSettingsAdvanced",
             ));
         }
 

src/components/views/dialogs/SpotlightDialog.tsx

@@ -30,6 +30,7 @@ import { normalize } from "matrix-js-sdk/src/utils";
 import { IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces";
 import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
+import { WebSearch as WebSearchEvent } from "matrix-analytics-events/types/typescript/WebSearch";
 
 import { IDialogProps } from "./IDialogProps";
 import { _t } from "../../../languageHandler";
@@ -72,6 +73,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { getMetaSpaceName } from "../../../stores/spaces";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { PosthogAnalytics } from "../../../PosthogAnalytics";
 import { getCachedRoomIDForAlias } from "../../../RoomAliasCache";
 
 const MAX_RECENT_SEARCHES = 10;
@@ -205,6 +207,26 @@ type Result = IRoomResult | IResult;
 
 const isRoomResult = (result: any): result is IRoomResult => !!result?.room;
 
+export const useWebSearchMetrics = (numResults: number, queryLength: number, viaSpotlight: boolean): void => {
+    useEffect(() => {
+        if (!queryLength) return;
+
+        // send metrics after a 1s debounce
+        const timeoutId = setTimeout(() => {
+            PosthogAnalytics.instance.trackEvent<WebSearchEvent>({
+                eventName: "WebSearch",
+                viaSpotlight,
+                numResults,
+                queryLength,
+            });
+        }, 1000);
+
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [numResults, queryLength, viaSpotlight]);
+};
+
 const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) => {
     const cli = MatrixClientPeg.get();
     const rovingContext = useContext(RovingTabIndexContext);
@@ -270,6 +292,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
         return results;
     }, [possibleResults, trimmedQuery]);
 
+    const numResults = trimmedQuery ? people.length + rooms.length + spaces.length : 0;
+    useWebSearchMetrics(numResults, query.length, true);
+
     const activeSpace = SpaceStore.instance.activeSpaceRoom;
     const [spaceResults, spaceResultsLoading] = useSpaceResults(activeSpace, query);
 
@@ -310,8 +335,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
         defaultDispatcher.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             room_id: roomId,
-            _trigger: "WebUnifiedSearch",
-            _viaKeyboard: viaKeyboard,
+            metricsTrigger: "WebUnifiedSearch",
+            metricsViaKeyboard: viaKeyboard,
         });
         onFinished();
     };
@@ -429,8 +454,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
                                 action: Action.ViewRoom,
                                 room_alias: trimmedQuery,
                                 auto_join: true,
-                                _trigger: "WebUnifiedSearch",
-                                _viaKeyboard: ev.type !== "click",
+                                metricsTrigger: "WebUnifiedSearch",
+                                metricsViaKeyboard: ev.type !== "click",
                             });
                             onFinished();
                         }}
@@ -670,6 +695,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", onFinished }) =>
             onFinished={onFinished}
             hasCancel={false}
             onKeyDown={onDialogKeyDown}
+            screenName="UnifiedSearch"
         >
             <div className="mx_SpotlightDialog_searchBox mx_textinput">
                 <input

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -199,7 +199,11 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
                 title={_t("Settings")}
             >
                 <div className='mx_SettingsDialog_content'>
-                    <TabbedView tabs={this.getTabs()} initialTabId={this.props.initialTabId} />
+                    <TabbedView
+                        tabs={this.getTabs()}
+                        initialTabId={this.props.initialTabId}
+                        screenName="UserSettings"
+                    />
                 </div>
             </BaseDialog>
         );