Analytics With PostHog

1"use client";
2
3import { trackEvent } from "@/lib/analytics/posthog-provider";
4
5export function CheckoutButton({ plan, price }: Props) {
6  const handleCheckout = async () => {
7    // Safe tracking - no-op if PostHog not configured
8    trackEvent("checkout_started", {
9      plan_name: plan,
10      plan_price: price,
11      currency: "USD",
12    });
13
14    // Proceed with checkout...
15  };
16
17  return (
18    <button onClick={handleCheckout}>
19      Subscribe to {plan}
20    </button>
21  );
22}
23
24// Common events to track:
25// - user_signed_up
26// - checkout_started
27// - payment_completed
28// - feature_used
29// - org_created
30// - member_invited

1// src/lib/analytics/events.ts provides safe helper functions
2import { trackUserSignup, trackOrgCreated, trackSubscriptionStarted } from "@/lib/analytics/events";
3
4// Example: Track user signup in API route
5export async function POST(request: Request) {
6  const { email, userId } = await request.json();
7
8  // Create user in database...
9
10  // Track signup (no-op if PostHog not configured)
11  await trackUserSignup(userId, email, {
12    provider: "credentials",
13    timestamp: new Date().toISOString(),
14  });
15
16  return Response.json({ success: true });
17}
18
19// Example: Track organization creation
20await trackOrgCreated(userId, orgId, orgName, {
21  memberCount: 1,
22  plan: "free",
23});
24
25// Example: Track subscription
26await trackSubscriptionStarted(userId, "pro", 99, "month");

1// Page views are handled automatically by PostHogProvider
2// No additional code needed!
3
4// The provider tracks:
5// - Route changes (usePathname)
6// - Query parameters (useSearchParams)
7// - Full URL with origin
8
9// Events appear in PostHog as "$pageview" with:
10// - $current_url: Full page URL
11// - Automatic user properties
12// - Session data