Analytics opt in for posthog

res/css/views/dialogs/_Analytics.scss

@@ -16,4 +16,8 @@ limitations under the License.
 
 .mx_AnalyticsModal table {
     margin: 10px 0px;
+
+    .mx_AnalyticsModal_label {
+        width: 400px;
+    }
 }

src/Analytics.tsx

@@ -138,6 +138,11 @@ const customVariables: Record<string, IVariable> = {
         }),
         example: 'false',
     },
+    'Analytics ID': {
+        id: 11,
+        expl: _td("A randomly generated identifier stored on your homeserver and shared between your devices"),
+        example: '54173cc56c7212b08999c53411b6c35',
+    },
 };
 
 function whitelistRedact(whitelist: string[], str: string): string {
@@ -393,16 +398,26 @@ export class Analytics {
         ];
 
         // FIXME: Using an import will result in test failures
+        const cookiePolicyUrl = SdkConfig.get().piwik?.policyUrl;
         const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+        const cookiePolicyLink = _t(
+            "Our complete cookie policy can be found <CookiePolicyLink>here</CookiePolicyLink>.",
+            {},
+            {
+                "CookiePolicyLink": (sub) => {
+                    return <a href={cookiePolicyUrl} target="_blank" rel="noreferrer noopener">{ sub }</a>;
+                },
+            });
         Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, {
             title: _t('Analytics'),
             description: <div className="mx_AnalyticsModal">
-                <div>{ _t('The information being sent to us to help make %(brand)s better includes:', {
+                { cookiePolicyUrl && <p>{ cookiePolicyLink }</p> }
+                <div>{ _t('Some examples of the information being sent to us to help make %(brand)s better includes:', {
                     brand: SdkConfig.get().brand,
                 }) }</div>
                 <table>
                     { rows.map((row) => <tr key={row[0]}>
-                        <td>{ _t(
+                        <td className="mx_AnalyticsModal_label">{ _t(
                             customVariables[row[0]].expl,
                             customVariables[row[0]].getTextVariables ?
                                 customVariables[row[0]].getTextVariables() :

src/Lifecycle.ts

@@ -580,10 +580,12 @@ async function doSetLoggedIn(
 
     MatrixClientPeg.replaceUsingCreds(credentials);
 
-    PosthogAnalytics.instance.updateAnonymityFromSettings(credentials.userId);
-
     const client = MatrixClientPeg.get();
 
+    if (PosthogAnalytics.instance.isEnabled()) {
+        PosthogAnalytics.instance.startListeningToSettingsChanges(client);
+    }
+
     if (credentials.freshLogin && SettingsStore.getValue("feature_dehydration")) {
         // If we just logged in, try to rehydrate a device instead of using a
         // new device.  If it succeeds, we'll get a new device ID, so make sure

src/PosthogAnalytics.ts

@@ -17,11 +17,11 @@ limitations under the License.
 import posthog, { PostHog } from 'posthog-js';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
-import SettingsStore from './settings/SettingsStore';
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import SettingsStore from "./settings/SettingsStore";
 
 /* Posthog analytics tracking.
  *
@@ -132,7 +132,7 @@ export class PosthogAnalytics {
 
     private anonymity = Anonymity.Disabled;
     // set true during the constructor if posthog config is present, otherwise false
-    private enabled = false;
+    private readonly enabled: boolean = false;
     private static _instance = null;
     private platformSuperProperties = {};
     private static ANALYTICS_ID_EVENT_TYPE = "im.vector.web.analytics_id";
@@ -196,29 +196,6 @@ export class PosthogAnalytics {
         return properties;
     };
 
-    private static getAnonymityFromSettings(): Anonymity {
-        // determine the current anonymity level based on current user settings
-
-        // "Send anonymous usage data which helps us improve Element. This will use a cookie."
-        const analyticsOptIn = SettingsStore.getValue("analyticsOptIn", null, true);
-
-        // (proposed wording) "Send pseudonymous usage data which helps us improve Element. This will use a cookie."
-        //
-        // TODO: Currently, this is only a labs flag, for testing purposes.
-        const pseudonumousOptIn = SettingsStore.getValue("feature_pseudonymous_analytics_opt_in", null, true);
-
-        let anonymity;
-        if (pseudonumousOptIn) {
-            anonymity = Anonymity.Pseudonymous;
-        } else if (analyticsOptIn) {
-            anonymity = Anonymity.Anonymous;
-        } else {
-            anonymity = Anonymity.Disabled;
-        }
-
-        return anonymity;
-    }
-
     private registerSuperProperties(properties: posthog.Properties) {
         if (this.enabled) {
             this.posthog.register(properties);
@@ -306,7 +283,7 @@ export class PosthogAnalytics {
         if (this.enabled) {
             this.posthog.reset();
         }
-        this.setAnonymity(Anonymity.Anonymous);
+        this.setAnonymity(Anonymity.Disabled);
     }
 
     public async trackPseudonymousEvent<E extends IPseudonymousEvent>(
@@ -350,12 +327,31 @@ export class PosthogAnalytics {
         this.registerSuperProperties(this.platformSuperProperties);
     }
 
-    public async updateAnonymityFromSettings(userId?: string): Promise<void> {
+    public async updateAnonymityFromSettings(pseudonumousOptIn: boolean): Promise<void> {
         // Update this.anonymity based on the user's analytics opt-in settings
-        // Identify the user (via hashed user ID) to posthog if anonymity is pseudonmyous
-        this.setAnonymity(PosthogAnalytics.getAnonymityFromSettings());
-        if (userId && this.getAnonymity() == Anonymity.Pseudonymous) {
+        const anonymity = pseudonumousOptIn ? Anonymity.Pseudonymous : Anonymity.Disabled;
+        this.setAnonymity(anonymity);
+        if (anonymity == Anonymity.Pseudonymous) {
             await this.identifyUser(MatrixClientPeg.get(), PosthogAnalytics.getRandomAnalyticsId);
         }
+
+        if (anonymity != Anonymity.Disabled) {
+            await PosthogAnalytics.instance.updatePlatformSuperProperties();
+        }
+    }
+
+    public startListeningToSettingsChanges(client: MatrixClient): void {
+        // Listen to account data changes from sync so we can observe changes to relevant flags and update.
+        // This is called -
+        //  * On page load, when the account data is first received by sync
+        //  * On login
+        //  * When another device changes account data
+        //  * When the user changes their preferences on this device
+        // Note that for new accounts, pseudonymousAnalyticsOptIn won't be set, so updateAnonymityFromSettings
+        // won't be called (i.e. this.anonymity will be left as the default, until the setting changes)
+        SettingsStore.watchSetting("pseudonymousAnalyticsOptIn", null,
+            (originalSettingName, changedInRoomId, atLevel, newValueAtLevel, newValue) => {
+                this.updateAnonymityFromSettings(newValue);
+            });
     }
 }

src/components/structures/MatrixChat.tsx

@@ -19,7 +19,7 @@ import { createClient } from "matrix-js-sdk/src/matrix";
 import { InvalidStoreError } from "matrix-js-sdk/src/errors";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { sleep, defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
+import { defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
 
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';
@@ -62,8 +62,9 @@ import type LoggedInViewType from "./LoggedInView";
 import { ViewUserPayload } from "../../dispatcher/payloads/ViewUserPayload";
 import { Action } from "../../dispatcher/actions";
 import {
-    showToast as showAnalyticsToast,
     hideToast as hideAnalyticsToast,
+    showAnonymousAnalyticsOptInToast,
+    showPseudonymousAnalyticsOptInToast,
 } from "../../toasts/AnalyticsToast";
 import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
 import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
@@ -389,13 +390,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             });
         }
 
-        if (SettingsStore.getValue("analyticsOptIn")) {
+        if (SettingsStore.getValue("pseudonymousAnalyticsOptIn")) {
             Analytics.enable();
         }
 
-        PosthogAnalytics.instance.updateAnonymityFromSettings();
-        PosthogAnalytics.instance.updatePlatformSuperProperties();
-
         CountlyAnalytics.instance.enable(/* anonymous = */ true);
 
         initSentry(SdkConfig.get()["sentry"]);
@@ -507,8 +505,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 } else {
                     dis.dispatch({ action: "view_welcome_page" });
                 }
-            } else if (SettingsStore.getValue("analyticsOptIn")) {
-                CountlyAnalytics.instance.enable(/* anonymous = */ false);
             }
         });
         // Note we don't catch errors from this: we catch everything within
@@ -831,9 +827,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 });
                 break;
             case 'accept_cookies':
-                SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, true);
-                SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
                 hideAnalyticsToast();
+                this.setCookieAccountData(true);
                 if (Analytics.canEnable()) {
                     Analytics.enable();
                 }
@@ -842,13 +837,35 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
                 break;
             case 'reject_cookies':
-                SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, false);
-                SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
                 hideAnalyticsToast();
+                this.setCookieAccountData(false);
                 break;
         }
     };
 
+    private async setCookieAccountData(accept: boolean): Promise<{}> {
+        // Update showPseudonymousAnalyticsPrompt and then pseudonymousAnalyticsOptIn.
+        //
+        // XXX: SettingsStore.setValue doesn't wait until the local copy of settings has been reflected in accountData,
+        // so calling it twice in succession clobbers the first value as it passes that full local copy on each set.
+        //
+        // To get around that, watch showPseudonymousAnalyticsPrompt until its observed to change, and only then
+        // update pseudonymousAnalyticsOptIn.
+        return new Promise((resolve) => {
+            const watcher = SettingsStore.watchSetting("showPseudonymousAnalyticsPrompt", null,
+                (originalSettingName, changedInRoomId, atLevel, newValueAtLevel, newValue) => {
+                    if (newValue === false) {
+                        SettingsStore.setValue("pseudonymousAnalyticsOptIn", null, SettingLevel.ACCOUNT, accept);
+                        SettingsStore.unwatchSetting(watcher);
+                        resolve({});
+                    }
+                },
+            );
+
+            SettingsStore.setValue("showPseudonymousAnalyticsPrompt", null, SettingLevel.ACCOUNT, false);
+        });
+    }
+
     private setPage(pageType: PageType) {
         this.setState({
             page_type: pageType,
@@ -1327,20 +1344,52 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         StorageManager.tryPersistStorage();
 
-        // defer the following actions by 30 seconds to not throw them at the user immediately
-        await sleep(30);
-        if (SettingsStore.getValue("showCookieBar") &&
-            (Analytics.canEnable() || CountlyAnalytics.instance.canEnable())
-        ) {
-            showAnalyticsToast(this.props.config.piwik?.policyUrl);
+        if (PosthogAnalytics.instance.isEnabled()) {
+            this.initPosthogAnalyticsToast();
+        } else if (Analytics.canEnable() || CountlyAnalytics.instance.canEnable()) {
+            if (SettingsStore.getValue("showCookieBar") &&
+                (Analytics.canEnable() || CountlyAnalytics.instance.canEnable())
+            ) {
+                showAnonymousAnalyticsOptInToast(this.props.config.piwik?.policyUrl);
+            }
         }
+
         if (SdkConfig.get().mobileGuideToast) {
             // The toast contains further logic to detect mobile platforms,
             // check if it has been dismissed before, etc.
             showMobileGuideToast();
         }
     }
 
+    private showPosthogToast(analyticsOptIn: boolean) {
+        showPseudonymousAnalyticsOptInToast(this.props.config.piwik?.policyUrl, analyticsOptIn,
+            SdkConfig.get().analyticsOwner ?? SdkConfig.get().brand);
+    }
+
+    private initPosthogAnalyticsToast() {
+        // Show the analytics toast if necessary
+        if (SettingsStore.getValue("showPseudonymousAnalyticsPrompt") !== false) {
+            this.showPosthogToast(SettingsStore.getValue("analyticsOptIn", null, true));
+        }
+
+        // Listen to changes in settings and show the toast if appropriate - this is necessary because account
+        // settings can still be changing at this point in app init (due to the initial sync being cached, then
+        // subsequent syncs being received from the server)
+        SettingsStore.watchSetting("showPseudonymousAnalyticsPrompt", null,
+            (originalSettingName, changedInRoomId, atLevel, newValueAtLevel, newValue) => {
+                if (newValue !== false) {
+                    this.showPosthogToast(SettingsStore.getValue("analyticsOptIn", null, true));
+                } else {
+                    // It's possible for the value to change if a cached sync loads at page load, but then network
+                    // sync contains a new value of the flag with it set to false (e.g. another device set it since last
+                    // loading the page); so hide the toast.
+                    // (this flipping usually happens before first render so the user won't notice it; anyway flicker
+                    // on/off is probably better than showing the toast again when the user already dismissed it)
+                    hideAnalyticsToast();
+                }
+            });
+    }
+
     private showScreenAfterLogin() {
         // If screenAfterLogin is set, use that, then null it so that a second login will
         // result in view_home_page, _user_settings or _room_directory

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -32,7 +32,6 @@ import { UIFeature } from "../../../../../settings/UIFeature";
 import E2eAdvancedPanel, { isE2eAdvancedPanelPossible } from "../../E2eAdvancedPanel";
 import CountlyAnalytics from "../../../../../CountlyAnalytics";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
-import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
 import { ActionPayload } from "../../../../../dispatcher/payloads";
 import { Room } from "matrix-js-sdk/src/models/room";
 import CryptographyPanel from "../../CryptographyPanel";
@@ -41,6 +40,7 @@ import SettingsFlag from "../../../elements/SettingsFlag";
 import CrossSigningPanel from "../../CrossSigningPanel";
 import EventIndexPanel from "../../EventIndexPanel";
 import InlineSpinner from "../../../elements/InlineSpinner";
+import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
 
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -116,7 +116,6 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
     private updateAnalytics = (checked: boolean): void => {
         checked ? Analytics.enable() : Analytics.disable();
         CountlyAnalytics.instance.enable(/* anonymous = */ !checked);
-        PosthogAnalytics.instance.updateAnonymityFromSettings(MatrixClientPeg.get().getUserId());
     };
 
     private onGoToUserProfileClick = (): void => {
@@ -243,8 +242,6 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
     }
 
     public render(): JSX.Element {
-        const brand = SdkConfig.get().brand;
-
         const secureBackup = (
             <div className='mx_SettingsTab_section'>
                 <span className="mx_SettingsTab_subheading">{ _t("Secure Backup") }</span>
@@ -283,24 +280,36 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         }
 
         let privacySection;
-        if (Analytics.canEnable() || CountlyAnalytics.instance.canEnable()) {
+        if (Analytics.canEnable() || CountlyAnalytics.instance.canEnable() || PosthogAnalytics.instance.isEnabled()) {
             privacySection = <React.Fragment>
                 <div className="mx_SettingsTab_heading">{ _t("Privacy") }</div>
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Analytics") }</span>
                     <div className="mx_SettingsTab_subsectionText">
-                        { _t(
-                            "%(brand)s collects anonymous analytics to allow us to improve the application.",
-                            { brand },
-                        ) }
-                        &nbsp;
-                        { _t("Privacy is important to us, so we don't collect any personal or " +
-                            "identifiable data for our analytics.") }
-                        <AccessibleButton className="mx_SettingsTab_linkBtn" onClick={Analytics.showDetailsModal}>
-                            { _t("Learn more about how we use analytics.") }
-                        </AccessibleButton>
+                        <p>
+                            { _t(
+                                "%(analyticsOwner)s collects analytics to allow us to improve the application.",
+                                { analyticsOwner: SdkConfig.get().analyticsOwner ?? SdkConfig.get().brand },
+                            ) }
+                            &nbsp;
+                            { _t("We don't record or profile any personal data, and we don't share anything with any " +
+                                "third parties.") }
+                        </p>
+                        <p>
+                            <AccessibleButton className="mx_SettingsTab_linkBtn" onClick={Analytics.showDetailsModal}>
+                                { _t("Learn more about how we use analytics.") }
+                            </AccessibleButton>
+                        </p>
                     </div>
-                    <SettingsFlag name="analyticsOptIn" level={SettingLevel.DEVICE} onChange={this.updateAnalytics} />
+                    {
+                        PosthogAnalytics.instance.isEnabled() ?
+                            <SettingsFlag name="pseudonymousAnalyticsOptIn"
+                                level={SettingLevel.ACCOUNT}
+                                onChange={this.updateAnalytics} /> :
+                            <SettingsFlag name="analyticsOptIn"
+                                level={SettingLevel.DEVICE}
+                                onChange={this.updateAnalytics} />
+                    }
                 </div>
             </React.Fragment>;
         }