diff --git a/.gitignore b/.gitignore index ed9937e..40c3ce4 100644 --- a/.gitignore +++ b/.gitignore @@ -139,6 +139,7 @@ vite.config.js.timestamp-* vite.config.ts.timestamp-* # Misc +.audit *.DS_Store deadcode-report.md docs/reference/sdk/ \ No newline at end of file diff --git a/README.md b/README.md index d408765..c1bc4e8 100644 --- a/README.md +++ b/README.md @@ -5,25 +5,30 @@ [![bundle size](https://img.shields.io/bundlephobia/minzip/trackkit)](https://bundlephobia.com/package/trackkit) ![types](https://img.shields.io/npm/types/trackkit) -Trackkit is a lightweight, provider-agnostic analytics SDK with a single facade for Umami, Plausible, GA4 (Measurement Protocol only), and custom adapters. +Trackkit is a lightweight, provider-agnostic analytics SDK with a single facade for Umami, Plausible, and GA4 (Measurement Protocol). This repository hosts the full SDK source, development tooling, documentation, tests, and release pipeline. -**SSR-aware • MV3-safe • No remote scripts • <20 kB core (brotli)** +**SSR-aware • CSP-friendly • No remote scripts • Tree-shakeable** -- **Zero remote scripts** — CSP-friendly and safe for MV3 and strict environments. -- **Consent-aware** — EU-style consent flows with event gating + queueing. -- **SSR hydration** — collect server events and replay once on the client. -- **Multi-provider** — Umami/Plausible baseline with optional GA4 layer. -- **Typed DX** — clean facade API, strong TypeScript types, great developer tooling. +### What happens when you call `analytics.track()` -## Why Trackkit? +Every call flows through the same runtime pipeline — you never need to think about timing, readiness, or consent yourself: -* **Privacy-first**: cookieless by default for Umami & Plausible; consent-aware for GA4. -* **No remote scripts**: CSP-friendly, safe for MV3 extensions, workers, and strict sites. -* **Small & fast**: tree-shakeable core; adapters load lazily. -* **Multi-provider**: run Umami/Plausible for everyone and layer GA4 for consented users. -* **SSR aware**: queue on the server, hydrate and replay on the client. -* **DX matters**: typed API, debug logs, queue inspection, provider state machine. +1. **Lazy-load** the provider adapter (only the one you configure is bundled). +2. **Queue events** while the provider or consent isn't ready yet. +3. **Respect consent**, domain rules, DNT, and localhost settings before anything is sent. +4. **Flush** the queue through PolicyGate → Consent → Provider → Transport. + +This means you can call `track()` at any point — during SSR, before the provider script has loaded, or before a user has responded to a consent banner — and Trackkit will do the right thing. + +### Why Trackkit? + +* **Privacy-first** — cookieless by default for Umami & Plausible; consent-aware for GA4. +* **No remote scripts** — CSP-friendly, no injected ` breakouts and other XSS vectors + __html: serializeSSRQueue(initialQueueState), }} /> )} diff --git a/examples/next-ssr-ga4/pages/index.tsx b/examples/next-ssr-ga4/pages/index.tsx index d207696..bd6343f 100644 --- a/examples/next-ssr-ga4/pages/index.tsx +++ b/examples/next-ssr-ga4/pages/index.tsx @@ -1,66 +1,3 @@ -// import type { GetServerSideProps } from 'next'; -// import { ssrPageview } from 'trackkit/ssr'; -// import { analytics } from '../lib/analytics'; - -// type HomeProps = { -// url: string; -// }; - -// export const getServerSideProps: GetServerSideProps = async (ctx) => { -// const url = ctx.resolvedUrl || '/'; - -// // Record a server-side pageview. This only enqueues into the SSR queue; -// // no provider is initialised on the server. -// ssrPageview(url); - -// return { -// props: { -// url, -// }, -// }; -// }; - -// export default function Home({ url }: HomeProps) { -// const handleClick = () => { -// analytics?.track('signup_clicked', { -// plan: 'pro', -// source: 'next-ssr-ga4-example', -// }); -// }; - -// return ( -//
-//

Trackkit + Next.js (SSR) + GA4

-//

-// This page was rendered for {url} with a server-side -// pageview via trackkit/ssr. -//

- -// - -//
-//

Diagnostics

-//

-// In the browser console, run{' '} -// window.__analytics?.getDiagnostics() to inspect the -// hydrated queue, provider state, and consent snapshot. -//

-//
-//
-// ); -// } - - import { useState } from 'react'; import type { GetServerSideProps } from 'next'; import { ssrPageview, ssrTrack, getSSRQueue } from 'trackkit/ssr'; diff --git a/examples/react-spa-umami/README.md b/examples/react-spa-umami/README.md index f57caa4..a22a1e5 100644 --- a/examples/react-spa-umami/README.md +++ b/examples/react-spa-umami/README.md @@ -1,17 +1,29 @@ # React SPA + Umami via Trackkit -Minimal example showing how to use Trackkit in a Vite + React SPA with Umami. +Demonstrates a client-side React app using Trackkit with Umami as the analytics provider, including consent management and automatic page tracking. + +## What this example shows + +- **Auto-tracking** — `autoTrack: true` listens for `pushState` / `popstate` and sends pageviews automatically as you navigate between routes. No manual `pageview()` calls needed. +- **Consent flow** — analytics starts with `initialStatus: 'pending'` and `requireExplicit: true`. Events queue locally until the user interacts with the consent banner (`ConsentBanner.tsx`). +- **Custom events** — the Pricing page fires `analytics.track('signup_clicked', { plan, source })` on button click. +- **Umami adapter** — cookieless by default, no remote `