feat(telemetry): instrument cloud funnel gaps (auth, onboarding, canvas, output)

apps/website/src/components/common/HeaderMain/HeaderMain.vue

@@ -2,6 +2,8 @@
 import type { Locale } from '../../../i18n/translations.ts'
 import { t } from '../../../i18n/translations.ts'
 import { externalLinks, getRoutes } from '../../../config/routes.ts'
+import type { CtaButton } from '../../../scripts/posthog'
+import { captureCtaClick } from '../../../scripts/posthog'
 import GitHubStarBadge from '../GitHubStarBadge.vue'
 import HeaderMainDesktop from './HeaderMainDesktop.vue'
 import HeaderMainMobile from './HeaderMainMobile.vue'
@@ -13,20 +15,29 @@ const { locale = 'en', githubStars = '' } = defineProps<{
 }>()
 const routes = getRoutes(locale)
 
-const ctaButtons = [
+const ctaButtons: {
+  prefix: string
+  core: string
+  ariaLabel: string
+  href: string
+  primary: boolean
+  ctaButton: CtaButton
+}[] = [
   {
     prefix: t('nav.ctaDesktopPrefix', locale),
     core: t('nav.ctaDesktopCore', locale),
     ariaLabel: t('nav.downloadLocal', locale),
     href: routes.download,
-    primary: false
+    primary: false,
+    ctaButton: 'download_desktop'
   },
   {
     prefix: t('nav.ctaCloudPrefix', locale),
     core: t('nav.ctaCloudCore', locale),
     ariaLabel: t('nav.launchCloud', locale),
     href: externalLinks.cloud,
-    primary: true
+    primary: true,
+    ctaButton: 'launch_cloud'
   }
 ]
 </script>
@@ -74,6 +85,7 @@ const ctaButtons = [
         :href="cta.href"
         :variant="cta.primary ? 'default' : 'outline'"
         :aria-label="cta.ariaLabel"
+        @click="captureCtaClick(cta.ctaButton, 'nav')"
       >
         <span
           ><span class="hidden xl:inline-block">{{ cta.prefix }}&nbsp;</span

apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue

@@ -14,6 +14,7 @@ import {
 import { getMainNavigation } from '../../../data/mainNavigation'
 import type { NavItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
+import { captureCtaClick } from '../../../scripts/posthog'
 import NavColumn from './NavColumn.vue'
 import NavFeaturedCard from './NavFeaturedCard.vue'
 
@@ -66,9 +67,14 @@ function isNavItemActive(navItem: NavItem, path: string): boolean {
           :active="isNavItemActive(navItem, currentPath)"
           :class="navigationMenuTriggerStyle()"
         >
-          <a :href="navItem.href" class="ppformula-text-center">{{
-            navItem.label
-          }}</a>
+          <a
+            :href="navItem.href"
+            class="ppformula-text-center"
+            @click="
+              navItem.ctaButton && captureCtaClick(navItem.ctaButton, 'nav')
+            "
+            >{{ navItem.label }}</a
+          >
         </NavigationMenuLink>
       </NavigationMenuItem>
     </NavigationMenuList>

apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue

@@ -7,6 +7,7 @@ import { getRoutes } from '../../../config/routes.ts'
 import { lockScroll, unlockScroll } from '../../../composables/scrollLock'
 import type { Locale } from '../../../i18n/translations.ts'
 import { t } from '../../../i18n/translations.ts'
+import { captureCtaClick } from '../../../scripts/posthog'
 import NavLinkContent from './NavLinkContent.vue'
 import Sheet from '@/components/ui/sheet/Sheet.vue'
 import SheetContent from '@/components/ui/sheet/SheetContent.vue'
@@ -94,7 +95,11 @@ onUnmounted(() => {
                   variant="navMuted"
                   :type="item.columns ? 'button' : undefined"
                   :href="item.columns ? undefined : item.href"
-                  @click="item.columns && (activeSection = item.label)"
+                  @click="
+                    item.columns
+                      ? (activeSection = item.label)
+                      : item.ctaButton && captureCtaClick(item.ctaButton, 'nav')
+                  "
                 >
                   {{ item.label }}
                   <template #append>
@@ -147,6 +152,9 @@ onUnmounted(() => {
                     as="a"
                     :target="link.external ? '_blank' : undefined"
                     :rel="link.external ? 'noopener noreferrer' : undefined"
+                    @click="
+                      link.ctaButton && captureCtaClick(link.ctaButton, 'nav')
+                    "
                   >
                     <NavLinkContent :item="link" :locale="locale" />
                   </Button>

apps/website/src/components/common/HeaderMain/NavColumn.vue

@@ -4,6 +4,7 @@ import NavigationMenuLink from '@/components/ui/navigation-menu/NavigationMenuLi
 import { isHrefActive } from '../../../composables/useCurrentPath'
 import type { NavColumn } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
+import { captureCtaClick } from '../../../scripts/posthog'
 import NavLinkContent from './NavLinkContent.vue'
 
 defineProps<{ column: NavColumn; locale: Locale; currentPath: string }>()
@@ -26,6 +27,7 @@ defineProps<{ column: NavColumn; locale: Locale; currentPath: string }>()
             :target="item.external ? '_blank' : undefined"
             :rel="item.external ? 'noopener noreferrer' : undefined"
             class="whitespace-nowrap"
+            @click="item.ctaButton && captureCtaClick(item.ctaButton, 'nav')"
           >
             <NavLinkContent :item="item" :locale="locale" />
           </a>

apps/website/src/components/common/ProductCard.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
-const { title, description, cta, href, bg } = defineProps<{
+import type { CtaButton } from '../../scripts/posthog'
+import { captureCtaClick } from '../../scripts/posthog'
+
+const { title, description, cta, href, bg, ctaButton } = defineProps<{
   title: string
   description: string
   cta: string
   href: string
   bg: string
+  ctaButton?: CtaButton
 }>()
+
+function onClick() {
+  if (ctaButton) captureCtaClick(ctaButton, 'products_section')
+}
 </script>
 
 <template>
@@ -19,6 +27,7 @@ const { title, description, cta, href, bg } = defineProps<{
         bg
       )
     "
+    @click="onClick"
   >
     <h3 class="text-3xl font-light whitespace-pre-line text-white lg:text-4xl">
       {{ title }}
@@ -29,7 +38,7 @@ const { title, description, cta, href, bg } = defineProps<{
         {{ description }}
       </p>
       <span
-        class="bg-primary-comfy-yellow text-primary-comfy-ink mt-4 inline-block rounded-xl px-4 py-2 text-xs font-bold tracking-wide"
+        class="bg-primary-comfy-yellow mt-4 inline-block rounded-xl px-4 py-2 text-xs font-bold tracking-wide text-primary-comfy-ink"
       >
         {{ cta }}
       </span>

apps/website/src/components/common/ProductCardsSection.vue

@@ -5,11 +5,19 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 import { getRoutes } from '../../config/routes'
 import { t } from '../../i18n/translations'
+import type { CtaButton } from '../../scripts/posthog'
 import ProductCard from './ProductCard.vue'
 import SectionLabel from './SectionLabel.vue'
 
 type Product = 'local' | 'cloud' | 'api' | 'enterprise'
 
+const ctaButtonByProduct: Record<Product, CtaButton> = {
+  local: 'download_desktop',
+  cloud: 'comfy_cloud',
+  api: 'products',
+  enterprise: 'products'
+}
+
 const {
   locale = 'en',
   excludeProduct,
@@ -29,7 +37,8 @@ function cardDef(product: Product, href: string, bg: string) {
     description: t(`products.${product}.description`, locale),
     cta: t(`products.${product}.cta`, locale),
     href,
-    bg
+    bg,
+    ctaButton: ctaButtonByProduct[product]
   }
 }
 

apps/website/src/components/home/HeroSection.vue

@@ -5,6 +5,7 @@ import type { Locale } from '../../i18n/translations'
 import { externalLinks } from '../../config/routes'
 import { useHeroLogo } from '../../composables/useHeroLogo'
 import { t } from '../../i18n/translations'
+import { captureCtaClick } from '../../scripts/posthog'
 import BrandButton from '../common/BrandButton.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
@@ -47,6 +48,7 @@ const { loaded: logoLoaded } = useHeroLogo(logoContainer)
         variant="outline"
         size="lg"
         class="mt-8 w-full p-4 uppercase lg:w-auto lg:min-w-60"
+        @click="captureCtaClick('run_first_workflow', 'hero')"
       >
         {{ t('hero.runFirstWorkflow', locale) }}
       </BrandButton>

apps/website/src/data/mainNavigation.ts

@@ -1,12 +1,14 @@
 import { externalLinks, getRoutes } from '../config/routes'
 import type { Locale } from '../i18n/translations'
 import { t } from '../i18n/translations'
+import type { CtaButton } from '../scripts/posthog'
 
 export type NavColumnItem = {
   label: string
   href: string
   badge?: 'new'
   external?: boolean
+  ctaButton?: CtaButton
 }
 
 export type NavColumn = {
@@ -31,8 +33,15 @@ export type NavItem =
       columns: NavColumn[]
       featured?: NavFeatured
       href?: never
+      ctaButton?: never
+    }
+  | {
+      label: string
+      href: string
+      columns?: never
+      featured?: never
+      ctaButton?: CtaButton
     }
-  | { label: string; href: string; columns?: never; featured?: never }
 
 export function getMainNavigation(locale: Locale): NavItem[] {
   const routes = getRoutes(locale)
@@ -53,8 +62,16 @@ export function getMainNavigation(locale: Locale): NavItem[] {
         {
           header: t('nav.products', locale),
           items: [
-            { label: t('nav.comfyLocal', locale), href: routes.download },
-            { label: t('nav.comfyCloud', locale), href: routes.cloud },
+            {
+              label: t('nav.comfyLocal', locale),
+              href: routes.download,
+              ctaButton: 'comfy_desktop'
+            },
+            {
+              label: t('nav.comfyCloud', locale),
+              href: routes.cloud,
+              ctaButton: 'comfy_cloud'
+            },
             {
               label: t('nav.comfyApi', locale),
               href: routes.api,
@@ -82,7 +99,11 @@ export function getMainNavigation(locale: Locale): NavItem[] {
         }
       ]
     },
-    { label: t('nav.pricing', locale), href: routes.cloudPricing },
+    {
+      label: t('nav.pricing', locale),
+      href: routes.cloudPricing,
+      ctaButton: 'pricing'
+    },
     {
       label: t('nav.community', locale),
       featured: {

apps/website/src/scripts/posthog.test.ts

@@ -78,3 +78,28 @@ describe('captureDownloadClick', () => {
     expect(hoisted.mockCapture).not.toHaveBeenCalled()
   })
 })
+
+describe('captureCtaClick', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetModules()
+  })
+
+  it('captures the CTA event with button and location', async () => {
+    const { initPostHog, captureCtaClick } = await import('./posthog')
+    initPostHog()
+    captureCtaClick('launch_cloud', 'nav')
+
+    expect(hoisted.mockCapture).toHaveBeenCalledWith('website:cta_clicked', {
+      button: 'launch_cloud',
+      location: 'nav'
+    })
+  })
+
+  it('does not capture before PostHog is initialized', async () => {
+    const { captureCtaClick } = await import('./posthog')
+    captureCtaClick('run_first_workflow', 'hero')
+
+    expect(hoisted.mockCapture).not.toHaveBeenCalled()
+  })
+})

apps/website/src/scripts/posthog.ts

@@ -49,3 +49,23 @@ export function captureDownloadClick(platform: Platform) {
     console.error('PostHog download click capture failed', error)
   }
 }
+
+export type CtaButton =
+  | 'launch_cloud'
+  | 'download_desktop'
+  | 'pricing'
+  | 'run_first_workflow'
+  | 'products'
+  | 'comfy_desktop'
+  | 'comfy_cloud'
+
+export type CtaLocation = 'nav' | 'hero' | 'products_section'
+
+export function captureCtaClick(button: CtaButton, location: CtaLocation) {
+  if (!initialized) return
+  try {
+    posthog.capture('website:cta_clicked', { button, location })
+  } catch (error) {
+    console.error('PostHog CTA click capture failed', error)
+  }
+}

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) {