Embedded analytics SDK

Embedded analytics is the practice of putting analytics inside your product, scoped to each customer's data, styled like a native part of your app. It used to require building the dashboard from scratch or shelling out to a paid platform. Litemetrics makes it a one-component install.

What "embedded" actually means

First-party analytics tools (Plausible, Umami, GA) show you data about your traffic to your site. The dashboard is a tool you log into, separately from your product.

Embedded analytics inverts this. The dashboard is part of your product. Your customer logs into your app, navigates to their Analytics tab, and sees data about their resource (their store, their link, their page) inside your UI, with your colors and your navigation around it.

Three things have to be true for that to work:

1. Multi-tenancy: each customer sees only their own data. Server-enforced, not just client-filtered.
2. White-label theming: the dashboard takes your brand colors, fonts, and dark/light mode. No iframe, no foreign design system.
3. API-first or component-first: either you query the data and render it, or someone hands you components that already do.

Litemetrics gives you the components.

The architecture

Four parts, all open source, all MIT:

• @litemetrics/tracker: the 3.5 KB browser script that ships pageviews and events to your collector.
• @litemetrics/node: the Express-compatible collector, query API, and site CRUD. Adapters for ClickHouse, Postgres, and MongoDB.
• @litemetrics/react: provider and hooks for tracking inside React/Next.js apps.
• @litemetrics/ui: the white-label React dashboard component you embed in your product.

Multi-tenant by default

Every event is tagged with a siteId at write time and every query is filtered by siteId at read time. The secret key required to read data is per-site, so even if a customer guessed another customer's siteId they would still get a 403. There is no shared global view; isolation is the default.

White-label theming

Theming is two layers. The dashboard ships with 10 named presets (midnight, arctic, candy, terminal, etc.) you select via prop. Underneath, every color, radius, and spacing token is a CSS custom property prefixed --lm-. To match your brand, override the variables in the parent scope:

.your-app-shell {
  --lm-color-brand: #5b9eff;
  --lm-color-surface: #0f1218;
  --lm-radius-card: 12px;
  --lm-font-display: 'Your Font', sans-serif;
}

Drop-in usage

import {
  LitemetricsProvider,
  AnalyticsDashboard,
} from '@litemetrics/ui';

export function AnalyticsTab({ customer }) {
  return (
    <LitemetricsProvider
      baseUrl="https://analytics.yourapp.com/api"
      siteId={customer.litemetricsSiteId}
      secretKey={customer.litemetricsSecret}
    >
      <AnalyticsDashboard theme="midnight" />
    </LitemetricsProvider>
  );
}

What customers actually see

• Pageviews, visitors, sessions, events as headline stats with deltas.
• Time series by hour, day, week, or month.
• Top pages, top referrers, top exit pages, page-to-page transitions.
• Geo (country and city), browser, OS, device breakdowns.
• Scroll depth and button click heatmaps.
• Custom event lists (whatever your tracker fires).
• Weekly cohort retention.

All of it server-rendered against ClickHouse or Postgres, all of it scoped to that customer's siteId.

Why open source matters here

Embedded analytics tends to be a long-lived part of your product. You do not want a closed-source dependency that you cannot patch, that can change pricing, or that gets acquired and discontinued. Litemetrics is MIT licensed: you can fork it, embed it in commercial products, and you own your customers' data on your infrastructure. There is no upstream you have to negotiate with.

Get started

• Quickstart: get a stack running locally in 5 minutes.
• React integration: tracker provider and dashboard component patterns.
• For SaaS: real-world examples of where this shape fits.