Unified analytics for the modern web. One API for GA4, Meta Pixel, PostHog, and more.
- Single API — Track once, send everywhere
- Consent-first — Built-in consent management with category-based gating
- Deduplication — Automatic event deduplication prevents double-counting
- Type-safe — Full TypeScript support with strict mode
- SSR-ready — Works with Next.js, Remix, Astro, and any SSR framework
- Zero config — Sensible defaults, customize when needed
- Tree-shakeable — Only ship what you use
npm install @open-measure/webimport { createTracker } from '@open-measure/web'
import { ga4 } from '@open-measure/dest-ga4'
import { meta } from '@open-measure/dest-meta'
const tracker = createTracker({
destinations: [
ga4({ measurementId: 'G-XXXXXXXXXX' }),
meta({ pixelId: '1234567890' }),
],
})
// Track events
tracker.track('purchase', {
transaction_id: 'order_123',
value: 99.99,
currency: 'USD',
items: [{ item_id: 'SKU-1', item_name: 'Product', quantity: 1 }],
})
// Page views
tracker.page()
// User identification
tracker.identify('user_123', { email: 'user@example.com' })
// Consent management
tracker.consent({ analytics: true, marketing: false })npm install @open-measure/next// app/layout.tsx
import { OpenMeasureProvider } from '@open-measure/next'
import { ga4 } from '@open-measure/dest-ga4'
export default function Layout({ children }) {
return (
<html>
<body>
<OpenMeasureProvider
destinations={[ga4({ measurementId: 'G-XXXXXXXXXX' })]}
>
{children}
</OpenMeasureProvider>
</body>
</html>
)
}// components/checkout.tsx
'use client'
import { useTracker } from '@open-measure/next'
export function CheckoutButton({ orderId, total }) {
const { track } = useTracker()
const handlePurchase = () => {
track('purchase', {
transaction_id: orderId,
value: total,
currency: 'USD',
})
}
return <button onClick={handlePurchase}>Complete Purchase</button>
}┌─────────────────────────────────────────────────────────────┐
│ Your Application │
├─────────────────────────────────────────────────────────────┤
│ @open-measure/next │ @open-measure/react │
│ (Next.js provider) │ (React hooks) │
├─────────────────────────┴───────────────────────────────────┤
│ @open-measure/web │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Tracker │ │ Consent │ │ Dedupe │ │ Queue │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Destinations │
│ ┌────────┐ ┌────────┐ ┌─────────┐ ┌────────┐ │
│ │ GA4 │ │ Meta │ │ PostHog │ │ GTM │ ... │
│ └────────┘ └────────┘ └─────────┘ └────────┘ │
└─────────────────────────────────────────────────────────────┘
| Package | Description |
|---|---|
@open-measure/web |
Core tracker engine |
@open-measure/react |
React hooks and provider |
@open-measure/next |
Next.js integration with auto page tracking |
@open-measure/svelte |
Svelte 5 / SvelteKit integration with page tracking |
@open-measure/dest-ga4 |
Google Analytics 4 destination |
@open-measure/dest-meta |
Meta Pixel destination |
@open-measure/dest-posthog |
PostHog destination |
@open-measure/dest-gtm |
Google Tag Manager dataLayer adapter |
@open-measure/cli |
CLI for scaffolding and validation |
@open-measure/qa |
QA toolkit with event inspector |
@open-measure/capi |
Server-side Conversions API |
Open Measure uses category-based consent:
// Categories: necessary, analytics, marketing, personalization
tracker.consent({
necessary: true, // Always true
analytics: true, // GA4, PostHog
marketing: false, // Meta, TikTok, Google Ads
})
// Destinations only fire when their category is consented
// GA4 requires analytics, Meta requires marketingAutomatic deduplication prevents double-counting:
// Same transaction_id within 5 minutes = deduplicated
tracker.track('purchase', { transaction_id: 'order_123', value: 99 })
tracker.track('purchase', { transaction_id: 'order_123', value: 99 }) // Ignored# Initialize Open Measure in your project
npx open-measure init
# Validate tracking implementation
npx open-measure validate --src ./src
# Health check
npx open-measure doctor
# Scaffold a new destination
npx open-measure create-destination my-platform# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm test
# Lint
pnpm lint
# Type check
pnpm typecheckSee CONTRIBUTING.md for development setup and guidelines.
0 comments
log in to comment.