Analytics

Load consent-aware analytics for a site. Use it when measurement must follow the visitor’s privacy choices rather than start on every page load.

Examples

Consent

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";
import { Analytics } from "@kongmy-dev/sapphire-ui/analytics";

function ConsentExample() {
  return (
    <>
      <Analytics />
      <p>
        Analytics remains idle until consent is granted and a tracker is
        configured.
      </p>
    </>
  );
}

export default ConsentExample;

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Props

Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.

Analytics component props
Prop	Type	Required	Local default
`gaId`	`string \| undefined`	No	—
`posthogToken`	`string \| undefined`	No	—
`posthogHost`	`string \| undefined`	No	—
`posthogUiHost`	`string \| undefined`	No	—
`domains`	`string \| undefined`	No	—

Setup

bun add @kongmy-dev/sapphire-ui react react-dom

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import { Analytics } from "@kongmy-dev/sapphire-ui/analytics";

Mixing package and vendored components? Follow application setup.