What's Included
Event Tracking
Track custom events with properties
User Identification
Link events to authenticated users
Real-time Dashboard
Live metrics and visualizations
Funnel Analysis
Conversion tracking and drop-off points
Custom Queries
SQL-like querying with HogQL
Trend Analysis
Track metrics over time
Quick Start
Track events in your React app:
import { useAnalytics } from '@sylphx/sdk/react'
function ProductPage({ product }) {
const { track, identify } = useAnalytics()
// Track custom events
const handleAddToCart = () => {
track('add_to_cart', {
productId: product.id,
price: product.price,
category: product.category,
})
}
// Link events to user
const handleLogin = (user) => {
identify(user.id, {
email: user.email,
plan: user.plan,
})
}
return (
<button onClick={handleAddToCart}>
Add to Cart
</button>
)
}Auto-tracking
Page views, clicks, and form submissions are tracked automatically. Use track() for custom business events.
Pre-built Events
| Property | Type | Description |
|---|---|---|
$pageview | Auto | Page navigation (automatic) |
$click | Auto | Element clicks (automatic) |
sign_up | Standard | User registration |
sign_in | Standard | User login |
purchase | Standard | Completed purchase |
subscription_started | Standard | New subscription |
React Hooks
import {
useAnalytics,
usePageView,
useTrackEvent,
} from '@sylphx/sdk/react'
// Full analytics access
const { track, identify, page } = useAnalytics()
// Auto track page views (use in layout)
usePageView()
// Track specific event
const trackClick = useTrackEvent('button_clicked')
<button onClick={() => trackClick({ buttonId: 'cta' })}>
Click Me
</button>| Property | Type | Description |
|---|---|---|
useAnalytics() | Hook | Full analytics API access |
usePageView() | Hook | Track page views automatically |
useTrackEvent() | Hook | Create typed event tracker |
Server-Side Tracking
Track server-side events in API routes:
app/api/purchase/route.ts
import { analytics } from '@sylphx/sdk/server'
export async function POST(req: Request) {
const { userId, orderId, amount } = await req.json()
// Track purchase event server-side
await analytics.track({
userId,
event: 'purchase',
properties: {
orderId,
amount,
currency: 'USD',
},
})
return Response.json({ success: true })
}