PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Switch to web-specific screens and $pageview event (#7777)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-10 14:38:31 +00:00 committed by GitHub
parent 0d6ef76605
commit 87ca70edb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -91,7 +91,7 @@
"linkifyjs": "^4.0.0-beta.4", "linkifyjs": "^4.0.0-beta.4",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"maplibre-gl": "^1.15.2", "maplibre-gl": "^1.15.2",
"matrix-analytics-events": "github:matrix-org/matrix-analytics-events.git#b183e6316826be11bbcc82d44b8f71921acd9d76", "matrix-analytics-events": "github:matrix-org/matrix-analytics-events.git#bdabdd63280f052cedeeb0c25443f3d55f7c7108",
"matrix-events-sdk": "^0.0.1-beta.6", "matrix-events-sdk": "^0.0.1-beta.6",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
"matrix-widget-api": "^0.1.0-beta.18", "matrix-widget-api": "^0.1.0-beta.18",

17
src/PosthogAnalytics.ts
View file

@ -23,6 +23,7 @@ import PlatformPeg from './PlatformPeg';
import SdkConfig from './SdkConfig'; import SdkConfig from './SdkConfig';
import { MatrixClientPeg } from "./MatrixClientPeg"; import { MatrixClientPeg } from "./MatrixClientPeg";
import SettingsStore from "./settings/SettingsStore"; import SettingsStore from "./settings/SettingsStore";
import { ScreenName } from "./PosthogTrackers";
/* Posthog analytics tracking. /* Posthog analytics tracking.
* *
@ -148,20 +149,20 @@ export class PosthogAnalytics {
} }
} }
// we persist the last `$screen_name` and send it for all events until it is replaced
private lastScreen: ScreenName = "Loading";
private sanitizeProperties = (properties: posthog.Properties): posthog.Properties => { private sanitizeProperties = (properties: posthog.Properties): posthog.Properties => {
// Callback from posthog to sanitize properties before sending them to the server. // Callback from posthog to sanitize properties before sending them to the server.
// //
// Here we sanitize posthog's built in properties which leak PII e.g. url reporting. // Here we sanitize posthog's built in properties which leak PII e.g. url reporting.
// See utils.js _.info.properties in posthog-js. // See utils.js _.info.properties in posthog-js.
// Replace the $current_url with a redacted version. if (properties["eventName"] === "$pageview") {
// $redacted_current_url is injected by this class earlier in capture(), as its generation this.lastScreen = properties["$current_url"];
// is async and can't be done in this non-async callback.
if (!properties['$redacted_current_url']) {
logger.log("$redacted_current_url not set in sanitizeProperties, will drop $current_url entirely");
} }
properties['$current_url'] = properties['$redacted_current_url']; // We inject a screen identifier in $current_url as per https://posthog.com/tutorials/spa
delete properties['$redacted_current_url']; properties["$current_url"] = this.lastScreen;
if (this.anonymity == Anonymity.Anonymous) { if (this.anonymity == Anonymity.Anonymous) {
// drop referrer information for anonymous users // drop referrer information for anonymous users
@ -204,7 +205,7 @@ export class PosthogAnalytics {
return; return;
} }
const { origin, hash, pathname } = window.location; const { origin, hash, pathname } = window.location;
properties['$redacted_current_url'] = getRedactedCurrentLocation(origin, hash, pathname); properties["redactedCurrentUrl"] = getRedactedCurrentLocation(origin, hash, pathname);
this.posthog.capture(eventName, { this.posthog.capture(eventName, {
...this.propertiesForNextEvent, ...this.propertiesForNextEvent,
...properties, ...properties,

20
src/PosthogTrackers.ts
View file

@ -15,25 +15,25 @@ limitations under the License.
*/ */
import { PureComponent, SyntheticEvent } from "react"; import { PureComponent, SyntheticEvent } from "react";
import { Screen as ScreenEvent } from "matrix-analytics-events/types/typescript/Screen"; import { WebScreen as ScreenEvent } from "matrix-analytics-events/types/typescript/WebScreen";
import { Interaction as InteractionEvent } from "matrix-analytics-events/types/typescript/Interaction"; import { Interaction as InteractionEvent } from "matrix-analytics-events/types/typescript/Interaction";
import PageType from "./PageTypes"; import PageType from "./PageTypes";
import Views from "./Views"; import Views from "./Views";
import { PosthogAnalytics } from "./PosthogAnalytics"; import { PosthogAnalytics } from "./PosthogAnalytics";
export type ScreenName = ScreenEvent["screenName"]; export type ScreenName = ScreenEvent["$current_url"];
export type InteractionName = InteractionEvent["name"]; export type InteractionName = InteractionEvent["name"];
const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = { const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
[Views.LOADING]: "WebLoading", [Views.LOADING]: "Loading",
[Views.WELCOME]: "Welcome", [Views.WELCOME]: "Welcome",
[Views.LOGIN]: "Login", [Views.LOGIN]: "Login",
[Views.REGISTER]: "Register", [Views.REGISTER]: "Register",
[Views.FORGOT_PASSWORD]: "ForgotPassword", [Views.FORGOT_PASSWORD]: "ForgotPassword",
[Views.COMPLETE_SECURITY]: "WebCompleteSecurity", [Views.COMPLETE_SECURITY]: "CompleteSecurity",
[Views.E2E_SETUP]: "WebE2ESetup", [Views.E2E_SETUP]: "E2ESetup",
[Views.SOFT_LOGOUT]: "WebSoftLogout", [Views.SOFT_LOGOUT]: "SoftLogout",
}; };
const loggedInPageTypeMap: Record<PageType, ScreenName> = { const loggedInPageTypeMap: Record<PageType, ScreenName> = {
@ -70,8 +70,8 @@ export default class PosthogTrackers {
? loggedInPageTypeMap[this.pageType] ? loggedInPageTypeMap[this.pageType]
: notLoggedInMap[this.view]; : notLoggedInMap[this.view];
PosthogAnalytics.instance.trackEvent<ScreenEvent>({ PosthogAnalytics.instance.trackEvent<ScreenEvent>({
eventName: "$screen", eventName: "$pageview",
screenName, $current_url: screenName,
durationMs, durationMs,
}); });
} }
@ -80,8 +80,8 @@ export default class PosthogTrackers {
if (!screenName) return; if (!screenName) return;
this.override = screenName; this.override = screenName;
PosthogAnalytics.instance.trackEvent<ScreenEvent>({ PosthogAnalytics.instance.trackEvent<ScreenEvent>({
eventName: "$screen", eventName: "$pageview",
screenName, $current_url: screenName,
}); });
} }

24
src/components/views/dialogs/UserSettingsDialog.tsx
View file

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

4
yarn.lock
View file

@ -6249,9 +6249,9 @@ mathml-tag-names@^2.1.3:
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3" resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg== integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
"matrix-analytics-events@github:matrix-org/matrix-analytics-events.git#b183e6316826be11bbcc82d44b8f71921acd9d76": "matrix-analytics-events@github:matrix-org/matrix-analytics-events.git#bdabdd63280f052cedeeb0c25443f3d55f7c7108":
version "0.0.1" version "0.0.1"
resolved "https://codeload.github.com/matrix-org/matrix-analytics-events/tar.gz/b183e6316826be11bbcc82d44b8f71921acd9d76" resolved "https://codeload.github.com/matrix-org/matrix-analytics-events/tar.gz/bdabdd63280f052cedeeb0c25443f3d55f7c7108"
matrix-events-sdk@^0.0.1-beta.6: matrix-events-sdk@^0.0.1-beta.6:
version "0.0.1-beta.6" version "0.0.1-beta.6"