Wire up more posthog properties and interactions (#7763)

src/PosthogTrackers.ts

@@ -91,7 +91,7 @@ export default class PosthogTrackers {
         this.trackPage();
     }
 
-    public static trackInteraction(name: InteractionName, ev?: SyntheticEvent): void {
+    public static trackInteraction(name: InteractionName, ev?: SyntheticEvent, index?: number): void {
         let interactionType: InteractionEvent["interactionType"];
         if (ev?.type === "click") {
             interactionType = "Pointer";
@@ -102,6 +102,7 @@ export default class PosthogTrackers {
         PosthogAnalytics.instance.trackEvent<InteractionEvent>({
             eventName: "Interaction",
             interactionType,
+            index,
             name,
         });
     }

src/components/structures/UserMenu.tsx

@@ -60,6 +60,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedPayload";
 import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
+import PosthogTrackers from "../../PosthogTrackers";
 
 const CustomStatusSection = () => {
     const cli = useContext(MatrixClientContext);
@@ -298,6 +299,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
 
+        PosthogTrackers.trackInteraction("WebUserMenuThemeToggleButton", ev);
+
         // Disable system theme matching if the user hits this button
         SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
 

src/components/views/settings/ThemeChoicePanel.tsx

@@ -30,6 +30,7 @@ import Field from '../elements/Field';
 import StyledRadioGroup from "../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import PosthogTrackers from "../../../PosthogTrackers";
 
 interface IProps {
 }
@@ -99,6 +100,8 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
     private onThemeChange = (newTheme: string): void => {
         if (this.state.theme === newTheme) return;
 
+        PosthogTrackers.trackInteraction("WebSettingsAppearanceTabThemeSelector");
+
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -22,13 +22,25 @@ import { SettingLevel } from "../../../../../settings/SettingLevel";
 import StyledCheckbox from "../../../elements/StyledCheckbox";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { MetaSpace } from "../../../../../stores/spaces";
+import PosthogTrackers from "../../../../../PosthogTrackers";
 
-export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
+type InteractionName = "WebSettingsSidebarTabSpacesCheckbox" | "WebQuickSettingsPinToSidebarCheckbox";
+
+export const onMetaSpaceChangeFactory = (
+    metaSpace: MetaSpace,
+    interactionName: InteractionName,
+) => (e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
     SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.ACCOUNT, {
         ...currentValue,
         [metaSpace]: e.target.checked,
     });
+
+    PosthogTrackers.trackInteraction(
+        interactionName,
+        e,
+        [MetaSpace.Home, null, MetaSpace.Favourites, MetaSpace.People, MetaSpace.Orphans].indexOf(metaSpace),
+    );
 };
 
 const SidebarUserSettingsTab = () => {
@@ -53,7 +65,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!homeEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Home)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.Home, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_homeCheckbox"
                     disabled={homeEnabled}
                 >
@@ -73,6 +85,7 @@ const SidebarUserSettingsTab = () => {
                             SettingLevel.ACCOUNT,
                             e.target.checked,
                         );
+                        PosthogTrackers.trackInteraction("WebSettingsSidebarTabSpacesCheckbox", e, 1);
                     }}
                     className="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
@@ -84,7 +97,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!favouritesEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_favouritesCheckbox"
                 >
                     { _t("Favourites") }
@@ -95,7 +108,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!peopleEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.People)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_peopleCheckbox"
                 >
                     { _t("People") }
@@ -106,7 +119,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!orphansEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Orphans)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.Orphans, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_orphansCheckbox"
                 >
                     { _t("Rooms outside of a space") }

src/components/views/spaces/QuickSettingsButton.tsx

@@ -35,6 +35,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import dis from "../../../dispatcher/dispatcher";
 import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload";
+import PosthogTrackers from "../../../PosthogTrackers";
 
 const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
     const orderedThemes = useMemo(getOrderedThemes, []);
@@ -75,14 +76,14 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
             <StyledCheckbox
                 className="mx_QuickSettingsButton_favouritesCheckbox"
                 checked={!!favouritesEnabled}
-                onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites)}
+                onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebQuickSettingsPinToSidebarCheckbox")}
             >
                 { _t("Favourites") }
             </StyledCheckbox>
             <StyledCheckbox
                 className="mx_QuickSettingsButton_peopleCheckbox"
                 checked={!!peopleEnabled}
-                onChange={onMetaSpaceChangeFactory(MetaSpace.People)}
+                onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebQuickSettingsPinToSidebarCheckbox")}
             >
                 { _t("People") }
             </StyledCheckbox>
@@ -104,6 +105,8 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
                 <Dropdown
                     id="mx_QuickSettingsButton_themePickerDropdown"
                     onOptionChange={async (newTheme: string) => {
+                        PosthogTrackers.trackInteraction("WebQuickSettingsThemeDropdown");
+
                         // XXX: mostly copied from ThemeChoicePanel
                         // doing getValue in the .catch will still return the value we failed to set,
                         // so remember what the value was before we tried to set it so we can revert

src/stores/spaces/SpaceStore.ts

@@ -1040,6 +1040,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         this._enabledMetaSpaces = metaSpaceOrder.filter(k => enabledMetaSpaces[k]) as MetaSpace[];
 
         this._allRoomsInHome = SettingsStore.getValue("Spaces.allRoomsInHome");
+        this.sendUserProperties();
 
         this.rebuildSpaceHierarchy(); // trigger an initial update
 
@@ -1056,6 +1057,15 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         }
     }
 
+    private sendUserProperties() {
+        const enabled = new Set(this.enabledMetaSpaces);
+        PosthogAnalytics.instance.setProperty("WebMetaSpaceHomeEnabled", enabled.has(MetaSpace.Home));
+        PosthogAnalytics.instance.setProperty("WebMetaSpaceHomeAllRooms", this.allRoomsInHome);
+        PosthogAnalytics.instance.setProperty("WebMetaSpacePeopleEnabled", enabled.has(MetaSpace.People));
+        PosthogAnalytics.instance.setProperty("WebMetaSpaceFavouritesEnabled", enabled.has(MetaSpace.Favourites));
+        PosthogAnalytics.instance.setProperty("WebMetaSpaceOrphansEnabled", enabled.has(MetaSpace.Orphans));
+    }
+
     private goToFirstSpace(contextSwitch = false) {
         this.setActiveSpace(this.enabledMetaSpaces[0] ?? this.spacePanelSpaces[0]?.roomId, contextSwitch);
     }
@@ -1129,6 +1139,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                             if (this.enabledMetaSpaces.includes(MetaSpace.Home)) {
                                 this.rebuildHomeSpace();
                             }
+                            this.sendUserProperties();
                         }
                         break;
                     }
@@ -1159,6 +1170,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
                             }
 
                             this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces, this.enabledMetaSpaces);
+                            this.sendUserProperties();
                         }
                         break;
                     }