Getting started

From zero to live analytics in about ten minutes: create a site, paste one script tag, and watch events arrive.

1 · Create a site

Sign in and add a site

Go to /sites → Add site. Enter the site name, the domain real traffic will come from (e.g. fanconhub.com), and its reporting timezone. FocusStat automatically registers both the bare and www. variants of the domain.

The reporting timezone decides where a day begins. Sites report in UTC unless you pick another zone, so a New York site left on the default starts "Today" at 8pm the previous evening. Change it any time in Settings → General: the current zone is always shown under the site name in the sidebar. Nothing is rewritten when you switch, because events are stored with exact timestamps and grouped into days when you read them.

Understand the site id

Each site gets a public site id - it appears in the snippet as data-site="…". It is not a secret: the server only accepts events whose browser Origin matches your registered domains, so someone copying your id cannot pollute your data. Manage allowed domains in Settings → General.

2 · Install the snippet

Copy the snippet from Settings → Installation and paste it into the <head> of every page (in most frameworks: once, in the root layout or template):

Paste into <head>

<script
  defer
  src="https://focusstat.com/tracker.js"
  data-site="YOUR_SITE_ID">
</script>

That's the whole install. The script is ~10 KB gzipped, loads deferred (never blocks rendering), batches events, and fails silently - if FocusStat is ever unreachable, your site is completely unaffected.

Framework notes

Next.js (App Router) - app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          src="https://focusstat.com/tracker.js"
          data-site="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Plain HTML / PHP / WordPress

<!-- WordPress: Appearance → Theme File Editor → header.php,
     or any "insert headers" plugin. Static sites: every page's <head>. -->
<script defer src="https://focusstat.com/tracker.js" data-site="YOUR_SITE_ID"></script>

Vue, Svelte, React SPA, Angular: add the tag to index.html. Client-side route changes (pushState/replaceState/popstate) are detected automatically - no router integration needed. Hash-based routers: add data-hash-routing="true".

3 · Verify it works

Open the Installation page

Settings → Installation shows Tracker health and a live event debugger that refreshes every 5 seconds. Open your site in another tab, click around - pageviews should appear within seconds.

Or use the built-in playground

Visit /test-site?site=YOUR_SITE_ID on your analytics deployment. It loads your real tracker and has buttons that generate every event type - SPA navigations, custom events, conversions, rage clicks, JS errors, scroll depth.

Send a test event

The Send test event button on the Installation page posts directly to your ingestion API and confirms the whole pipeline database-side.

Seeing events? Open Overview, pick a date range, and click anything - every page, source, country and device is a filter. Next: set up custom events and goals.

Troubleshooting

No events arriving? Check, in order:

1 · Browser devtools → Network: is tracker.js loading (200)? 2 · Is /api/collect returning 202? A 403 means the page's origin isn't in your allowed domains (Settings → General) - localhost testing requires "Accept events from localhost" (Settings → Privacy, on by default). 3 · Tracker health on the Installation page counts rejected origins and invalid payloads in the last 24h, which pinpoints the reason. 4 · An ad-blocker on your own browser may block any analytics script - test in a private window with extensions off.