From 582ac0e5fcacbfcec7a1496cc726248c63ba5997 Mon Sep 17 00:00:00 2001 From: FunamaYukina Date: Fri, 20 Dec 2024 11:29:09 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88=20Add=20click=20logging=20for=20to?= =?UTF-8?q?olbar=20actions=20and=20include=20show=20mode=20in=20event=20da?= =?UTF-8?q?ta?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.changeset/six-rocks-shake.md | 6 ++++++ .../Toolbar/FitviewButton/FitviewButton.tsx | 9 ++++++++- .../Toolbar/ShowModeMenu/ShowModeMenu.tsx | 6 ++++++ .../Toolbar/TidyUpButton/TidyUpButton.tsx | 9 ++++++++- .../Toolbar/ZoomControls/ZoomControls.tsx | 17 ++++++++++++++-- .../erd-core/src/features/gtm/utils/index.ts | 1 + .../gtm/utils/toolbarActionLogEvent.ts | 20 +++++++++++++++++++ 7 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 frontend/.changeset/six-rocks-shake.md create mode 100644 frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts 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..ed52879d 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 { toolbarActionLogEvent } 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(() => { + toolbarActionLogEvent({ + 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..d9b91dd7 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 { toolbarActionLogEvent } 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) + + toolbarActionLogEvent({ + 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..cafe7585 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 { toolbarActionLogEvent } 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(() => { + toolbarActionLogEvent({ + element: 'tidyUp', + 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..c1054684 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 { toolbarActionLogEvent } 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(() => { + toolbarActionLogEvent({ + element: 'zoom', + zoomLevel: zoomLevel.toFixed(2), + showMode: showMode, + }) zoomOut() - }, [zoomOut]) + }, [zoomOut, zoomLevel, showMode]) const handleClickZoomIn = useCallback(() => { + toolbarActionLogEvent({ + 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/index.ts b/frontend/packages/erd-core/src/features/gtm/utils/index.ts index fff2e7bd..d89efbd1 100644 --- a/frontend/packages/erd-core/src/features/gtm/utils/index.ts +++ b/frontend/packages/erd-core/src/features/gtm/utils/index.ts @@ -1 +1,2 @@ export * from './clickLogEvent' +export * from './toolbarActionLogEvent' diff --git a/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts b/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts new file mode 100644 index 00000000..46f5be35 --- /dev/null +++ b/frontend/packages/erd-core/src/features/gtm/utils/toolbarActionLogEvent.ts @@ -0,0 +1,20 @@ +import { pushToDataLayer } from './pushToDataLayer' + +type ToolbarActionLogEvent = { + element: string + zoomLevel?: string + showMode?: string +} + +export const toolbarActionLogEvent = ({ + element, + zoomLevel, + showMode, +}: ToolbarActionLogEvent) => { + pushToDataLayer({ + event: 'click', + element, + zoomLevel, + showMode, + }) +}