From 20e9d0c1596f92a38a8dc9bb39675b369a2e9af1 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 10 Feb 2022 13:53:07 +0000 Subject: [PATCH] Wire up more posthog properties and interactions (#7763) --- src/PosthogTrackers.ts | 3 ++- src/components/structures/UserMenu.tsx | 3 +++ .../views/settings/ThemeChoicePanel.tsx | 3 +++ .../tabs/user/SidebarUserSettingsTab.tsx | 23 +++++++++++++++---- .../views/spaces/QuickSettingsButton.tsx | 7 ++++-- src/stores/spaces/SpaceStore.ts | 12 ++++++++++ 6 files changed, 43 insertions(+), 8 deletions(-) diff --git a/src/PosthogTrackers.ts b/src/PosthogTrackers.ts index 59f787b6a5..5b65262056 100644 --- a/src/PosthogTrackers.ts +++ b/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({ eventName: "Interaction", interactionType, + index, name, }); } diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 9ad924bb61..e8d5db75e2 100644 --- a/src/components/structures/UserMenu.tsx +++ b/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 { 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); diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx index 4adc3a1967..3296acff7e 100644 --- a/src/components/views/settings/ThemeChoicePanel.tsx +++ b/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 { 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'); diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx index adbee7e1d9..1b1fcf4716 100644 --- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx +++ b/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) => { +type InteractionName = "WebSettingsSidebarTabSpacesCheckbox" | "WebQuickSettingsPinToSidebarCheckbox"; + +export const onMetaSpaceChangeFactory = ( + metaSpace: MetaSpace, + interactionName: InteractionName, +) => (e: ChangeEvent) => { 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 = () => { @@ -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 = () => { { _t("Favourites") } @@ -95,7 +108,7 @@ const SidebarUserSettingsTab = () => { { _t("People") } @@ -106,7 +119,7 @@ const SidebarUserSettingsTab = () => { { _t("Rooms outside of a space") } diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 2835bd0489..2ad47a8363 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/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 }) => { { _t("Favourites") } { _t("People") } @@ -104,6 +105,8 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => { { + 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 diff --git a/src/stores/spaces/SpaceStore.ts b/src/stores/spaces/SpaceStore.ts index 127fd75f15..12583d6256 100644 --- a/src/stores/spaces/SpaceStore.ts +++ b/src/stores/spaces/SpaceStore.ts @@ -1040,6 +1040,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { 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 { } } + 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 { if (this.enabledMetaSpaces.includes(MetaSpace.Home)) { this.rebuildHomeSpace(); } + this.sendUserProperties(); } break; } @@ -1159,6 +1170,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { } this.emit(UPDATE_TOP_LEVEL_SPACES, this.spacePanelSpaces, this.enabledMetaSpaces); + this.sendUserProperties(); } break; }