diff --git a/frontend/.changeset/six-rocks-shake.md b/frontend/.changeset/six-rocks-shake.md new file mode 100644 index 00000000..bb6b1186 --- /dev/null +++ b/frontend/.changeset/six-rocks-shake.md @@ -0,0 +1,6 @@ +--- +"@liam-hq/erd-core": patch +"@liam-hq/cli": patch +--- + +📈 Add click logging for toolbar actions and include show mode in event data diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx index 0f60c10d..cf977516 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx @@ -1,3 +1,5 @@ +import { clickLogEvent } from '@/features/gtm/utils' +import { useUserEditingStore } from '@/stores' import { IconButton, Scan } from '@liam-hq/ui' import { ToolbarButton } from '@radix-ui/react-toolbar' import { useReactFlow } from '@xyflow/react' @@ -5,10 +7,15 @@ import { type FC, useCallback } from 'react' export const FitviewButton: FC = () => { const { fitView } = useReactFlow() + const { showMode } = useUserEditingStore() const handleClick = useCallback(() => { + clickLogEvent({ + element: 'fitview', + showMode: showMode, + }) fitView() - }, [fitView]) + }, [fitView, showMode]) return ( diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx index cf9df946..8d7bd4d9 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ShowModeMenu/ShowModeMenu.tsx @@ -1,3 +1,4 @@ +import { clickLogEvent } from '@/features/gtm/utils' import { type ShowMode, showModeSchema } from '@/schemas/showMode' import { updateShowMode, useUserEditingStore } from '@/stores' import { @@ -28,6 +29,11 @@ export const ShowModeMenu: FC = () => { if (parsed.success) { updateShowMode(parsed.output) + + clickLogEvent({ + element: 'changeShowMode', + showMode: value, + }) } }, []) diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx index f60179dc..bc401483 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx @@ -1,3 +1,5 @@ +import { clickLogEvent } from '@/features/gtm/utils' +import { useUserEditingStore } from '@/stores' import { IconButton, TidyUpIcon } from '@liam-hq/ui' import { ToolbarButton } from '@radix-ui/react-toolbar' import { type FC, useCallback } from 'react' @@ -5,9 +7,14 @@ import { useAutoLayout } from '../../useAutoLayout' export const TidyUpButton: FC = () => { const { handleLayout } = useAutoLayout() + const { showMode } = useUserEditingStore() const handleClick = useCallback(() => { + clickLogEvent({ + element: 'fitview', + showMode: showMode, + }) handleLayout() - }, [handleLayout]) + }, [handleLayout, showMode]) return ( diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx index 27133979..a5334cfb 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/ZoomControls/ZoomControls.tsx @@ -1,3 +1,5 @@ +import { clickLogEvent } from '@/features/gtm/utils' +import { useUserEditingStore } from '@/stores' import { IconButton, Minus, Plus } from '@liam-hq/ui' import { ToolbarButton } from '@radix-ui/react-toolbar' import { useReactFlow, useStore } from '@xyflow/react' @@ -7,14 +9,25 @@ import styles from './ZoomControls.module.css' export const ZoomControls: FC = () => { const zoomLevel = useStore((store) => store.transform[2]) const { zoomIn, zoomOut } = useReactFlow() + const { showMode } = useUserEditingStore() const handleClickZoomOut = useCallback(() => { + clickLogEvent({ + element: 'zoom', + zoomLevel: zoomLevel.toFixed(2), + showMode: showMode, + }) zoomOut() - }, [zoomOut]) + }, [zoomOut, zoomLevel, showMode]) const handleClickZoomIn = useCallback(() => { + clickLogEvent({ + element: 'zoom', + zoomLevel: zoomLevel.toFixed(2), + showMode: showMode, + }) zoomIn() - }, [zoomIn]) + }, [zoomIn, zoomLevel, showMode]) return (
diff --git a/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts index 056ecbb7..d9b17509 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts +++ b/frontend/packages/erd-core/src/features/gtm/utils/clickLogEvent.ts @@ -2,11 +2,19 @@ import { pushToDataLayer } from './pushToDataLayer' type ClickLogEvent = { element: string + zoomLevel?: string + showMode?: string } -export const clickLogEvent = ({ element }: ClickLogEvent) => { +export const clickLogEvent = ({ + element, + zoomLevel, + showMode, +}: ClickLogEvent) => { pushToDataLayer({ event: 'click', element, + zoomLevel, + showMode, }) }