feat(telemetry): instrument cloud funnel gaps + enable cloud web analytics

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -544,6 +544,13 @@ const allTemplates = computed(() => {
 // Navigation
 const selectedNavItem = ref<string | null>(initialCategory)
 
+// Track category/tab switches (e.g. "Getting Started" vs "All") so we can see
+// which curated entry points users browse before opening a template.
+watch(selectedNavItem, (to, from) => {
+  if (!to || to === from) return
+  useTelemetry()?.trackTemplateCategorySelected({ category_id: to })
+})
+
 // Filter templates based on selected navigation item
 const navigationFilteredTemplates = computed(() => {
   if (!selectedNavItem.value) {

src/platform/cloud/subscription/components/PricingTable.test.ts

@@ -30,6 +30,8 @@ const mockIsYearlySubscription = ref(false)
 const mockAccessBillingPortal = vi.fn()
 const mockReportError = vi.fn()
 const mockTrackBeginCheckout = vi.fn()
+const mockTrackSubscription = vi.fn()
+const mockTrackBillingCycleToggled = vi.fn()
 const mockUserId = ref<string | undefined>('user-123')
 const mockGetAuthHeader = vi.fn(() =>
   Promise.resolve({ Authorization: 'Bearer test-token' })
@@ -111,7 +113,9 @@ vi.mock('@/stores/authStore', () => ({
 
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: () => ({
-    trackBeginCheckout: mockTrackBeginCheckout
+    trackBeginCheckout: mockTrackBeginCheckout,
+    trackSubscription: mockTrackSubscription,
+    trackBillingCycleToggled: mockTrackBillingCycleToggled
   })
 }))
 
@@ -222,6 +226,8 @@ describe('PricingTable', () => {
     mockAccessBillingPortal.mockReset()
     mockAccessBillingPortal.mockResolvedValue(true)
     mockTrackBeginCheckout.mockReset()
+    mockTrackSubscription.mockReset()
+    mockTrackBillingCycleToggled.mockReset()
     mockLocalStorage.__reset()
     vi.mocked(global.fetch).mockResolvedValue({
       ok: true,
@@ -439,4 +445,95 @@ describe('PricingTable', () => {
       expect(onChooseTeamWorkspace).toHaveBeenCalledOnce()
     })
   })
+
+  describe('subscribe-now click telemetry', () => {
+    it('fires subscribe_clicked with tier/cycle/source on the new-subscriber path', async () => {
+      mockIsActiveSubscription.value = false
+
+      const windowOpenSpy = vi
+        .spyOn(window, 'open')
+        .mockImplementation(() => null)
+
+      renderComponent()
+      await flushPromises()
+
+      const creatorButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Creator'))
+
+      await userEvent.click(creatorButton!)
+      await flushPromises()
+
+      expect(mockTrackSubscription).toHaveBeenCalledWith('subscribe_clicked', {
+        current_tier: undefined,
+        tier: 'creator',
+        cycle: 'yearly',
+        source: 'pricing_table'
+      })
+
+      windowOpenSpy.mockRestore()
+    })
+
+    it('fires subscribe_clicked on the change path for an existing subscriber', async () => {
+      mockIsActiveSubscription.value = true
+      mockSubscriptionTier.value = 'STANDARD'
+
+      renderComponent()
+      await flushPromises()
+
+      const proButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Pro'))
+
+      await userEvent.click(proButton!)
+      await flushPromises()
+
+      expect(mockTrackSubscription).toHaveBeenCalledWith('subscribe_clicked', {
+        current_tier: 'standard',
+        tier: 'pro',
+        cycle: 'yearly',
+        source: 'pricing_table'
+      })
+    })
+
+    it('does not fire subscribe_clicked when clicking the current plan', async () => {
+      mockIsActiveSubscription.value = true
+      mockSubscriptionTier.value = 'CREATOR'
+
+      renderComponent()
+      await flushPromises()
+
+      const currentPlanButton = screen
+        .getAllByRole('button')
+        .find((b) => b.textContent?.includes('Current Plan'))
+
+      await userEvent.click(currentPlanButton!)
+      await flushPromises()
+
+      expect(mockTrackSubscription).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('billing cycle toggle telemetry', () => {
+    it('fires billing_cycle_toggled with from/to when switching to monthly', async () => {
+      renderComponent()
+      await flushPromises()
+
+      const monthlyToggle = screen.getByRole('button', { name: 'Monthly' })
+      await userEvent.click(monthlyToggle)
+      await flushPromises()
+
+      expect(mockTrackBillingCycleToggled).toHaveBeenCalledWith({
+        from: 'yearly',
+        to: 'monthly'
+      })
+    })
+
+    it('does not fire on initial render when the cycle has not changed', async () => {
+      renderComponent()
+      await flushPromises()
+
+      expect(mockTrackBillingCycleToggled).not.toHaveBeenCalled()
+    })
+  })
 })

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

@@ -258,7 +258,7 @@ import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
 import SelectButton from 'primevue/selectbutton'
 import type { ToggleButtonPassThroughMethodOptions } from 'primevue/togglebutton'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -374,6 +374,13 @@ const loadingTier = ref<CheckoutTierKey | null>(null)
 const popover = ref()
 const currentBillingCycle = ref<BillingCycle>('yearly')
 
+// Track monthly/yearly toggles so we can see whether the annual-discount
+// nudge actually moves the cycle selection before checkout.
+watch(currentBillingCycle, (to, from) => {
+  if (!isCloud || to === from) return
+  telemetry?.trackBillingCycleToggled({ from, to })
+})
+
 const hasPaidSubscription = computed(
   () => isActiveSubscription.value && !isFreeTier.value
 )
@@ -448,6 +455,16 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
     isLoading.value = true
     loadingTier.value = tierKey
 
+    // Fire the subscribe-now click before opening checkout so the funnel
+    // captures intent even if the checkout window is blocked or abandoned.
+    // Covers both the 'change' (existing paid subscriber) and 'new' paths.
+    telemetry?.trackSubscription('subscribe_clicked', {
+      current_tier: subscriptionTier.value?.toLowerCase(),
+      tier: tierKey,
+      cycle: currentBillingCycle.value,
+      source: 'pricing_table'
+    })
+
     try {
       if (hasPaidSubscription.value) {
         const targetPlan = {

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

@@ -55,7 +55,8 @@ watch(
 const handleSubscribe = () => {
   if (isCloud) {
     useTelemetry()?.trackSubscription('subscribe_clicked', {
-      current_tier: subscriptionTier.value?.toLowerCase()
+      current_tier: subscriptionTier.value?.toLowerCase(),
+      source: 'subscribe_button'
     })
   }
   isAwaitingStripeSubscription.value = true

src/platform/cloud/subscription/components/SubscribeToRun.test.ts

@@ -10,6 +10,8 @@ import SubscribeToRun from './SubscribeToRun.vue'
 const mockShowSubscriptionDialog = vi.fn()
 const mockCanManageSubscription = ref(true)
 const mockIsMdOrLarger = ref(true)
+const mockTrackRunButton = vi.fn()
+const mockTrackSubscription = vi.fn()
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
@@ -30,7 +32,10 @@ vi.mock('@/platform/distribution/types', () => ({
 }))
 
 vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => null
+  useTelemetry: () => ({
+    trackRunButton: mockTrackRunButton,
+    trackSubscription: mockTrackSubscription
+  })
 }))
 
 vi.mock('@vueuse/core', async (importOriginal) => {
@@ -111,4 +116,15 @@ describe('SubscribeToRun', () => {
 
     expect(mockShowSubscriptionDialog).toHaveBeenCalledOnce()
   })
+
+  it('tracks both the run button and a subscribe-now click on click', async () => {
+    const { user } = renderButton()
+
+    await user.click(screen.getByTestId('subscribe-to-run-button'))
+
+    expect(mockTrackRunButton).toHaveBeenCalledWith({ subscribe_to_run: true })
+    expect(mockTrackSubscription).toHaveBeenCalledWith('subscribe_clicked', {
+      source: 'subscribe_to_run'
+    })
+  })
 })

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

@@ -50,7 +50,14 @@ const buttonTooltip = computed(() =>
 
 function handleSubscribeToRun() {
   if (isCloud) {
-    useTelemetry()?.trackRunButton({ subscribe_to_run: true })
+    const telemetry = useTelemetry()
+    telemetry?.trackRunButton({ subscribe_to_run: true })
+    // Also count this as a subscribe-now click so the lock-button CTA shows up
+    // in the subscribe-click funnel alongside the pricing table and the
+    // legacy SubscribeButton (previously the only fired surface).
+    telemetry?.trackSubscription('subscribe_clicked', {
+      source: 'subscribe_to_run'
+    })
   }
 
   showSubscriptionDialog()

src/platform/telemetry/TelemetryRegistry.ts

@@ -3,6 +3,9 @@ import type { AuditLog } from '@/services/customerEventsService'
 import type {
   AuthMetadata,
   BeginCheckoutMetadata,
+  BillingCycleToggledMetadata,
+  AuthErrorMetadata,
+  TemplateCategorySelectedMetadata,
   DefaultViewSetMetadata,
   EnterLinearMetadata,
   ShareFlowMetadata,
@@ -86,6 +89,22 @@ export class TelemetryRegistry implements TelemetryDispatcher {
     this.dispatch((provider) => provider.trackBeginCheckout?.(metadata))
   }
 
+  trackBillingCycleToggled(metadata: BillingCycleToggledMetadata): void {
+    this.dispatch((provider) => provider.trackBillingCycleToggled?.(metadata))
+  }
+
+  trackAuthError(metadata: AuthErrorMetadata): void {
+    this.dispatch((provider) => provider.trackAuthError?.(metadata))
+  }
+
+  trackTemplateCategorySelected(
+    metadata: TemplateCategorySelectedMetadata
+  ): void {
+    this.dispatch((provider) =>
+      provider.trackTemplateCategorySelected?.(metadata)
+    )
+  }
+
   trackMonthlySubscriptionSucceeded(
     metadata?: SubscriptionSuccessMetadata
   ): void {

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.test.ts

@@ -324,6 +324,18 @@ describe('PostHogTelemetryProvider', () => {
       )
     })
 
+    it('captures billing cycle toggles with from/to', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackBillingCycleToggled({ from: 'yearly', to: 'monthly' })
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.BILLING_CYCLE_TOGGLED,
+        { from: 'yearly', to: 'monthly' }
+      )
+    })
+
     it('captures search queries with surface, query, length, and result count', async () => {
       const provider = createProvider()
       await vi.dynamicImportSettled()

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

@@ -11,6 +11,9 @@
 
 import type {
   AuthMetadata,
+  BillingCycleToggledMetadata,
+  AuthErrorMetadata,
+  TemplateCategorySelectedMetadata,
   DefaultViewSetMetadata,
   EnterLinearMetadata,
   ShareFlowMetadata,
@@ -126,9 +129,14 @@
               api_host:
                 window.__CONFIG__?.posthog_api_host || 'https://t.comfy.org',
               ui_host: 'https://us.posthog.com',
-              autocapture: false,
-              capture_pageview: false,
-              capture_pageleave: false,
+              // Web analytics enabled so cloud.comfy.org gets heatmaps + $pageview
+              // (the login/onboarding pages previously had zero coverage). autocapture
+              // does NOT record input *values* (posthog masks them), and these defaults
+              // remain overridable per-environment via `serverConfig` (spread below).
+              autocapture: true,
+              capture_pageview: true,
+              capture_pageleave: true,
+              heatmaps: true,
               persistence: 'localStorage+cookie',
               debug: import.meta.env.VITE_POSTHOG_DEBUG === 'true',
               ...serverConfig,
@@ -350,6 +358,20 @@
     this.trackEvent(eventName, metadata)
   }
 
+  trackBillingCycleToggled(metadata: BillingCycleToggledMetadata): void {
+    this.trackEvent(TelemetryEvents.BILLING_CYCLE_TOGGLED, metadata)
+  }
+
+  trackAuthError(metadata: AuthErrorMetadata): void {
+    this.trackEvent(TelemetryEvents.AUTH_ERROR, metadata)
+  }
+
+  trackTemplateCategorySelected(
+    metadata: TemplateCategorySelectedMetadata
+  ): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_CATEGORY_SELECTED, metadata)
+  }
+
   trackAddApiCreditButtonClicked(): void {
     this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
   }