makeplane · prateekshourya29 · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025
diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts
@@ -12,19 +12,6 @@ export type EventProps = {
   path?: string;
 };
 
-export const getProjectEventPayload = (payload: any) => ({
-  workspace_id: payload.workspace_id,
-  project_id: payload.id,
-  identifier: payload.identifier,
-  project_visibility: payload.network == 2 ? "Public" : "Private",
-  changed_properties: payload.changed_properties,
-  lead_id: payload.project_lead,
-  created_at: payload.created_at,
-  updated_at: payload.updated_at,
-  state: payload.state,
-  element: payload.element,
-});
-
 export const getPageEventPayload = (payload: any) => ({
   workspace_id: payload.workspace_id,
   project_id: payload.project,
@@ -119,6 +106,19 @@ export const PROJECT_TRACKER_EVENTS = {
   delete: "project_deleted",
 };
 
+export const PROJECT_TRACKER_ELEMENTS = {
+  EXTENDED_SIDEBAR_ADD_BUTTON: "extended_sidebar_add_project_button",
+  SIDEBAR_CREATE_PROJECT_BUTTON: "sidebar_create_project_button",
+  SIDEBAR_CREATE_PROJECT_TOOLTIP: "sidebar_create_project_tooltip",
+  COMMAND_PALETTE_CREATE_BUTTON: "command_palette_create_project_button",
+  COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON: "command_palette_shortcut_create_project_button",
+  EMPTY_STATE_CREATE_PROJECT_BUTTON: "empty_state_create_project_button",
+  CREATE_HEADER_BUTTON: "create_project_header_button",
+  CREATE_FIRST_PROJECT_BUTTON: "create_first_project_button",
+  DELETE_PROJECT_BUTTON: "delete_project_button",
+  UPDATE_PROJECT_BUTTON: "update_project_button",
+};
+
 export const CYCLE_TRACKER_EVENTS = {
   create: "cycle_created",
   update: "cycle_updated",

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -4,14 +4,15 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // plane package imports
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { type TabItem, Tabs } from "@plane/ui";
 // components
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
 import { PageHead } from "@/components/core";
 import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette, useEventTracker, useProject, useUserPermissions, useWorkspace } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";
@@ -103,6 +104,7 @@ const AnalyticsPage = observer((props: Props) => {
                   onClick={() => {
                     setTrackElement("Analytics empty state");
                     toggleCreateProjectModal(true);
+                    captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
                   }}
                   disabled={!canPerformEmptyStateActions}
                 />

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { Plus, Search } from "lucide-react";
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 import { cn, copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
@@ -122,6 +122,7 @@ export const ExtendedProjectSidebar = observer(() => {
               <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
                 <button
                   type="button"
+                  data-ph-element={PROJECT_TRACKER_ELEMENTS.EXTENDED_SIDEBAR_ADD_BUTTON}
                   className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
                   onClick={() => {
                     setIsProjectModalOpen(true);

diff --git a/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx b/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -2,6 +2,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
+import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { useCommandPalette } from "@/hooks/store";
@@ -27,7 +28,11 @@ const ProjectSettingsPage = () => {
         <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("neutral-primary", "sm"))}>
           Learn more about projects
         </Link>
-        <Button size="sm" onClick={() => toggleCreateProjectModal(true)}>
+        <Button
+          size="sm"
+          onClick={() => toggleCreateProjectModal(true)}
+          data-ph-element={PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON}
+        >
           Start your first project
         </Button>
       </div>

diff --git a/web/ce/components/projects/create/root.tsx b/web/ce/components/projects/create/root.tsx
@@ -12,7 +12,8 @@ import ProjectCommonAttributes from "@/components/project/create/common-attribut
 import ProjectCreateHeader from "@/components/project/create/header";
 import ProjectCreateButtons from "@/components/project/create/project-create-buttons";
 // hooks
-import { useEventTracker, useProject } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web types
 import { TProject } from "@/plane-web/types/projects";
@@ -32,7 +33,6 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
   const { setToFavorite, workspaceSlug, data, onClose, handleNextStep, updateCoverImageStatus } = props;
   // store
   const { t } = useTranslation();
-  const { captureProjectEvent } = useEventTracker();
   const { addProjectToFavorites, createProject } = useProject();
   // states
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
@@ -70,25 +70,30 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
         if (coverImage) {
           await updateCoverImageStatus(res.id, coverImage);
         }
-        const newPayload = {
-          ...res,
-          state: "SUCCESS",
-        };
-        captureProjectEvent({
+        captureSuccess({
           eventName: PROJECT_TRACKER_EVENTS.create,
-          payload: newPayload,
+          payload: {
+            identifier: formData.identifier,
+          },
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("success"),
           message: t("project_created_successfully"),
         });
+
         if (setToFavorite) {
           handleAddToFavorites(res.id);
         }
         handleNextStep(res.id);
       })
       .catch((err) => {
+        captureError({
+          eventName: PROJECT_TRACKER_EVENTS.create,
+          payload: {
+            identifier: formData.identifier,
+          },
+        });
         if (err?.data.code === "PROJECT_NAME_ALREADY_EXIST") {
           setToast({
             type: TOAST_TYPE.ERROR,

diff --git a/web/ce/helpers/command-palette.ts b/web/ce/helpers/command-palette.ts
@@ -1,5 +1,5 @@
 // types
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
 // store
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -24,7 +24,10 @@ export const getWorkspaceShortcutsList: () => TCommandPaletteActionList = () =>
     p: {
       title: "Create a new project",
       description: "Create a new project in the current workspace",
-      action: () => toggleCreateProjectModal(true),
+      action: () => {
+        toggleCreateProjectModal(true);
+        captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON });
+      },
     },
   };
 };

diff --git a/web/core/components/command-palette/command-modal.tsx b/web/core/components/command-palette/command-modal.tsx
@@ -8,7 +8,12 @@ import useSWR from "swr";
 import { CommandIcon, FolderPlus, Search, Settings, X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_DEFAULT_SEARCH_RESULT } from "@plane/constants";
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  PROJECT_TRACKER_ELEMENTS,
+  WORKSPACE_DEFAULT_SEARCH_RESULT,
+} from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IWorkspaceSearchResults } from "@plane/types";
 import { LayersIcon, Loader, ToggleSwitch } from "@plane/ui";
@@ -28,6 +33,7 @@ import {
 import { SimpleEmptyState } from "@/components/empty-state";
 // helpers
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import {
   useCommandPalette,
   useEventTracker,
@@ -364,7 +370,7 @@ export const CommandModal: React.FC = observer(() => {
                               <Command.Item
                                 onSelect={() => {
                                   closePalette();
-                                  setTrackElement("Command palette");
+                                  captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.COMMAND_PALETTE_CREATE_BUTTON });
                                   toggleCreateProjectModal(true);
                                 }}
                                 className="focus:outline-none"

diff --git a/web/core/components/home/widgets/empty-states/no-projects.tsx b/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -5,12 +5,13 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { Briefcase, Check, Hotel, Users, X } from "lucide-react";
 // plane ui
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { cn, getFileURL } from "@plane/utils";
 // helpers
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import {
   useCommandPalette,
   useEventTracker,
@@ -61,6 +62,7 @@ export const NoProjectsEmptyState = observer(() => {
           e.stopPropagation();
           setTrackElement("Sidebar");
           toggleCreateProjectModal(true);
+          captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
         },
         disabled: !canCreateProject,
       },

diff --git a/web/core/components/integration/jira/give-details.tsx b/web/core/components/integration/jira/give-details.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useFormContext, Controller } from "react-hook-form";
 import { Plus } from "lucide-react";
+import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { IJiraImporterForm } from "@plane/types";
 // hooks
 // components
@@ -201,6 +202,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                 <div>
                   <button
                     type="button"
+                    data-ph-element={PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON}
                     onClick={() => {
                       setTrackElement("Jira import detail page");
                       toggleCreateProjectModal(true);

diff --git a/web/core/components/issues/issue-layouts/empty-states/global-view.tsx b/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -1,11 +1,17 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssuesStoreType, EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants";
+import {
+  EIssuesStoreType,
+  EUserPermissionsLevel,
+  EUserWorkspaceRoles,
+  PROJECT_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
 import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
@@ -47,6 +53,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
             onClick={() => {
               setTrackElement("All issues empty state");
               toggleCreateProjectModal(true);
+              captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
             }}
             disabled={!hasMemberLevelPermission}
           />

diff --git a/web/core/components/issues/workspace-draft/root.tsx b/web/core/components/issues/workspace-draft/root.tsx
@@ -4,12 +4,13 @@ import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
-import { EDraftIssuePaginationType } from "@plane/constants";
+import { EDraftIssuePaginationType, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants/src/user";
 import { useTranslation } from "@plane/i18n";
 // components
 import { cn } from "@plane/utils";
 import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
+import { captureClick } from "@/helpers/event-tracker.helper";
 // constants
 
 // helpers
@@ -76,6 +77,7 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
             description={t("workspace_projects.empty_state.no_projects.primary_button.comic.description")}
             onClick={() => {
               toggleCreateProjectModal(true);
+              captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
             }}
             disabled={!hasMemberLevelPermission}
           />

diff --git a/web/core/components/project/card-list.tsx b/web/core/components/project/card-list.tsx
@@ -1,15 +1,16 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 // plane imports
-import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { EUserPermissionsLevel, EUserPermissions, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ContentWrapper } from "@plane/ui";
 // components
 import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 import { ProjectCard } from "@/components/project";
 import { ProjectsLoader } from "@/components/ui";
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useProjectFilter, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useProject, useProjectFilter, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // assets
 import AllFiltersImage from "@/public/empty-state/project/all-filters.svg";
@@ -26,7 +27,6 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
   const { t } = useTranslation();
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const {
     loader,
     fetchStatus,
@@ -65,8 +65,8 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
             title={t("workspace_projects.empty_state.general.primary_button.comic.title")}
             description={t("workspace_projects.empty_state.general.primary_button.comic.description")}
             onClick={() => {
-              setTrackElement("Project empty state");
               toggleCreateProjectModal(true);
+              captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
             }}
             disabled={!canPerformEmptyStateActions}
           />

diff --git a/web/core/components/project/delete-project-modal.tsx b/web/core/components/project/delete-project-modal.tsx
@@ -12,7 +12,8 @@ import type { IProject } from "@plane/types";
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 // hooks
-import { useEventTracker, useProject } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 
 type DeleteProjectModal = {
@@ -29,7 +30,6 @@ const defaultValues = {
 export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
   const { isOpen, project, onClose } = props;
   // store hooks
-  const { captureProjectEvent } = useEventTracker();
   const { deleteProject } = useProject();
   // router
   const router = useAppRouter();
@@ -62,9 +62,11 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
         if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
 
         handleClose();
-        captureProjectEvent({
+        captureSuccess({
           eventName: PROJECT_TRACKER_EVENTS.delete,
-          payload: { ...project, state: "SUCCESS", element: "Project general settings" },
+          payload: {
+            id: project.id,
+          },
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -73,9 +75,11 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
         });
       })
       .catch(() => {
-        captureProjectEvent({
+        captureError({
           eventName: PROJECT_TRACKER_EVENTS.delete,
-          payload: { ...project, state: "FAILED", element: "Project general settings" },
+          payload: {
+            id: project.id,
+          },
         });
         setToast({
           type: TOAST_TYPE.ERROR,