nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Wire up more Posthog tracking (#7689)

Browse Source
This commit is contained in:
Michael Telatynski
2022-02-09 14:25:58 +00:00
committed by GitHub
parent 254dbeeccb
commit 5620b83d34
17 changed files with 221 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/structures/LoggedInView.tsx
View File

@@ -630,10 +630,6 @@ class LoggedInView extends React.Component<IProps, IState> {
pageElement = <MyGroups />;
break;
case PageTypes.RoomDirectory:
// handled by MatrixChat for now
break;
case PageTypes.HomePage:
pageElement = <HomePage justRegistered={this.props.justRegistered} />;
break;

69
src/components/structures/MatrixChat.tsx
View File

@@ -20,7 +20,6 @@ import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
import { MatrixError } from 'matrix-js-sdk/src/http-api';
import { InvalidStoreError } from "matrix-js-sdk/src/errors";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Screen as ScreenEvent } from "matrix-analytics-events/types/typescript/Screen";
import { defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
import { logger } from "matrix-js-sdk/src/logger";
import { throttle } from "lodash";
@@ -30,6 +29,7 @@ import 'focus-visible';
// what-input helps improve keyboard accessibility
import 'what-input';
import PosthogTrackers from '../../PosthogTrackers';
import Analytics from "../../Analytics";
import CountlyAnalytics from "../../CountlyAnalytics";
import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
@@ -118,39 +118,10 @@ import AccessibleButton from "../views/elements/AccessibleButton";
import { ActionPayload } from "../../dispatcher/payloads";
import { SummarizedNotificationState } from "../../stores/notifications/SummarizedNotificationState";
import GenericToast from '../views/toasts/GenericToast';
import Views from '../../Views';
/** constants for MatrixChat.state.view */
export enum Views {
// a special initial state which is only used at startup, while we are
// trying to re-animate a matrix client or register as a guest.
LOADING,
// we are showing the welcome view
WELCOME,
// we are showing the login view
LOGIN,
// we are showing the registration view
REGISTER,
// showing the 'forgot password' view
FORGOT_PASSWORD,
// showing flow to trust this new device with cross-signing
COMPLETE_SECURITY,
// flow to setup SSSS / cross-signing on this account
E2E_SETUP,
// we are logged in with an active matrix client. The logged_in state also
// includes guests users as they too are logged in at the client level.
LOGGED_IN,
// We are logged out (invalid token) but have our local state again. The user
// should log back in to rehydrate the client.
SOFT_LOGOUT,
}
// legacy export
export { default as Views } from "../../Views";
const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas", "welcome"];
@@ -455,7 +426,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
const durationMs = this.stopPageChangeTimer();
Analytics.trackPageChange(durationMs);
CountlyAnalytics.instance.trackPageChange(durationMs);
this.trackScreenChange(durationMs);
PosthogTrackers.instance.trackPageChange(this.state.view, this.state.page_type, durationMs);
}
if (this.focusComposer) {
dis.fire(Action.FocusSendMessageComposer);
@@ -475,36 +446,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
if (this.accountPasswordTimer !== null) clearTimeout(this.accountPasswordTimer);
}
public trackScreenChange(durationMs: number): void {
const notLoggedInMap: Partial<Record<Views, ScreenEvent["screenName"]>> = {};
notLoggedInMap[Views.LOADING] = "WebLoading";
notLoggedInMap[Views.WELCOME] = "Welcome";
notLoggedInMap[Views.LOGIN] = "Login";
notLoggedInMap[Views.REGISTER] = "Register";
notLoggedInMap[Views.FORGOT_PASSWORD] = "ForgotPassword";
notLoggedInMap[Views.COMPLETE_SECURITY] = "WebCompleteSecurity";
notLoggedInMap[Views.E2E_SETUP] = "WebE2ESetup";
notLoggedInMap[Views.SOFT_LOGOUT] = "WebSoftLogout";
const loggedInPageTypeMap: Partial<Record<PageType, ScreenEvent["screenName"]>> = {};
loggedInPageTypeMap[PageType.HomePage] = "Home";
loggedInPageTypeMap[PageType.RoomView] = "Room";
loggedInPageTypeMap[PageType.RoomDirectory] = "RoomDirectory";
loggedInPageTypeMap[PageType.UserView] = "User";
loggedInPageTypeMap[PageType.GroupView] = "Group";
loggedInPageTypeMap[PageType.MyGroups] = "MyGroups";
const screenName = this.state.view === Views.LOGGED_IN ?
loggedInPageTypeMap[this.state.page_type] :
notLoggedInMap[this.state.view];
return PosthogAnalytics.instance.trackEvent<ScreenEvent>({
eventName: "$screen",
screenName,
durationMs,
});
}
private onWindowResized = (): void => {
// XXX: This is a very unreliable way to detect whether or not the the devtools are open
this.warnInConsole();

1
src/components/structures/RoomDirectory.tsx
View File

@@ -811,6 +811,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
hasCancel={true}
onFinished={this.onFinished}
title={title}
screenName="RoomDirectory"
>
<div className="mx_RoomDirectory">
{ explanation }

16
src/components/structures/TabbedView.tsx
View File

@@ -24,6 +24,7 @@ import { _t } from '../../languageHandler';
import AutoHideScrollbar from './AutoHideScrollbar';
import { replaceableComponent } from "../../utils/replaceableComponent";
import AccessibleButton from "../views/elements/AccessibleButton";
import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
/**
* Represents a tab for the TabbedView.
@@ -35,9 +36,15 @@ export class Tab {
* @param {string} label The untranslated tab label.
* @param {string} icon The class for the tab icon. This should be a simple mask.
* @param {React.ReactNode} body The JSX for the tab container.
* @param {string} screenName The screen name to report to Posthog.
*/
constructor(public id: string, public label: string, public icon: string, public body: React.ReactNode) {
}
constructor(
public readonly id: string,
public readonly label: string,
public readonly icon: string,
public readonly body: React.ReactNode,
public readonly screenName?: ScreenName,
) {}
}
export enum TabLocation {
@@ -50,6 +57,7 @@ interface IProps {
initialTabId?: string;
tabLocation: TabLocation;
onChange?: (tabId: string) => void;
screenName?: ScreenName;
}
interface IState {
@@ -132,7 +140,8 @@ export default class TabbedView extends React.Component<IProps, IState> {
public render(): React.ReactNode {
const labels = this.props.tabs.map(tab => this.renderTabLabel(tab));
const panel = this.renderTabPanel(this.props.tabs[this.getActiveTabIndex()]);
const tab = this.props.tabs[this.getActiveTabIndex()];
const panel = this.renderTabPanel(tab);
const tabbedViewClasses = classNames({
'mx_TabbedView': true,
@@ -142,6 +151,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
return (
<div className={tabbedViewClasses}>
<PosthogScreenTracker screenName={tab?.screenName ?? this.props.screenName} />
<div className="mx_TabbedView_tabLabels">
{ labels }
</div>

5
src/components/views/dialogs/BaseDialog.tsx
View File

@@ -29,6 +29,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import Heading from '../typography/Heading';
import { IDialogProps } from "./IDialogProps";
import { PosthogScreenTracker, ScreenName } from "../../../PosthogTrackers";
interface IProps extends IDialogProps {
// Whether the dialog should have a 'close' button that will
@@ -66,6 +67,9 @@ interface IProps extends IDialogProps {
titleClass?: string | string[];
headerButton?: JSX.Element;
// optional Posthog ScreenName to supply during the lifetime of this dialog
screenName?: ScreenName;
}
/*
@@ -119,6 +123,7 @@ export default class BaseDialog extends React.Component<IProps> {
return (
<MatrixClientContext.Provider value={this.matrixClient}>
<PosthogScreenTracker screenName={this.props.screenName} />
<FocusLock
returnFocus={true}
lockProps={{

7
src/components/views/dialogs/CreateRoomDialog.tsx
View File

@@ -326,7 +326,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
}
return (
<BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished} title={title}>
<BaseDialog
className="mx_CreateRoomDialog"
onFinished={this.props.onFinished}
title={title}
screenName="CreateRoom"
>
<form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
<div className="mx_Dialog_content">
<Field

4
src/components/views/dialogs/DeactivateAccountDialog.tsx
View File

@@ -199,10 +199,12 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
// this is on purpose not a <form /> to prevent Enter triggering submission, to further prevent accidents
return (
<BaseDialog className="mx_DeactivateAccountDialog"
<BaseDialog
className="mx_DeactivateAccountDialog"
onFinished={this.props.onFinished}
titleClass="danger"
title={_t("Deactivate Account")}
screenName="DeactivateAccount"
>
<div className="mx_Dialog_content">
<p>{ _t(

9
src/components/views/dialogs/InviteDialog.tsx
View File

@@ -70,6 +70,7 @@ import SpaceStore from "../../../stores/spaces/SpaceStore";
import CallHandler from "../../../CallHandler";
import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
import CopyableText from "../elements/CopyableText";
import { ScreenName } from '../../../PosthogTrackers';
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
/* eslint-disable camelcase */
@@ -1307,6 +1308,13 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
selectText(e.target);
}
private get screenName(): ScreenName {
switch (this.props.kind) {
case KIND_DM:
return "StartChat";
}
}
render() {
let spinner = null;
if (this.state.busy) {
@@ -1584,6 +1592,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
hasCancel={true}
onFinished={this.props.onFinished}
title={title}
screenName={this.screenName}
>
<div className='mx_InviteDialog_content'>
{ dialogContent }

1
src/components/views/dialogs/RoomSettingsDialog.tsx
View File

@@ -154,6 +154,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
<TabbedView
tabs={this.getTabs()}
initialTabId={this.props.initialTabId}
screenName="RoomSettings"
/>
</div>
</BaseDialog>

12
src/components/views/dialogs/UserSettingsDialog.tsx
View File

@@ -94,12 +94,14 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("General"),
"mx_UserSettingsDialog_settingsIcon",
<GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
"WebUserSettingsGeneral",
));
tabs.push(new Tab(
UserTab.Appearance,
_td("Appearance"),
"mx_UserSettingsDialog_appearanceIcon",
<AppearanceUserSettingsTab />,
"WebUserSettingsAppearance",
));
if (SettingsStore.getValue(UIFeature.Flair)) {
tabs.push(new Tab(
@@ -107,6 +109,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Flair"),
"mx_UserSettingsDialog_flairIcon",
<FlairUserSettingsTab />,
"WebUserSettingFlair",
));
}
tabs.push(new Tab(
@@ -114,24 +117,28 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Notifications"),
"mx_UserSettingsDialog_bellIcon",
<NotificationUserSettingsTab />,
"WebUserSettingsNotifications",
));
tabs.push(new Tab(
UserTab.Preferences,
_td("Preferences"),
"mx_UserSettingsDialog_preferencesIcon",
<PreferencesUserSettingsTab closeSettingsFn={this.props.onFinished} />,
"WebUserSettingsPreferences",
));
tabs.push(new Tab(
UserTab.Keyboard,
_td("Keyboard"),
"mx_UserSettingsDialog_keyboardIcon",
<KeyboardUserSettingsTab />,
"WebUserSettingsKeyboard",
));
tabs.push(new Tab(
UserTab.Sidebar,
_td("Sidebar"),
"mx_UserSettingsDialog_sidebarIcon",
<SidebarUserSettingsTab />,
"WebUserSettingsSidebar",
));
if (SettingsStore.getValue(UIFeature.Voip)) {
@@ -140,6 +147,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Voice & Video"),
"mx_UserSettingsDialog_voiceIcon",
<VoiceUserSettingsTab />,
"WebUserSettingsVoiceVideo",
));
}
@@ -148,6 +156,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Security & Privacy"),
"mx_UserSettingsDialog_securityIcon",
<SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
"WebUserSettingsSecurityPrivacy",
));
// Show the Labs tab if enabled or if there are any active betas
if (SdkConfig.get()['showLabsSettings']
@@ -158,6 +167,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Labs"),
"mx_UserSettingsDialog_labsIcon",
<LabsUserSettingsTab />,
"WebUserSettingsLabs",
));
}
if (this.state.mjolnirEnabled) {
@@ -166,6 +176,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Ignored users"),
"mx_UserSettingsDialog_mjolnirIcon",
<MjolnirUserSettingsTab />,
"WebUserSettingMjolnir",
));
}
tabs.push(new Tab(
@@ -173,6 +184,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
_td("Help & About"),
"mx_UserSettingsDialog_helpIcon",
<HelpUserSettingsTab closeSettingsFn={() => this.props.onFinished(true)} />,
"WebUserSettingsHelpAbout",
));
return tabs;

2
src/components/views/rooms/SearchBar.tsx
View File

@@ -23,6 +23,7 @@ import { _t } from '../../../languageHandler';
import { Key } from "../../../Keyboard";
import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { PosthogScreenTracker } from '../../../PosthogTrackers';
interface IProps {
onCancelClick: () => void;
@@ -93,6 +94,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
return (
<>
<PosthogScreenTracker screenName="RoomSearch" />
<div className="mx_SearchBar">
<div className="mx_SearchBar_buttons" role="radiogroup">
<AccessibleButton