Install Tiny

Tiny Analytics is browser-first. In most setups you will either paste the generated browser snippet into a shared layout or initialize the React helper once in your app bootstrap.

Browser snippet

Use the generated snippet from Analytics > Setup when you want the exact source key, API base URL, and debug link that belong to a specific source.

<script>
  window.tinyAnalytics = window.tinyAnalytics || function () {
    ;(window.tinyAnalytics.q = window.tinyAnalytics.q || []).push(arguments)
  }
</script>
<script src="https://your-tiny-api/sdk.js" async></script>
<script>
  tinyAnalytics("init", {
    publicKey: "pk_your_source_key",
    apiBaseUrl: "https://your-tiny-api",
    autoPageviews: true
  })
</script>

Place this in the shared HTML shell that renders on every page you want to track.

React helper

Tiny also ships ESM helpers through @tiny/analytics.

import { initTinyAnalytics, track } from "@tiny/analytics";

initTinyAnalytics({
  publicKey: "pk_your_source_key",
  apiBaseUrl: "https://your-tiny-api",
  autoPageviews: true,
});

track("report_generated", {
  reportType: "weekly",
});

Call initTinyAnalytics() once at app bootstrap. Do not put it inside a deeply nested component or a repeated render path.

Nextjs placement

For Next.js, put Tiny in the shared app shell so it runs once for the whole application.

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Script id="tiny-analytics-queue" strategy="beforeInteractive">{`
window.tinyAnalytics = window.tinyAnalytics || function(){(window.tinyAnalytics.q = window.tinyAnalytics.q || []).push(arguments)};
        `}</Script>
        <Script src="https://your-tiny-api/sdk.js" strategy="afterInteractive" />
        <Script id="tiny-analytics-init" strategy="afterInteractive">{`
tinyAnalytics("init", {
  publicKey: "pk_your_source_key",
  apiBaseUrl: "https://your-tiny-api",
  autoPageviews: true
});
        `}</Script>
        {children}
      </body>
    </html>
  );
}

In App Router, place this in app/layout.tsx. In Pages Router, use pages/_app.tsx or pages/_document.tsx.

Allowed origins

Tiny validates the request origin against the source configuration before bootstrap succeeds.

Add every real browser origin to the source: production, staging, localhost, 127.0.0.1, and any LAN preview URL you actually use. Missing origins cause 403 responses and no events.

A few rules help avoid most setup issues:

install Tiny once, not in multiple nested layouts
keep autoPageviews enabled unless you have a deliberate manual page strategy
do not call track() during initialization
regenerate the public key only when you are ready to update existing installs

Install brief

Analytics > Setup also gives you a Copy install brief action.

Use that brief when you want a coding assistant or teammate to place the install for you. Keep the allowed-origins section intact so the person making the change understands which browser origins must be configured before you test.

After installation, move to Verify live events.