Analytics Overview

@repo/analytics provides a unified interface for tracking events across multiple analytics providers. Write once, send everywhere.

Features

Multi-provider support - PostHog, Google Analytics, OpenPanel, Ahrefs
Automatic page tracking - Tracks route changes in Next.js
Feature flags - Built-in support for PostHog feature flags
Type-safe - Full TypeScript support for events and properties
Plugin architecture - Easy to add or remove providers

Quick Setup

1. Configure Plugins

lib/analytics.ts

import {
  PostHogPlugin,
  GoogleAnalyticsPlugin
} from "@repo/analytics"

export const analyticsPlugins = [
  PostHogPlugin({
    apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY!
  }),
  GoogleAnalyticsPlugin({
    measurementId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID!
  })
]

2. Add Provider

app/providers.tsx

"use client"

import { AnalyticsProvider } from "@repo/analytics"
import { analyticsPlugins } from "@/lib/analytics"

export function Providers({ children, flags }) {
  return (
    <AnalyticsProvider flags={flags} plugins={analyticsPlugins}>
      {children}
    </AnalyticsProvider>
  )
}

3. Track Events

"use client"

import { useAnalytics } from "@repo/analytics"

export function SignUpButton() {
  const { track, identify, page, reset } = useAnalytics()

  return (
    <button onClick={() => track("SIGNUP_CLICKED", { source: "hero" })}>
      Get Started
    </button>
  )
}

How It Works

The AnalyticsProvider wraps your app and manages connections to all configured providers. When you call track(), the event is sent to every provider simultaneously.

flowchart LR
    A[Your App] --> B[AnalyticsProvider]
    B --> C[PostHog]
    B --> D[Google Analytics]
    B --> E[OpenPanel]

Events are fanned out automatically—no need to call each provider individually.

Usage

useAnalytics

The main hook for tracking events and identifying users:

"use client"

import { useAnalytics } from "@repo/analytics"

export function MyComponent() {
  const { track, identify, page, reset } = useAnalytics()

  // ...
}

Method	Description
`track(event, properties?)`	Track a custom event with optional properties
`identify(userId, traits?)`	Associate events with a user identity
`page(name?, properties?)`	Track a page view (automatic in Next.js)
`reset()`	Clear user identity (on logout)

track

track("BUTTON_CLICKED", { 
  buttonId: "signup-hero",
  variant: "primary" 
})

identify

identify(user.id, {
  email: user.email,
  plan: user.plan,
  createdAt: user.createdAt
})

reset

async function handleLogout() {
  await signOut()
  reset()
}

useFlag

Access feature flags from PostHog:

"use client"

import { useFlag } from "@repo/analytics"

export function NewFeature() {
  const isEnabled = useFlag("new-checkout-flow")

  if (!isEnabled) return null

  return <NewCheckoutFlow />
}

See Feature Flags for setup details.

Provider Options

Provider	Best For
PostHog	Product analytics, feature flags, session recordings
Google Analytics	Traffic analysis, marketing attribution
OpenPanel	Privacy-focused, self-hostable
Ahrefs	SEO and traffic analytics

You can use one provider or all of them together.

Next Steps

Track events - Learn the tracking API
Identify users - Associate events with users
Feature flags - Control feature rollouts

On this page