feat(landing): add PostHog tracking for CTA clicks, demo requests, and prompt submissions

waleedlatif1 · waleedlatif1 · commit 2277834d2c49 · 2026-04-06T12:33:32.000-07:00
diff --git a/apps/sim/app/(landing)/components/demo-request/demo-request-modal.tsx b/apps/sim/app/(landing)/components/demo-request/demo-request-modal.tsx
@@ -18,6 +18,7 @@ import {
   type DemoRequestPayload,
   demoRequestSchema,
 } from '@/app/(landing)/components/demo-request/consts'
+import { captureClientEvent } from '@/lib/posthog/client'
 
 interface DemoRequestModalProps {
   children: React.ReactNode
@@ -163,6 +164,9 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
         }
 
         setSubmitSuccess(true)
+        captureClientEvent('landing_demo_request_submitted', {
+          company_size: parsed.data.companySize,
+        })
       } catch (error) {
         setSubmitError(
           error instanceof Error
diff --git a/apps/sim/app/(landing)/components/footer/footer-cta.tsx b/apps/sim/app/(landing)/components/footer/footer-cta.tsx
@@ -5,6 +5,8 @@ import { ArrowUp } from 'lucide-react'
 import Link from 'next/link'
 import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
 import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
+import { trackLandingCta } from '@/app/(landing)/landing-analytics'
+import { captureClientEvent } from '@/lib/posthog/client'
 
 const MAX_HEIGHT = 120
 
@@ -21,6 +23,7 @@ export function FooterCTA() {
 
   const handleSubmit = useCallback(() => {
     if (isEmpty) return
+    captureClientEvent('landing_prompt_submitted', {})
     landingSubmit(inputValue)
   }, [isEmpty, inputValue, landingSubmit])
 
@@ -94,12 +97,14 @@ export function FooterCTA() {
           target='_blank'
           rel='noopener noreferrer'
           className={`${CTA_BUTTON} border-[var(--landing-border-strong)] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]`}
+          onClick={() => trackLandingCta({ label: 'Docs', section: 'footer_cta', destination: 'https://docs.sim.ai' })}
         >
           Docs
         </a>
         <Link
           href='/signup'
           className={`${CTA_BUTTON} gap-2 border-white bg-white text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
+          onClick={() => trackLandingCta({ label: 'Get started', section: 'footer_cta', destination: '/signup' })}
         >
           Get started
         </Link>
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -3,6 +3,7 @@
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { DemoRequestModal } from '@/app/(landing)/components/demo-request/demo-request-modal'
+import { trackLandingCta } from '@/app/(landing)/landing-analytics'
 
 const LandingPreview = dynamic(
   () =>
@@ -57,6 +58,7 @@ export default function Hero() {
               type='button'
               className={`${CTA_BASE} border-[var(--landing-border-strong)] bg-transparent text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]`}
               aria-label='Get a demo'
+              onClick={() => trackLandingCta({ label: 'Get a demo', section: 'hero', destination: 'demo_modal' })}
             >
               Get a demo
             </button>
@@ -65,6 +67,7 @@ export default function Hero() {
             href='/signup'
             className={`${CTA_BASE} gap-2 border-white bg-white text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
             aria-label='Get started with Sim'
+            onClick={() => trackLandingCta({ label: 'Get started', section: 'hero', destination: '/signup' })}
           >
             Get started
           </Link>
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
@@ -8,6 +8,7 @@ import { TypeBoolean, TypeNumber, TypeText } from '@/components/emcn/icons'
 import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
 import { EASE_OUT } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
 import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
+import { captureClientEvent } from '@/lib/posthog/client'
 
 const C = {
   SURFACE: '#292929',
@@ -151,6 +152,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
 
   const handleSubmit = useCallback(() => {
     if (isEmpty) return
+    captureClientEvent('landing_prompt_submitted', {})
     landingSubmit(inputValue)
   }, [isEmpty, inputValue, landingSubmit])
 
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation'
 import { createPortal } from 'react-dom'
 import { Blimp, BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
 import { AgentIcon, HubspotIcon, OpenAIIcon, SalesforceIcon } from '@/components/icons'
+import { captureClientEvent } from '@/lib/posthog/client'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 import {
   EASE_OUT,
@@ -147,6 +148,7 @@ export const LandingPreviewPanel = memo(function LandingPreviewPanel({
 
   const handleSubmit = useCallback(() => {
     if (isEmpty) return
+    captureClientEvent('landing_prompt_submitted', {})
     landingSubmit(inputValue)
   }, [isEmpty, inputValue, landingSubmit])
 
diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -7,6 +7,7 @@ import { useSearchParams } from 'next/navigation'
 import { GithubOutlineIcon } from '@/components/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
+import { trackLandingCta } from '@/app/(landing)/landing-analytics'
 import {
   BlogDropdown,
   type NavBlogPost,
@@ -212,6 +213,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                 href='/workspace'
                 className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                 aria-label='Go to app'
+                onClick={() => trackLandingCta({ label: 'Go to App', section: 'navbar', destination: '/workspace' })}
               >
                 Go to App
               </Link>
@@ -221,13 +223,15 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                   href='/login'
                   className='inline-flex h-[30px] items-center rounded-[5px] border border-[var(--landing-border-strong)] px-[9px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
                   aria-label='Log in'
+                  onClick={() => trackLandingCta({ label: 'Log in', section: 'navbar', destination: '/login' })}
                 >
                   Log in
                 </Link>
                 <Link
                   href='/signup'
                   className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-2.5 text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                   aria-label='Get started with Sim'
+                  onClick={() => trackLandingCta({ label: 'Get started', section: 'navbar', destination: '/signup' })}
                 >
                   Get started
                 </Link>
@@ -303,7 +307,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                 <Link
                   href='/workspace'
                   className='flex h-[32px] items-center justify-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
-                  onClick={() => setMobileMenuOpen(false)}
+                  onClick={() => { trackLandingCta({ label: 'Go to App', section: 'navbar', destination: '/workspace' }); setMobileMenuOpen(false) }}
                   aria-label='Go to app'
                 >
                   Go to App
@@ -313,15 +317,15 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                   <Link
                     href='/login'
                     className='flex h-[32px] items-center justify-center rounded-[5px] border border-[var(--landing-border-strong)] text-[14px] text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
-                    onClick={() => setMobileMenuOpen(false)}
+                    onClick={() => { trackLandingCta({ label: 'Log in', section: 'navbar', destination: '/login' }); setMobileMenuOpen(false) }}
                     aria-label='Log in'
                   >
                     Log in
                   </Link>
                   <Link
                     href='/signup'
                     className='flex h-[32px] items-center justify-center rounded-[5px] border border-[var(--white)] bg-[var(--white)] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
-                    onClick={() => setMobileMenuOpen(false)}
+                    onClick={() => { trackLandingCta({ label: 'Get started', section: 'navbar', destination: '/signup' }); setMobileMenuOpen(false) }}
                     aria-label='Get started with Sim'
                   >
                     Get started
diff --git a/apps/sim/app/(landing)/components/pricing/pricing.tsx b/apps/sim/app/(landing)/components/pricing/pricing.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link'
 import { Badge } from '@/components/emcn'
 import { DemoRequestModal } from '@/app/(landing)/components/demo-request/demo-request-modal'
+import { trackLandingCta } from '@/app/(landing)/landing-analytics'
 
 interface PricingTier {
   id: string
@@ -150,6 +151,7 @@ function PricingCard({ tier }: PricingCardProps) {
                 <button
                   type='button'
                   className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-light)] bg-transparent px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:bg-[var(--landing-bg-hover)]'
+                  onClick={() => trackLandingCta({ label: tier.cta.label, section: 'pricing', destination: 'demo_modal' })}
                 >
                   {tier.cta.label}
                 </button>
@@ -158,13 +160,15 @@ function PricingCard({ tier }: PricingCardProps) {
               <Link
                 href={tier.cta.href || '/signup'}
                 className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-2.5 font-[430] font-season text-[14px] text-white transition-colors hover:border-[var(--landing-border)] hover:bg-[var(--landing-bg-elevated)]'
+                onClick={() => trackLandingCta({ label: tier.cta.label, section: 'pricing', destination: tier.cta.href || '/signup' })}
               >
                 {tier.cta.label}
               </Link>
             ) : (
               <Link
                 href={tier.cta.href || '/signup'}
                 className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-border-light)] px-2.5 font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:bg-[var(--landing-bg-hover)]'
+                onClick={() => trackLandingCta({ label: tier.cta.label, section: 'pricing', destination: tier.cta.href || '/signup' })}
               >
                 {tier.cta.label}
               </Link>
diff --git a/apps/sim/app/(landing)/landing-analytics.tsx b/apps/sim/app/(landing)/landing-analytics.tsx
@@ -2,7 +2,8 @@
 
 import { useEffect } from 'react'
 import { usePostHog } from 'posthog-js/react'
-import { captureEvent } from '@/lib/posthog/client'
+import { captureClientEvent, captureEvent } from '@/lib/posthog/client'
+import type { PostHogEventMap } from '@/lib/posthog/events'
 
 export function LandingAnalytics() {
   const posthog = usePostHog()
@@ -13,3 +14,13 @@ export function LandingAnalytics() {
 
   return null
 }
+
+/**
+ * Fire-and-forget tracker for landing page CTA clicks.
+ * Uses the non-hook client so it works in any click handler without requiring a PostHog provider ref.
+ */
+export function trackLandingCta(
+  props: PostHogEventMap['landing_cta_clicked']
+): void {
+  captureClientEvent('landing_cta_clicked', props)
+}
diff --git a/apps/sim/lib/posthog/events.ts b/apps/sim/lib/posthog/events.ts
@@ -14,6 +14,18 @@ export interface PostHogEventMap {
 
   landing_page_viewed: Record<string, never>
 
+  landing_cta_clicked: {
+    label: string
+    section: 'hero' | 'navbar' | 'footer_cta' | 'pricing'
+    destination: string
+  }
+
+  landing_demo_request_submitted: {
+    company_size: string
+  }
+
+  landing_prompt_submitted: Record<string, never>
+
   signup_page_viewed: Record<string, never>
 
   subscription_created: {
