[ [0x70] Features ] Analytics With PostHog

Analytics With PostHog

> Product analytics, session recordings, and feature flags with PostHog integration.

Overview

[ [0x70] STATUS ]

Fabrk integrates PostHog for comprehensive product analytics. Track user behavior, analyze conversion funnels, record sessions, and manage feature flags all in one platform.

Features

[ [0x01] EVENT_TRACKI ]

STATUS: READY

DESC: Custom events with properties for detailed analytics.

[ [0x02] USER_IDENTIF ]

STATUS: READY

DESC: Link anonymous and authenticated users across sessions.

[ [0x03] SESSION_RECO ]

STATUS: READY

DESC: Watch user sessions to understand behavior (optional).

[ [0x04] FEATURE_FLAG ]

STATUS: READY

DESC: A/B testing and gradual rollouts built-in.

Setup

[ [0x01] CONFIGURE POSTHOG (OPTIONAL) ]

DESC: PostHog only activates when API key is present. Leave empty to disable.

1$# .env.local
2$NEXT_PUBLIC_POSTHOG_KEY=phc_your_project_key  # Optional
3$NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com  # Optional
4
5$# If not set, PostHog will not initialize (graceful degradation)

[ [0x02] AUTOMATIC INITIALIZATION ]

DESC: PostHog initializes automatically if configured (no setup needed)

1// src/lib/analytics/posthog-provider.tsx
2// Provider checks for NEXT_PUBLIC_POSTHOG_KEY
3// If present: initializes PostHog
4// If absent: no-op (app works without analytics)
5
6// Already integrated in src/app/layout.tsx
7import { PostHogProvider } from '@/lib/analytics/posthog-provider';
8
9export default function RootLayout({ children }) {
10  return (
11    <PostHogProvider>
12      {children}
13    </PostHogProvider>
14  );
15}

Usage

[ [0x84] CLIENT-SIDE EVENT TRACKING ]

Track custom events in client components

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

[ [0x04] SERVER-SIDE EVENT TRACKING ]

Track events from API routes and Server Actions using safe helpers

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");

[ [0xF9] PAGE VIEW TRACKING (AUTOMATIC) ]

Page views are automatically tracked by PostHogProvider

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

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use consistent naming: Follow a convention like object_action
├─ Don't over-track: Focus on meaningful events that inform decisions
├─ Include context: Add properties that help segment and analyze
├─ Respect privacy: Don't track PII unless necessary
├─ Test events: Verify events appear in PostHog dashboard
└─ Document events: Maintain a tracking plan for your team

Features

[ [0x01] EVENT_TRACKI ]

STATUS: READY

DESC: Custom events with properties for detailed analytics.

[ [0x02] USER_IDENTIF ]

STATUS: READY

DESC: Link anonymous and authenticated users across sessions.

[ [0x03] SESSION_RECO ]

STATUS: READY

DESC: Watch user sessions to understand behavior (optional).

[ [0x04] FEATURE_FLAG ]

STATUS: READY

DESC: A/B testing and gradual rollouts built-in.

Setup

[ [0x01] CONFIGURE POSTHOG (OPTIONAL) ]

DESC: PostHog only activates when API key is present. Leave empty to disable.

1$# .env.local
2$NEXT_PUBLIC_POSTHOG_KEY=phc_your_project_key  # Optional
3$NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com  # Optional
4
5$# If not set, PostHog will not initialize (graceful degradation)

[ [0x02] AUTOMATIC INITIALIZATION ]

DESC: PostHog initializes automatically if configured (no setup needed)

1// src/lib/analytics/posthog-provider.tsx
2// Provider checks for NEXT_PUBLIC_POSTHOG_KEY
3// If present: initializes PostHog
4// If absent: no-op (app works without analytics)
5
6// Already integrated in src/app/layout.tsx
7import { PostHogProvider } from '@/lib/analytics/posthog-provider';
8
9export default function RootLayout({ children }) {
10  return (
11    <PostHogProvider>
12      {children}
13    </PostHogProvider>
14  );
15}

Usage

[ [0x84] CLIENT-SIDE EVENT TRACKING ]

Track custom events in client components

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

[ [0x04] SERVER-SIDE EVENT TRACKING ]

Track events from API routes and Server Actions using safe helpers

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");

[ [0xF9] PAGE VIEW TRACKING (AUTOMATIC) ]

Page views are automatically tracked by PostHogProvider

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

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use consistent naming: Follow a convention like object_action
├─ Don't over-track: Focus on meaningful events that inform decisions
├─ Include context: Add properties that help segment and analyze
├─ Respect privacy: Don't track PII unless necessary
├─ Test events: Verify events appear in PostHog dashboard
└─ Document events: Maintain a tracking plan for your team