📈 Add click logging for toolbar actions and include show mode in even…

…t data

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

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/FitviewButton/FitviewButton.tsx

@@ -1,14 +1,21 @@
+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'
 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 (
     <ToolbarButton asChild onClick={handleClick}>

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,
+      })
     }
   }, [])
 

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx

@@ -1,13 +1,20 @@
+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'
 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 (
     <ToolbarButton asChild>

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 (
     <div className={styles.wrapper}>

frontend/packages/erd-core/src/features/gtm/utils/index.ts

@@ -1 +1,2 @@
 export * from './clickLogEvent'
+export * from './toolbarActionLogEvent'

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,
+  })
+}