Skip to content
tracing.toolstracing.tools

Quickstart

Five minutes from nothing to a live dashboard.

  1. Create a site

    Section titled “Create a site”

    Sign in at tracing.tools and add the domain.

    Enter the bare hostname — acme.com. The protocol, any path and a leading www. are stripped before the site is stored, so https://www.acme.com/app and acme.com create the same site. The domain must look like a real one (^[a-z0-9.-]+\.[a-z]{2,}$) and must be unique within your account.

    You also pick, and can change later:

    Field Default What it affects
    Name the domain The label in the site switcher
    Timezone UTC Where every day, week and month boundary is cut
    Currency USD Which currency the revenue screen opens on

    The site is created with a public key of the form pk_live_ plus eight hex characters. That key is public by design: it goes in your HTML.

  2. Install the script

    Section titled “Install the script”

    Copy the snippet from Settings → Installation and paste it before </head>.

    index.html
    <script defer
      data-site="pk_live_xxxxxxxx"
      data-api="https://ingest.tracing.tools"
      src="https://ingest.tracing.tools/t.js"></script>

    defer matters: the tracker reads document.currentScript, and without a deferred or bottom-of-body position it may run before the DOM it wants to bind click handlers to exists. If neither is possible, the tracker falls back to the first script[data-site] on the page.

    Framework-specific versions are in Installation guides.

  3. Publish, then load a page

    Section titled “Publish, then load a page”

    Open your site in a normal browser tab. Within a second or two the first pageview lands.

    Open Realtime in the dashboard. You should see Online now: 1 and your path in the feed. Realtime polls every five seconds.

  4. Send your first custom event

    Section titled “Send your first custom event”

    Anywhere after the script has loaded:

    tracing("signup_completed", { plan: "pro" });

    Or without writing JavaScript at all:

    <button data-tracing-event="cta_click" data-tracing-event-position="hero">
      Start free
    </button>

    Both show up on the Events screen — the first with a plan property you can break down by, the second with position.

  5. Turn it into a goal

    Section titled “Turn it into a goal”

    On Events, select the event and press Create goal. Or go to Goals → New goal and match a pathname instead, with * as a wildcard:

    /checkout/success
    /docs/*
    /blog/*/comments

    Once a goal exists, every other screen can be filtered to only people who converted it — see Goals.

Verify from localhost

Section titled “Verify from localhost”

The tracker refuses to send anything from localhost, 127.0.0.1, [::1] or a file: URL. That is deliberate: local page loads would otherwise pollute production numbers.

To debug against a dev server, set a flag in the browser console and reload:

localStorage.setItem("tracing_debug", "1");

Every hit is then sent as if the page were live, including from localhost. To stop:

localStorage.removeItem("tracing_debug");

Checklist

Section titled “Checklist”
  • The script tag is on every page, not just the home page.
  • data-site is your own pk_live_… key.
  • data-api points at the collector you actually deploy (https://ingest.tracing.tools unless you proxy it).
  • Your Content-Security-Policy allows the collector host — see CSP.
  • Your own IP is in Settings → General → Excluded IPs if you browse the site a lot.

Next

Section titled “Next”