Loading...
Loading...
Add analytics and feature flags to track user behavior in templates.
Fabrk includes optional PostHog integration that activates only when configured. No setup required if you don't need analytics.
[WHAT YOU'LL INTEGRATE]:
1$# .env.local2$NEXT_PUBLIC_POSTHOG_KEY="phc_your_key" # Optional3$NEXT_PUBLIC_POSTHOG_HOST="https://us.i.posthog.com" # Optional45$# If not set, PostHog won't initialize (no errors)6$# App works perfectly without analytics
1"use client";23import { trackEvent } from "@/lib/analytics/posthog-provider";45export default function DashboardButton() {6 const handleClick = () => {7 // Safe tracking - no-op if PostHog not configured8 trackEvent("dashboard_button_clicked", {9 button: "export_data",10 location: "analytics_page",11 });12 };1314 return <button onClick={handleClick}>Export</button>;15}
1// Use safe helper functions from events.ts2import { trackUserSignup, trackOrgCreated } from "@/lib/analytics/events";34// Track user signup5await trackUserSignup(userId, email, {6 provider: "google",7});89// Track organization creation10await trackOrgCreated(userId, orgId, "My Org", {11 memberCount: 1,12});
1// PostHogProvider automatically tracks pageviews2// Already integrated in src/app/layout.tsx34import { PostHogProvider } from "@/lib/analytics/posthog-provider";56export default function RootLayout({ children }) {7 return (8 <PostHogProvider>9 {children} {/* Pageviews tracked on route change */}10 </PostHogProvider>11 );12}