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

Add analytics event for pinned messages

Browse source
This commit is contained in:
Florian Duros 2024-09-05 16:11:55 +02:00
parent bce710e34e
commit 08d1b6ceae
No known key found for this signature in database
GPG key ID: A5BBB4041B493F15
8 changed files with 48 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/PosthogTrackers.ts
View file

@ -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 }> {

14
src/TextForEvent.tsx
View file

@ -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>

7
src/components/views/context_menus/MessageContextMenu.tsx
View file

@ -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)}
/>
);
}

2
src/components/views/dialogs/UnpinAllDialog.tsx
View file

@ -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);
}

8
src/components/views/messages/MessageActionBar.tsx
View file

@ -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"
>

1
src/components/views/right_panel/RoomSummaryCard.tsx
View file

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

4
src/components/views/rooms/PinnedEventTile.tsx
View file

@ -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);

6
src/components/views/rooms/PinnedMessageBanner.tsx
View file

@ -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);
}}
>