Merge pull request #12965 from matrix-org/florianduros/pinned-messages/analytics-event

Add analytics event for pinned messages

Author: dbkr

package.json

@@ -72,7 +72,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/analytics-events": "^0.24.0",
+        "@matrix-org/analytics-events": "^0.25.0",
         "@matrix-org/emojibase-bindings": "^1.1.2",
         "@matrix-org/matrix-wysiwyg": "2.37.9",
         "@matrix-org/react-sdk-module-api": "^2.4.0",

src/PosthogTrackers.ts

@@ -17,6 +17,7 @@ limitations under the License.
 import { PureComponent, SyntheticEvent } from "react";
 import { WebScreen as ScreenEvent } from "@matrix-org/analytics-events/types/typescript/WebScreen";
 import { Interaction as InteractionEvent } from "@matrix-org/analytics-events/types/typescript/Interaction";
+import { PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
@@ -106,6 +107,19 @@ export default class PosthogTrackers {
             name,
         });
     }
+
+    /**
+     * Track a pin or unpin action on a message.
+     * @param kind - Is pin or unpin.
+     * @param from - From where the action is triggered.
+     */
+    public static trackPinUnpinMessage(kind: PinUnpinAction["kind"], from: PinUnpinAction["from"]): void {
+        PosthogAnalytics.instance.trackEvent<PinUnpinAction>({
+            eventName: "PinUnpinAction",
+            kind,
+            from,
+        });
+    }
 }
 
 export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName }> {

src/TextForEvent.tsx

@@ -40,12 +40,13 @@ import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore";
 import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases";
 import defaultDispatcher from "./dispatcher/dispatcher";
 import { RoomSettingsTab } from "./components/views/dialogs/RoomSettingsDialog";
-import AccessibleButton, { ButtonEvent } from "./components/views/elements/AccessibleButton";
+import AccessibleButton from "./components/views/elements/AccessibleButton";
 import RightPanelStore from "./stores/right-panel/RightPanelStore";
 import { highlightEvent, isLocationEvent } from "./utils/EventUtils";
 import { ElementCall } from "./models/Call";
 import { textForVoiceBroadcastStoppedEvent, VoiceBroadcastInfoEventType } from "./voice-broadcast";
 import { getSenderName } from "./utils/event/getSenderName";
+import PosthogTrackers from "./PosthogTrackers.ts";
 
 function getRoomMemberDisplayname(client: MatrixClient, event: MatrixEvent, userId = event.getSender()): string {
     const roomId = event.getRoomId();
@@ -563,6 +564,7 @@ function textForPowerEvent(event: MatrixEvent, client: MatrixClient): (() => str
 }
 
 const onPinnedMessagesClick = (): void => {
+    PosthogTrackers.trackInteraction("PinnedMessageStateEventClick");
     RightPanelStore.instance.setCard({ phase: RightPanelPhases.PinnedMessages }, false);
 };
 
@@ -590,7 +592,10 @@ function textForPinnedEvent(event: MatrixEvent, client: MatrixClient, allowJSX:
                             a: (sub) => (
                                 <AccessibleButton
                                     kind="link_inline"
-                                    onClick={(e: ButtonEvent) => highlightEvent(roomId, messageId)}
+                                    onClick={() => {
+                                        PosthogTrackers.trackInteraction("PinnedMessageStateEventClick");
+                                        highlightEvent(roomId, messageId);
+                                    }}
                                 >
                                     {sub}
                                 </AccessibleButton>
@@ -623,7 +628,10 @@ function textForPinnedEvent(event: MatrixEvent, client: MatrixClient, allowJSX:
                             a: (sub) => (
                                 <AccessibleButton
                                     kind="link_inline"
-                                    onClick={(e: ButtonEvent) => highlightEvent(roomId, messageId)}
+                                    onClick={() => {
+                                        PosthogTrackers.trackInteraction("PinnedMessageStateEventClick");
+                                        highlightEvent(roomId, messageId);
+                                    }}
                                 >
                                     {sub}
                                 </AccessibleButton>

src/components/views/context_menus/MessageContextMenu.tsx

@@ -60,6 +60,7 @@ import { getShareableLocationEvent } from "../../../events/location/getShareable
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
 import { CardContext } from "../right_panel/context";
 import PinningUtils from "../../../utils/PinningUtils";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
 
 interface IReplyInThreadButton {
     mxEvent: MatrixEvent;
@@ -243,9 +244,11 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         this.closeMenu();
     };
 
-    private onPinClick = (): void => {
+    private onPinClick = (isPinned: boolean): void => {
         // Pin or unpin in background
         PinningUtils.pinOrUnpinEvent(MatrixClientPeg.safeGet(), this.props.mxEvent);
+        PosthogTrackers.trackPinUnpinMessage(isPinned ? "Pin" : "Unpin", "Timeline");
+
         this.closeMenu();
     };
 
@@ -618,7 +621,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
                 <IconizedContextMenuOption
                     iconClassName={isPinned ? "mx_MessageContextMenu_iconUnpin" : "mx_MessageContextMenu_iconPin"}
                     label={isPinned ? _t("action|unpin") : _t("action|pin")}
-                    onClick={this.onPinClick}
+                    onClick={() => this.onPinClick(isPinned)}
                 />
             );
         }

src/components/views/dialogs/UnpinAllDialog.tsx

@@ -22,6 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import BaseDialog from "../dialogs/BaseDialog";
 import { _t } from "../../../languageHandler";
 import PinningUtils from "../../../utils/PinningUtils.ts";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
 
 /**
  * Properties for {@link UnpinAllDialog}.
@@ -61,6 +62,7 @@ export function UnpinAllDialog({ matrixClient, roomId, onFinished }: UnpinAllDia
                     onClick={async () => {
                         try {
                             await PinningUtils.unpinAllEvents(matrixClient, roomId);
+                            PosthogTrackers.trackPinUnpinMessage("Unpin", "UnpinAll");
                         } catch (e) {
                             logger.error("Failed to unpin all events:", e);
                         }

src/components/views/messages/MessageActionBar.tsx

@@ -67,6 +67,7 @@ import { GetRelationsForEvent, IEventTileType } from "../rooms/EventTile";
 import { VoiceBroadcastInfoEventType } from "../../../voice-broadcast/types";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import PinningUtils from "../../../utils/PinningUtils";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
 
 interface IOptionsButtonProps {
     mxEvent: MatrixEvent;
@@ -407,12 +408,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
     /**
      * Pin or unpin the event.
      */
-    private onPinClick = async (event: ButtonEvent): Promise<void> => {
+    private onPinClick = async (event: ButtonEvent, isPinned: boolean): Promise<void> => {
         // Don't open the regular browser or our context menu on right-click
         event.preventDefault();
         event.stopPropagation();
 
         await PinningUtils.pinOrUnpinEvent(MatrixClientPeg.safeGet(), this.props.mxEvent);
+        PosthogTrackers.trackPinUnpinMessage(isPinned ? "Pin" : "Unpin", "Timeline");
     };
 
     public render(): React.ReactNode {
@@ -441,8 +443,8 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 <RovingAccessibleButton
                     className="mx_MessageActionBar_iconButton"
                     title={isPinned ? _t("action|unpin") : _t("action|pin")}
-                    onClick={this.onPinClick}
-                    onContextMenu={this.onPinClick}
+                    onClick={(e) => this.onPinClick(e, isPinned)}
+                    onContextMenu={(e: ButtonEvent) => this.onPinClick(e, isPinned)}
                     key="pin"
                     placement="left"
                 >

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -95,6 +95,7 @@ const onRoomFilesClick = (): void => {
 };
 
 const onRoomPinsClick = (): void => {
+    PosthogTrackers.trackInteraction("PinnedMessageRoomInfoButton");
     RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true);
 };
 

src/components/views/rooms/PinnedEventTile.tsx

@@ -42,6 +42,7 @@ import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwa
 import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
 import PinningUtils from "../../../utils/PinningUtils.ts";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
 
 const AVATAR_SIZE = "32px";
 
@@ -152,6 +153,8 @@ function PinMenu({ event, room, permalinkCreator }: PinMenuProps): JSX.Element {
      * View the event in the timeline.
      */
     const onViewInTimeline = useCallback(() => {
+        PosthogTrackers.trackInteraction("PinnedMessageListViewTimeline");
+
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             event_id: event.getId(),
@@ -173,6 +176,7 @@ function PinMenu({ event, room, permalinkCreator }: PinMenuProps): JSX.Element {
      */
     const onUnpin = useCallback(async (): Promise<void> => {
         await PinningUtils.pinOrUnpinEvent(matrixClient, event);
+        PosthogTrackers.trackPinUnpinMessage("Unpin", "MessagePinningList");
     }, [event, matrixClient]);
 
     const contentActionable = isContentActionable(event);

src/components/views/rooms/PinnedMessageBanner.tsx

@@ -32,6 +32,7 @@ import dis from "../../../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import MessageEvent from "../messages/MessageEvent";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
 
 /**
  * The props for the {@link PinnedMessageBanner} component.
@@ -68,6 +69,8 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
     const shouldUseMessageEvent = pinnedEvent.isRedacted() || pinnedEvent.isDecryptionFailure();
 
     const onBannerClick = (): void => {
+        PosthogTrackers.trackInteraction("PinnedMessageBannerClick");
+
         // Scroll to the pinned message
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
@@ -309,6 +312,9 @@ function BannerButton({ room }: BannerButtonProps): JSX.Element {
             className="mx_PinnedMessageBanner_actions"
             kind="tertiary"
             onClick={() => {
+                if (isPinnedMessagesPhase) PosthogTrackers.trackInteraction("PinnedMessageBannerCloseListButton");
+                else PosthogTrackers.trackInteraction("PinnedMessageBannerViewAllButton");
+
                 RightPanelStore.instance.showOrHidePhase(RightPanelPhases.PinnedMessages);
             }}
         >

yarn.lock

@@ -1893,10 +1893,10 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
-"@matrix-org/analytics-events@^0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.24.0.tgz#21a64537ac975b18e1eb13d9fd0bdc7d448a6039"
-  integrity sha512-3FDdtqZ+5cMqVffWjFNOIQ7RDFN6XS11kqdtN2ps8uvq5ce8gT0yXQvK37WeKWKZZ5QAKeoMzGhud+lsVcb1xg==
+"@matrix-org/analytics-events@^0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.25.0.tgz#b0b85297dc05a67feaf89cc5d70b80283c988141"
+  integrity sha512-UCTuMjlJGArMqG9qXGfeNz/XtZDFldwuO+dkqP6Wo1nVdWasoWAOlcimDWQ2JnNFCg+UDZU+HLBdS5juTd6xTg==
 
 "@matrix-org/emojibase-bindings@^1.1.2":
   version "1.1.3"