Event Tracking

import { platform } from '@/lib/platform'

// Track a simple event
await platform.analytics.track({
  event: 'button_clicked',
  userId: user.id,
})

// Track with properties
await platform.analytics.track({
  event: 'purchase_completed',
  userId: user.id,
  properties: {
    orderId: 'ord_123',
    amount: 99.99,
    currency: 'USD',
    items: ['item_1', 'item_2'],
  },
})

// Track anonymous events
await platform.analytics.track({
  event: 'page_viewed',
  anonymousId: 'anon_abc123', // For non-logged-in users
  properties: {
    path: '/pricing',
    referrer: 'https://google.com',
  },
})

'use client'

import { useAnalytics } from '@sylphx/sdk/react'

export function CheckoutButton() {
  const { track } = useAnalytics()

  const handleClick = () => {
    track('checkout_started', {
      cartValue: 149.99,
      itemCount: 3,
    })

    // Continue with checkout...
  }

  return <button onClick={handleClick}>Checkout</button>
}

// app/providers.tsx
'use client'

import { SylphxProvider } from '@sylphx/sdk/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SylphxProvider
      appId={process.env.NEXT_PUBLIC_SYLPHX_APP_ID!}
      analytics={{
        trackPageViews: true, // Auto-track route changes
      }}
    >
      {children}
    </SylphxProvider>
  )
}

import { useAnalytics } from '@sylphx/sdk/react'
import { usePathname } from 'next/navigation'
import { useEffect } from 'react'

export function PageViewTracker() {
  const { page } = useAnalytics()
  const pathname = usePathname()

  useEffect(() => {
    page(pathname, {
      title: document.title,
      referrer: document.referrer,
    })
  }, [pathname, page])

  return null
}

import { platform } from '@/lib/platform'

await platform.analytics.trackBatch([
  {
    event: 'item_viewed',
    userId: user.id,
    properties: { itemId: 'item_1' },
    timestamp: new Date('2024-01-15T10:00:00Z'),
  },
  {
    event: 'item_added_to_cart',
    userId: user.id,
    properties: { itemId: 'item_1', quantity: 2 },
    timestamp: new Date('2024-01-15T10:01:00Z'),
  },
  {
    event: 'checkout_started',
    userId: user.id,
    properties: { cartValue: 59.98 },
    timestamp: new Date('2024-01-15T10:02:00Z'),
  },
])

track('signup_started')
track('signup_completed', { method: 'email' })
track('login_completed', { method: 'google' })
track('profile_updated', { fields: ['name', 'avatar'] })
track('subscription_started', { plan: 'pro' })

track('product_viewed', { productId, name, price })
track('product_added_to_cart', { productId, quantity })
track('checkout_started', { cartValue, itemCount })
track('payment_submitted', { paymentMethod: 'card' })
track('order_completed', { orderId, total, items })

track('article_viewed', { articleId, category })
track('video_started', { videoId, duration })
track('video_completed', { videoId, watchTime })
track('content_shared', { contentId, platform: 'twitter' })

import { useConversionTracking } from '@sylphx/sdk/react'

function CheckoutSuccess({ order }) {
  const { trackConversion, primaryClickId } = useConversionTracking()

  useEffect(() => {
    // Auto-enriched with click IDs (gclid, fbclid, ttclid) and user data
    trackConversion('purchase', {
      value: order.total,
      currency: 'USD',
      orderId: order.id,
    })
  }, [order])

  return <div>Thank you!</div>
}