mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Wire up more posthog properties and interactions (#7763)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-10 13:53:07 +00:00 committed by GitHub
parent be324df953
commit 20e9d0c159
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/PosthogTrackers.ts
View file

@ -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,
});
}

3
src/components/structures/UserMenu.tsx
View file

@ -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);

3
src/components/views/settings/ThemeChoicePanel.tsx
View file

@ -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');

23
src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
View file

@ -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") }

7
src/components/views/spaces/QuickSettingsButton.tsx
View file

@ -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

12
src/stores/spaces/SpaceStore.ts
View file

@ -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;
}