feat(website): add explicit homepage CTA telemetry

[deepme987]

Summary

Add explicit website:cta_clicked telemetry to the homepage marketing site so primary CTA clicks are tied to real DOM elements instead of fragile autocapture / i18n text matching.

Changes

• What: New captureCtaClick(button, location) helper in apps/website/src/scripts/posthog.ts (typed CtaButton / CtaLocation), fired on click of the actual CTA elements:
  • Hero run-first-workflow button (run_first_workflow / hero)
  • Nav CTA buttons (launch_cloud, download_desktop / nav)
  • Nav links: Pricing (pricing / nav) and the Products dropdown items Comfy Local (comfy_desktop) and Comfy Cloud (comfy_cloud)
  • Product cards section (download_desktop, comfy_cloud, products / products_section)
  • Unit tests covering the helper's payload and pre-init no-op behavior

Review Focus

• Events fire on the real CTA elements (BrandButton, ProductCard, nav <a>/dropdown items), not text matching, so they survive copy/i18n changes.
• captureCtaClick mirrors the existing captureDownloadClick contract: no-ops before PostHog init and swallows errors.
• Button/location enums match the agreed event spec.

Companion PRs

• Cloud funnel telemetry (server-side funnel events): https://github.com/Comfy-Org/cloud/pull/4330

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 90eb0a0d-ace7-48fe-a4f0-9c4455350ede

📥 Commits

Reviewing files that changed from the base of the PR and between 8fe6159 and 5f789e1.

📒 Files selected for processing (1)

• apps/website/src/components/common/NavDesktopLink.vue

---

📝 Walkthrough

Walkthrough

Adds a captureCtaClick(button, location) function to posthog.ts with CtaButton and CtaLocation union types. This function is then wired into click handlers on nav links (SiteNav.vue, NavDesktopLink.vue), product cards (ProductCard.vue, ProductCardsSection.vue), and the hero section CTA button (HeroSection.vue). Tests cover initialized and uninitialized PostHog paths.

Changes

PostHog CTA Click Tracking

Layer / File(s)	Summary
PostHog tracking types and captureCtaClick function apps/website/src/scripts/posthog.ts, apps/website/src/scripts/posthog.test.ts	Exports CtaButton and CtaLocation union types and captureCtaClick, which fires website:cta_clicked only after PostHog init. Tests cover both the initialized and uninitialized code paths.
Nav CTA data wiring and click handlers apps/website/src/components/common/SiteNav.vue, apps/website/src/components/common/NavDesktopLink.vue	navLinks and ctaButtons data objects gain ctaButton fields; desktop BrandButton elements call captureCtaClick(..., 'nav') on click. NavDesktopLink extends type shapes, adds @click handlers for both flat and dropdown links, and adjusts hover/current state styling.
Product cards CTA mapping and tracking apps/website/src/components/common/ProductCardsSection.vue, apps/website/src/components/common/ProductCard.vue	ProductCardsSection adds a ctaButtonByProduct lookup and passes ctaButton to each card. ProductCard accepts the optional prop and calls captureCtaClick(ctaButton, 'products_section') on anchor click.
Hero section CTA tracking apps/website/src/components/home/HeroSection.vue	Imports captureCtaClick and attaches captureCtaClick('run_first_workflow', 'hero') to the primary CTA button click handler.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐇 Hop, hop, a click is tracked,
The CTA buttons, all intact,
PostHog captures every press,
nav, hero, products_section — no less!
The rabbit's tracking fix is blessed. ✨

🚥 Pre-merge checks | ✅ 6 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding explicit homepage CTA telemetry to track user interactions with call-to-action elements.
Description check	✅ Passed	The description follows the template structure with Summary, Changes, and Review Focus sections, providing comprehensive details about what was added and why.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
End-To-End Regression Coverage For Fixes	✅ Passed	All changes are exclusively under apps/website/, which is exempted from E2E regression test requirements. Additionally, this is a feature addition (telemetry tracking) rather than a bug fix.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	Check does not apply to this PR: no changes to src/lib/litegraph/, src/ecs/, or graph entity files. PR modifies only website components and PostHog telemetry utilities.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch deepme987/feat/website-cta-telemetry

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🌐 Website E2E

Tip

All tests passed.

Status	✅ Passed
Report	View Report

🔗 Website Preview

Website Preview: https://comfy-website-preview-pr-12934.vercel.app

_{This commit: https://website-frontend-ncz37alwi-comfyui.vercel.app}

_{Last updated: 2026-06-18T00:30:35Z for 5f789e1}

[deepme987]

Folded into #12894 (the consolidated cloud telemetry PR): the website CTA telemetry (apps/website) merged cleanly (disjoint from the cloud-app events). Closing in favor of one frontend telemetry PR.