diff --git a/apps/web/package.json b/apps/web/package.json index e3e8cab71c..d725f8aaa9 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -43,7 +43,7 @@ "@fontsource/fira-code": "^5", "@fontsource/inter": "catalog:", "@formatjs/intl-segmenter": "^12.0.0", - "@matrix-org/analytics-events": "^0.33.0", + "@matrix-org/analytics-events": "^0.36.0", "@matrix-org/emojibase-bindings": "^1.5.0", "@matrix-org/react-sdk-module-api": "^2.4.0", "@sentry/browser": "^10.0.0", diff --git a/apps/web/project.json b/apps/web/project.json index abb5fc4757..ce1ef767be 100644 --- a/apps/web/project.json +++ b/apps/web/project.json @@ -26,7 +26,7 @@ }, "start": { "command": "webpack-dev-server --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development", - "dependsOn": ["prebuild:module_system", "prebuild:rethemendex", "^start"], + "dependsOn": ["prebuild:module_system", "prebuild:rethemendex"], "continuous": true, "options": { "cwd": "apps/web" } }, diff --git a/apps/web/src/PosthogTrackers.ts b/apps/web/src/PosthogTrackers.ts index 19bb900b7c..18afd97d89 100644 --- a/apps/web/src/PosthogTrackers.ts +++ b/apps/web/src/PosthogTrackers.ts @@ -13,6 +13,8 @@ import { type Interaction as InteractionEvent } from "@matrix-org/analytics-even import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction"; import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged"; import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered"; +import { type SectionCreation } from "@matrix-org/analytics-events/types/typescript/SectionCreation"; +import { type ExpandCollapseSection } from "@matrix-org/analytics-events/types/typescript/ExpandCollapseSection"; import PageType from "./PageTypes"; import Views from "./Views"; @@ -164,6 +166,33 @@ export default class PosthogTrackers { }); this.previewedEventIds.set(eventId, true); } + + /** + * Track when the user creates a section in the room list. + * @param from The source from which the section creation was triggered. + */ + public static trackSectionCreation(from: SectionCreation["from"]): void { + PosthogAnalytics.instance.trackEvent({ + eventName: "SectionCreation", + from, + }); + } + + /** + * Track when the user collapses or expands a section in the room list. + * @param kind Is expand or collapse. + * @param from From where the action is triggered. + */ + public static trackCollapseOrExpandSection( + kind: ExpandCollapseSection["kind"], + from: ExpandCollapseSection["from"], + ): void { + PosthogAnalytics.instance.trackEvent({ + eventName: "ExpandCollapseSection", + kind, + from, + }); + } } export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName }> { diff --git a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts index 2e48532078..ae24ea52b8 100644 --- a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts @@ -207,6 +207,7 @@ export class RoomListHeaderViewModel public createSection = (): void => { RoomListStoreV3.instance.createSection(); + PosthogTrackers.trackSectionCreation("RoomListHeader"); }; public collapseOrExpandSections = (): void => { @@ -215,6 +216,9 @@ export class RoomListHeaderViewModel ? Action.RoomListExpandAllSections : Action.RoomListCollapseAllSections; defaultDispatcher.fire(action); + + const kind = action === Action.RoomListExpandAllSections ? "Expand" : "Collapse"; + PosthogTrackers.trackCollapseOrExpandSection(kind, "RoomListHeader"); }; private readonly onDispatch = (payload: { action: string }): void => { diff --git a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts index c2006c84b7..2f2f953ce6 100644 --- a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts @@ -403,6 +403,8 @@ export class RoomListItemViewModel public onCreateSection = async (): Promise => { const newTag = await RoomListStoreV3.instance.createSection(); + PosthogTrackers.trackSectionCreation("RoomListItemOverflowMenu"); + // Add the room to the section if (newTag) { tagRoom(this.props.room, newTag); diff --git a/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts index a7aebddffb..1e238b9fd9 100644 --- a/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts @@ -18,6 +18,7 @@ import { type RoomNotificationState } from "../../stores/notifications/RoomNotif import SettingsStore from "../../settings/SettingsStore"; import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3"; import { getCustomSectionData, isCustomSectionTag, isDefaultSectionTag } from "../../stores/room-list-v3/section"; +import PosthogTrackers from "../../PosthogTrackers"; interface RoomListSectionHeaderViewModelProps { tag: string; @@ -80,6 +81,9 @@ export class RoomListSectionHeaderViewModel public set isExpanded(value: boolean) { this.expandedBySpace.set(this.props.spaceId, value); this.snapshot.merge({ isExpanded: value }); + + const kind = value ? "Expand" : "Collapse"; + PosthogTrackers.trackCollapseOrExpandSection(kind, "SectionHeader"); } /** @@ -153,5 +157,7 @@ export class RoomListSectionHeaderViewModel // There is one notification state per room in the section const isEmpty = this.roomNotificationStates.size === 0; await RoomListStoreV3.instance.removeSection(this.props.tag, isEmpty); + + PosthogTrackers.trackInteraction("WebDeleteSection"); }; } diff --git a/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts b/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts index e4afd6e7b8..b0dd015ee6 100644 --- a/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts +++ b/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts @@ -29,6 +29,8 @@ import PosthogTrackers from "../../../src/PosthogTrackers"; jest.mock("../../../src/PosthogTrackers", () => ({ trackInteraction: jest.fn(), + trackSectionCreation: jest.fn(), + trackCollapseOrExpandSection: jest.fn(), })); jest.mock("../../../src/utils/space", () => ({ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cf3f75869..05325efb5a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -353,8 +353,8 @@ importers: specifier: ^12.0.0 version: 12.2.8 '@matrix-org/analytics-events': - specifier: ^0.33.0 - version: 0.33.2 + specifier: ^0.36.0 + version: 0.36.0 '@matrix-org/emojibase-bindings': specifier: ^1.5.0 version: 1.5.0 @@ -3209,8 +3209,8 @@ packages: '@maplibre/vt-pbf@4.3.0': resolution: {integrity: sha512-jIvp8F5hQCcreqOOpEt42TJMUlsrEcpf/kI1T2v85YrQRV6PPXUcEXUg5karKtH6oh47XJZ4kHu56pUkOuqA7w==} - '@matrix-org/analytics-events@0.33.2': - resolution: {integrity: sha512-tkEpKa6m5FicrP2ftuVX+Ln/CQfQASFJ0HUoJE9ZbqJhtcmLADd9tn9UhWUP3dzZgafkTZnFIg5FUshLvuj8vQ==} + '@matrix-org/analytics-events@0.36.0': + resolution: {integrity: sha512-eJKdDdBnL/FJuH8j/PswjiTv3AHVipzBjEE3K53JR9NUAoPWb+ckInKL7xP+J11KrOskoVFgONWzYa4QKoYHdQ==} '@matrix-org/emojibase-bindings@1.5.0': resolution: {integrity: sha512-+W9/ow2Z3iQa7ZOF698PBhwNcgGkn36B5Sr8VDPx8N8CH7+Uw+7TrtbtKPZVdgf4m/THmgmfX40jS5YDBsLaYg==} @@ -16012,7 +16012,7 @@ snapshots: pbf: 4.0.1 supercluster: 8.0.1 - '@matrix-org/analytics-events@0.33.2': {} + '@matrix-org/analytics-events@0.36.0': {} '@matrix-org/emojibase-bindings@1.5.0': dependencies: