chore: project page tracker events

packages/constants/src/event-tracker/core.ts

@@ -186,8 +186,31 @@ export const PROJECT_PAGE_TRACKER_EVENTS = {
   create: "project_page_created",
   update: "project_page_updated",
   delete: "project_page_deleted",
+  archive: "project_page_archived",
+  restore: "project_page_restored",
+  lock: "project_page_locked",
+  unlock: "project_page_unlocked",
+  access_update: "project_page_access_updated",
+  duplicate: "project_page_duplicated",
+  favorite: "project_page_favorited",
+  unfavorite: "project_page_unfavorited",
+  move: "project_page_moved",
 };
 
+export const PROJECT_PAGE_TRACKER_ELEMENTS = {
+  COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON: "command_palette_shortcut_create_page_button",
+  EMPTY_STATE_CREATE_BUTTON: "empty_state_create_page_button",
+  COMMAND_PALETTE_CREATE_BUTTON: "command_palette_create_page_button",
+  CONTEXT_MENU: "page_context_menu",
+  QUICK_ACTIONS: "page_quick_actions",
+  LIST_ITEM: "page_list_item",
+  FAVORITE_BUTTON: "page_favorite_button",
+  ARCHIVE_BUTTON: "page_archive_button",
+  LOCK_BUTTON: "page_lock_button",
+  ACCESS_TOGGLE: "page_access_toggle",
+  DUPLICATE_BUTTON: "page_duplicate_button",
+} as const;
+
 export const MEMBER_TRACKER_EVENTS = {
   invite: "member_invited",
   accept: "member_accepted",

web/ce/components/pages/header/lock-control.tsx

@@ -4,7 +4,10 @@ import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
 // plane imports
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { Tooltip } from "@plane/ui";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -78,6 +81,7 @@ export const PageLockControl = observer(({ page }: Props) => {
           <button
             type="button"
             onClick={toggleLock}
+            data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
             className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
             aria-label="Lock"
           >
@@ -90,6 +94,7 @@ export const PageLockControl = observer(({ page }: Props) => {
         <button
           type="button"
           onClick={toggleLock}
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
           className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
           aria-label="Locked"
         >

web/ce/helpers/command-palette.ts

@@ -1,5 +1,5 @@
 // types
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
 // store
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -45,7 +45,10 @@ export const getProjectShortcutsList: () => TCommandPaletteActionList = () => {
     d: {
       title: "Create a new page",
       description: "Create a new page in the current project",
-      action: () => toggleCreatePageModal({ isOpen: true }),
+      action: () => {
+        toggleCreatePageModal({ isOpen: true });
+        captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON });
+      },
     },
     m: {
       title: "Create a new module",

web/core/components/command-palette/actions/project-actions.tsx

@@ -3,7 +3,7 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText, Layers } from "lucide-react";
 // hooks
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { DiceIcon } from "@plane/ui";
 // hooks
 import { useCommandPalette } from "@/hooks/store";
@@ -70,6 +70,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
       </Command.Group>
       <Command.Group heading="Page">
         <Command.Item
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.COMMAND_PALETTE_CREATE_BUTTON}
           onSelect={() => {
             closePalette();
             toggleCreatePageModal({ isOpen: true });

web/core/components/pages/dropdowns/actions.tsx

@@ -16,7 +16,7 @@ import {
   Trash2,
 } from "lucide-react";
 // constants
-import { EPageAccess } from "@plane/constants";
+import { EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
 // plane ui
@@ -26,6 +26,7 @@ import { cn } from "@plane/utils";
 import { DeletePageModal } from "@/components/pages";
 // helpers
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { usePageOperations } from "@/hooks/use-page-operations";
 // plane web components
 import { MovePageModal } from "@/plane-web/components/pages";
@@ -92,14 +93,24 @@ export const PageActions: React.FC<Props> = observer((props) => {
     const menuItems: (TContextMenuItem & { key: TPageActions })[] = [
       {
         key: "toggle-lock",
-        action: pageOperations.toggleLock,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
+          });
+          pageOperations.toggleLock();
+        },
         title: is_locked ? "Unlock" : "Lock",
         icon: is_locked ? LockKeyholeOpen : LockKeyhole,
         shouldRender: canCurrentUserLockPage,
       },
       {
         key: "toggle-access",
-        action: pageOperations.toggleAccess,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ACCESS_TOGGLE,
+          });
+          pageOperations.toggleAccess();
+        },
         title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
         icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
         shouldRender: canCurrentUserChangeAccess && !archived_at,
@@ -120,21 +131,36 @@ export const PageActions: React.FC<Props> = observer((props) => {
       },
       {
         key: "make-a-copy",
-        action: pageOperations.duplicate,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.DUPLICATE_BUTTON,
+          });
+          pageOperations.duplicate();
+        },
         title: "Make a copy",
         icon: Copy,
         shouldRender: canCurrentUserDuplicatePage,
       },
       {
         key: "archive-restore",
-        action: pageOperations.toggleArchive,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ARCHIVE_BUTTON,
+          });
+          pageOperations.toggleArchive();
+        },
         title: archived_at ? "Restore" : "Archive",
         icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
         shouldRender: canCurrentUserArchivePage,
       },
       {
         key: "delete",
-        action: () => setDeletePageModal(true),
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.CONTEXT_MENU,
+          });
+          setDeletePageModal(true);
+        },
         title: "Delete",
         icon: Trash2,
         shouldRender: canCurrentUserDeletePage && !!archived_at,

web/core/components/pages/header/favorite-control.tsx

@@ -1,6 +1,10 @@
 import { observer } from "mobx-react";
-// plane imports
+// constants
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+// ui
 import { FavoriteStar } from "@plane/ui";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -23,7 +27,12 @@ export const PageFavoriteControl = observer(({ page }: Props) => {
   return (
     <FavoriteStar
       selected={is_favorite}
-      onClick={pageOperations.toggleFavorite}
+      onClick={() => {
+        captureClick({
+          elementName: PROJECT_PAGE_TRACKER_ELEMENTS.FAVORITE_BUTTON,
+        });
+        pageOperations.toggleFavorite();
+      }}
       buttonClassName="flex-shrink-0 size-6 group rounded hover:bg-custom-background-80 transition-colors"
       iconClassName="size-3.5 text-custom-text-200 group-hover:text-custom-text-10"
     />

web/core/components/pages/list/block-item-action.tsx

@@ -3,12 +3,15 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Earth, Info, Lock, Minus } from "lucide-react";
+// constants
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 // ui
 import { Avatar, FavoriteStar, Tooltip } from "@plane/ui";
 import { renderFormattedDate, getFileURL } from "@plane/utils";
 // components
 import { PageActions } from "@/components/pages";
 // helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store";
 import { usePageOperations } from "@/hooks/use-page-operations";
@@ -64,6 +67,9 @@ export const BlockItemAction: FC<Props> = observer((props) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.FAVORITE_BUTTON,
+            });
             pageOperations.toggleFavorite();
           }}
           selected={is_favorite}

web/core/components/pages/modals/create-page-modal.tsx

@@ -7,7 +7,7 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { PageForm } from "@/components/pages";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
@@ -42,7 +42,6 @@ export const CreatePageModal: FC<Props> = (props) => {
   const router = useAppRouter();
   // store hooks
   const { createPage } = usePageStore(storeType);
-  const { capturePageEvent } = useEventTracker();
   const handlePageFormData = <T extends keyof TPage>(key: T, value: TPage[T]) =>
     setPageFormData((prev) => ({ ...prev, [key]: value }));
 
@@ -62,22 +61,19 @@ export const CreatePageModal: FC<Props> = (props) => {
     try {
       const pageData = await createPage(pageFormData);
       if (pageData) {
-        capturePageEvent({
+        captureSuccess({
           eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
           payload: {
-            ...pageData,
-            state: "SUCCESS",
+            id: pageData.id,
           },
         });
         handleStateClear();
         if (redirectionEnabled) router.push(`/${workspaceSlug}/projects/${projectId}/pages/${pageData.id}`);
       }
-    } catch {
-      capturePageEvent({
+    } catch (error: any) {
+      captureError({
         eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-        payload: {
-          state: "FAILED",
-        },
+        error,
       });
     }
   };

web/core/components/pages/modals/delete-page-modal.tsx

@@ -8,7 +8,7 @@ import { PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // plane web hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
@@ -28,7 +28,6 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
   const { removePage } = usePageStore(storeType);
-  const { capturePageEvent } = useEventTracker();
   if (!page || !page.id) return null;
   // derived values
   const { id: pageId, name } = page;
@@ -45,11 +44,10 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
     setIsDeleting(true);
     await removePage(pageId)
       .then(() => {
-        capturePageEvent({
+        captureSuccess({
           eventName: PROJECT_PAGE_TRACKER_EVENTS.delete,
           payload: {
-            ...page,
-            state: "SUCCESS",
+            id: pageId,
           },
         });
         handleClose();
@@ -64,11 +62,10 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         }
       })
       .catch(() => {
-        capturePageEvent({
+        captureError({
           eventName: PROJECT_PAGE_TRACKER_EVENTS.delete,
           payload: {
-            ...page,
-            state: "FAILED",
+            id: pageId,
           },
         });
         setToast({

web/core/components/pages/pages-list-main-content.tsx

@@ -1,12 +1,13 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 // plane imports
-import { EUserPermissionsLevel, EUserProjectRoles, EPageAccess } from "@plane/constants";
+import { EUserPermissionsLevel, EUserProjectRoles, EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { DetailedEmptyState } from "@/components/empty-state";
 import { PageLoader } from "@/components/pages";
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // plane web hooks
@@ -63,6 +64,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
             text: t("project_page.empty_state.general.primary_button.text"),
             onClick: () => {
               toggleCreatePageModal({ isOpen: true });
+              captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
           }}
@@ -79,6 +81,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
             text: t("project_page.empty_state.public.primary_button.text"),
             onClick: () => {
               toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
+              captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
           }}
@@ -94,6 +97,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
             text: t("project_page.empty_state.private.primary_button.text"),
             onClick: () => {
               toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
+              captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
           }}