Cloud/tracking v2 (#6400)

## Summary

<!-- One sentence describing what changed and why. -->

## Changes

- **What**: <!-- Core functionality added/modified -->
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6400-Cloud-tracking-v2-29c6d73d365081a1ae32e9337f510a9e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Arjan Singh <[email protected]>

Author: christian-byrne

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -43,8 +43,10 @@ import Tag from 'primevue/tag'
 import { onBeforeUnmount, ref } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
 
 const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
 
 const {
   amount,
@@ -61,8 +63,11 @@ const didClickBuyNow = ref(false)
 const loading = ref(false)
 
 const handleBuyNow = async () => {
+  const creditAmount = editable ? customAmount.value : amount
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
   loading.value = true
-  await authActions.purchaseCredits(editable ? customAmount.value : amount)
+  await authActions.purchaseCredits(creditAmount)
   loading.value = false
   didClickBuyNow.value = true
 }

src/components/searchbox/NodeSearchBox.vue

@@ -51,7 +51,7 @@
       multiple
       :option-label="'display_name'"
       @complete="search($event.query)"
-      @option-select="emit('addNode', $event.value)"
+      @option-select="onAddNode($event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
     >
       <template #option="{ option }">
@@ -78,6 +78,7 @@
 </template>
 
 <script setup lang="ts">
+import { debounce } from 'es-toolkit/compat'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
@@ -88,6 +89,7 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
@@ -96,6 +98,7 @@ import SearchFilterChip from '../common/SearchFilterChip.vue'
 
 const settingStore = useSettingStore()
 const { t } = useI18n()
+const telemetry = useTelemetry()
 
 const enableNodePreview = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview')
@@ -118,6 +121,14 @@ const placeholder = computed(() => {
 
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
+
+// Debounced search tracking (500ms as per implementation plan)
+const debouncedTrackSearch = debounce((query: string) => {
+  if (query.trim()) {
+    telemetry?.trackNodeSearch({ query })
+  }
+}, 500)
+
 const search = (query: string) => {
   const queryIsEmpty = query === '' && filters.length === 0
   currentQuery.value = query
@@ -128,10 +139,22 @@ const search = (query: string) => {
           limit: searchLimit
         })
       ]
+
+  // Track search queries with debounce
+  debouncedTrackSearch(query)
 }
 
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
+// Track node selection and emit addNode event
+const onAddNode = (nodeDef: ComfyNodeDefImpl) => {
+  telemetry?.trackNodeSearchResultSelected({
+    node_type: nodeDef.name,
+    last_query: currentQuery.value
+  })
+  emit('addNode', nodeDef)
+}
+
 let inputElement: HTMLInputElement | null = null
 const reFocusInput = async () => {
   inputElement ??= document.getElementById(inputId) as HTMLInputElement

src/composables/useTemplateFiltering.ts

@@ -1,9 +1,11 @@
 import { refDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { debounce } from 'es-toolkit/compat'
 
 export function useTemplateFiltering(
   templates: Ref<TemplateInfo[]> | TemplateInfo[]
@@ -212,6 +214,38 @@ export function useTemplateFiltering(
   const filteredCount = computed(() => filteredTemplates.value.length)
   const totalCount = computed(() => templatesArray.value.length)
 
+  // Template filter tracking (debounced to avoid excessive events)
+  const debouncedTrackFilterChange = debounce(() => {
+    useTelemetry()?.trackTemplateFilterChanged({
+      search_query: searchQuery.value || undefined,
+      selected_models: selectedModels.value,
+      selected_use_cases: selectedUseCases.value,
+      selected_licenses: selectedLicenses.value,
+      sort_by: sortBy.value,
+      filtered_count: filteredCount.value,
+      total_count: totalCount.value
+    })
+  }, 500)
+
+  // Watch for filter changes and track them
+  watch(
+    [searchQuery, selectedModels, selectedUseCases, selectedLicenses, sortBy],
+    () => {
+      // Only track if at least one filter is active (to avoid tracking initial state)
+      const hasActiveFilters =
+        searchQuery.value.trim() !== '' ||
+        selectedModels.value.length > 0 ||
+        selectedUseCases.value.length > 0 ||
+        selectedLicenses.value.length > 0 ||
+        sortBy.value !== 'default'
+
+      if (hasActiveFilters) {
+        debouncedTrackFilterChange()
+      }
+    },
+    { deep: true }
+  )
+
   return {
     // State
     searchQuery,

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -1,4 +1,5 @@
 import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -13,6 +14,8 @@ export const useWorkflowTemplateSelectorDialog = () => {
   }
 
   function show() {
+    useTelemetry()?.trackTemplateLibraryOpened({ source: 'command' })
+
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
       component: WorkflowTemplateSelectorDialog,

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -37,6 +37,7 @@ const emit = defineEmits<{
 }>()
 
 const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
+const telemetry = useTelemetry()
 
 const isLoading = ref(false)
 const isPolling = ref(false)
@@ -62,6 +63,7 @@ const startPollingSubscriptionStatus = () => {
 
       if (isActiveSubscription.value) {
         stopPolling()
+        telemetry?.trackMonthlySubscriptionSucceeded()
         emit('subscribed')
       }
     } catch (error) {

src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts

@@ -3,18 +3,31 @@ import type { OverridedMixpanel } from 'mixpanel-browser'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
+import { app } from '@/scripts/app'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import { reduceAllNodes } from '@/utils/graphTraversalUtil'
+import { normalizeSurveyResponses } from '../../utils/surveyNormalization'
 
 import type {
   AuthMetadata,
+  CreditTopupMetadata,
   ExecutionContext,
   ExecutionErrorMetadata,
   ExecutionSuccessMetadata,
+  NodeSearchMetadata,
+  NodeSearchResultMetadata,
+  PageVisibilityMetadata,
   RunButtonProperties,
   SurveyResponses,
+  TabCountMetadata,
   TelemetryEventName,
   TelemetryEventProperties,
   TelemetryProvider,
-  TemplateMetadata
+  TemplateFilterMetadata,
+  TemplateLibraryMetadata,
+  TemplateMetadata,
+  WorkflowImportMetadata
 } from '../../types'
 import { TelemetryEvents } from '../../types'
 
@@ -123,6 +136,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.USER_AUTH_COMPLETED, metadata)
   }
 
+  trackUserLoggedIn(): void {
+    this.trackEvent(TelemetryEvents.USER_LOGGED_IN)
+  }
+
   trackSubscription(event: 'modal_opened' | 'subscribe_clicked'): void {
     const eventName =
       event === 'modal_opened'
@@ -132,6 +149,20 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(eventName)
   }
 
+  trackMonthlySubscriptionSucceeded(): void {
+    this.trackEvent(TelemetryEvents.MONTHLY_SUBSCRIPTION_SUCCEEDED)
+  }
+
+  trackApiCreditTopupButtonPurchaseClicked(amount: number): void {
+    const metadata: CreditTopupMetadata = {
+      credit_amount: amount
+    }
+    this.trackEvent(
+      TelemetryEvents.API_CREDIT_TOPUP_BUTTON_PURCHASE_CLICKED,
+      metadata
+    )
+  }
+
   trackRunButton(options?: { subscribe_to_run?: boolean }): void {
     const executionContext = this.getExecutionContext()
 
@@ -153,7 +184,21 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
         ? TelemetryEvents.USER_SURVEY_OPENED
         : TelemetryEvents.USER_SURVEY_SUBMITTED
 
-    this.trackEvent(eventName, responses)
+    // Apply normalization to survey responses
+    const normalizedResponses = responses
+      ? normalizeSurveyResponses(responses)
+      : undefined
+
+    this.trackEvent(eventName, normalizedResponses)
+
+    // If this is a survey submission, also set user properties with normalized data
+    if (stage === 'submitted' && normalizedResponses && this.mixpanel) {
+      try {
+        this.mixpanel.people.set(normalizedResponses)
+      } catch (error) {
+        console.error('Failed to set survey user properties:', error)
+      }
+    }
   }
 
   trackEmailVerification(stage: 'opened' | 'requested' | 'completed'): void {
@@ -178,6 +223,34 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.TEMPLATE_WORKFLOW_OPENED, metadata)
   }
 
+  trackTemplateLibraryOpened(metadata: TemplateLibraryMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_LIBRARY_OPENED, metadata)
+  }
+
+  trackWorkflowImported(metadata: WorkflowImportMetadata): void {
+    this.trackEvent(TelemetryEvents.WORKFLOW_IMPORTED, metadata)
+  }
+
+  trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
+    this.trackEvent(TelemetryEvents.PAGE_VISIBILITY_CHANGED, metadata)
+  }
+
+  trackTabCount(metadata: TabCountMetadata): void {
+    this.trackEvent(TelemetryEvents.TAB_COUNT_TRACKING, metadata)
+  }
+
+  trackNodeSearch(metadata: NodeSearchMetadata): void {
+    this.trackEvent(TelemetryEvents.NODE_SEARCH, metadata)
+  }
+
+  trackNodeSearchResultSelected(metadata: NodeSearchResultMetadata): void {
+    this.trackEvent(TelemetryEvents.NODE_SEARCH_RESULT_SELECTED, metadata)
+  }
+
+  trackTemplateFilterChanged(metadata: TemplateFilterMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_FILTER_CHANGED, metadata)
+  }
+
   trackWorkflowExecution(): void {
     const context = this.getExecutionContext()
     this.trackEvent(TelemetryEvents.EXECUTION_START, context)
@@ -194,8 +267,28 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
   getExecutionContext(): ExecutionContext {
     const workflowStore = useWorkflowStore()
     const templatesStore = useWorkflowTemplatesStore()
+    const nodeDefStore = useNodeDefStore()
     const activeWorkflow = workflowStore.activeWorkflow
 
+    // Calculate node metrics in a single traversal
+    const nodeMetrics = reduceAllNodes(
+      app.graph,
+      (acc, node) => {
+        const nodeDef = nodeDefStore.nodeDefsByName[node.type]
+        const isCustomNode =
+          nodeDef?.nodeSource?.type === NodeSourceType.CustomNodes
+        const isApiNode = nodeDef?.api_node === true
+        const isSubgraph = node.isSubgraphNode?.() === true
+
+        return {
+          custom_node_count: acc.custom_node_count + (isCustomNode ? 1 : 0),
+          api_node_count: acc.api_node_count + (isApiNode ? 1 : 0),
+          subgraph_count: acc.subgraph_count + (isSubgraph ? 1 : 0)
+        }
+      },
+      { custom_node_count: 0, api_node_count: 0, subgraph_count: 0 }
+    )
+
     if (activeWorkflow?.filename) {
       const isTemplate = templatesStore.knownTemplateNames.has(
         activeWorkflow.filename
@@ -218,19 +311,22 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
           template_tags: englishMetadata?.tags ?? template?.tags,
           template_models: englishMetadata?.models ?? template?.models,
           template_use_case: englishMetadata?.useCase ?? template?.useCase,
-          template_license: englishMetadata?.license ?? template?.license
+          template_license: englishMetadata?.license ?? template?.license,
+          ...nodeMetrics
         }
       }
 
       return {
         is_template: false,
-        workflow_name: activeWorkflow.filename
+        workflow_name: activeWorkflow.filename,
+        ...nodeMetrics
       }
     }
 
     return {
       is_template: false,
-      workflow_name: undefined
+      workflow_name: undefined,
+      ...nodeMetrics
     }
   }
 }