Tracker Reference

1. Overview

The Web Analyzer App tracker (t.js) is a lightweight, dependency-free JavaScript snippet that collects analytics data from your website and sends it to the Web Analyzer App ingestion API. It is designed with three core principles:

• Lightweight — approximately 8.3 KB minified (~3 KB gzipped). No external dependencies.
• Privacy-first — no third-party cookies, no fingerprinting. Visitor identity is stored in first-party localStorage with a cookie fallback. IP addresses are used for geolocation only and never stored.
• Non-blocking — loaded asynchronously with the async attribute. It never delays your page render or interferes with other scripts.

What the tracker collects

• Page views (URL, path, referrer, title)
• Session start and end (inferred from inactivity)
• Time on page — active seconds, idle seconds, total duration
• Scroll depth (0–100%)
• Device type, browser, and OS (from User-Agent)
• Country (geo-resolved server-side from IP — the raw IP is never stored)
• UTM parameters and ad-platform click IDs (gclid, fbclid, msclkid, etc.)
• Core Web Vitals — LCP, CLS, INP, TTFB
• Custom events with optional JSON payloads

2. Installation

Add the following snippet to every page you want to track, just before the closing </body> tag:

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script src="https://webanalyzerapp.com/t.js" async defer></script>

Replace YOUR_TRACKING_KEY with the tracking key shown on your website's detail page in the dashboard. The key is a unique identifier for your website and is required for the tracker to function.

Alternative: data-key attribute

You can also pass the tracking key via a data-key attribute on the script tag. This keeps your HTML cleaner if you prefer a single-line embed:

<script async src="https://webanalyzerapp.com/t.js"
        data-key="YOUR_TRACKING_KEY"></script>

3. Configuration Options

All configuration is done via window.* variables set before the tracker script loads. The tracker reads these values at initialization time.

<script>
  window.wa_key       = 'abc123-your-tracking-key';
  window.wa_auto = true;
</script>
<script src="https://webanalyzerapp.com/t.js" async defer></script>

4. JavaScript API

Once the tracker script loads, a global window.Tracker object is available with the following methods:

Tracker.track(name: string, payload?: Record<string, any>): void
Tracker.page(path?: string): void

Tracker.track() examples

// Simple event with no payload
Tracker.track('signup');

// Event with a payload object
Tracker.track('purchase', {
  product_id: 'sku-42',
  value: 49.99,
  currency: 'USD'
});

// Button click tracking
document.getElementById('cta-btn').addEventListener('click', function() {
  Tracker.track('cta_click', { button: 'hero', page: location.pathname });
});

Tracker.page() examples

// Record a page view for the current URL
Tracker.page();

// Record a page view for a specific path
Tracker.page('/virtual/thank-you');

Pre-stub queue pattern

Since the tracker loads asynchronously, there is a brief window where Tracker.track() is not yet available. Use the pre-stub queue pattern to fire events immediately without waiting for the script to load. Queued events are flushed automatically once the tracker initialises.

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;

  // Create a stub Tracker with a queue before the real script loads
  window.Tracker = window.Tracker || { _q: [] };
  window.Tracker.track = window.Tracker.track || function(name, payload) {
    window.Tracker._q.push([name, payload]);
  };

  // These events will be queued and sent once the tracker is ready
  Tracker.track('page_intent', { source: 'landing' });
</script>
<script src="https://webanalyzerapp.com/t.js" async defer></script>

5. Autotrack Events

When window.wa_auto = true is set, the tracker automatically fires the following events without any additional code. These appear in your Events dashboard alongside custom events.

Supported file extensions

.pdf, .zip, .docx, .doc, .xlsx, .xls, .pptx, .ppt, .csv, .mp4, .mp3, .dmg, .exe, .pkg, .deb, .rpm, .tar, .gz, .rar, .7z, .epub, .apk

Supported search query parameters

q, s, query, search, keyword, keywords, term, searchword, srch, live-search, search_query, text, find, k, kw, search_term, sq, wp_search, dgSearchQuery, ia_search, bbp_search

6. Session Management

The tracker manages visitor identity and session lifecycle using browser storage. No server-side cookies or third-party identifiers are involved.

Visitor identity

Each visitor is assigned a UUID v4 identifier, stored in localStorage under the key ot_vid. If localStorage is unavailable (e.g. in private browsing), a first-party cookie named ot_vid is used as a fallback (365-day expiry, SameSite=Lax). This UUID is sent to the server to associate page views and events with a returning visitor.

Session lifecycle

A new session is created on the first page load in a browser tab. The session ID is stored in sessionStorage under the key ot_sid, so it persists across MPA (multi-page application) navigations within the same tab but is automatically discarded when the tab is closed.

Activity and idle detection

The tracker monitors user activity via mousemove, keydown, scroll, click, and touchstart events. If no activity is detected for 30 seconds, the user is marked as idle. Time is split into active seconds and idle seconds, giving you accurate engagement metrics.

Heartbeat mechanism

While the user is active, the tracker sends a heartbeat request to the server every 60 seconds. This keeps the session alive and updates the session duration on the server. Heartbeats are skipped when the user is idle to avoid inflating session duration. When the user leaves the page (tab close or navigation), a final beacon is sent with the exit page, total duration, and page view count.

7. SPA Support

The tracker has built-in support for Single Page Applications (SPAs). It automatically detects client-side route changes by patching history.pushState and history.replaceState, and by listening for popstate and hashchange events. In most cases, no additional code is needed.

How it works

• When a route change is detected, the tracker automatically closes the current page view (recording time on page, scroll depth, and Web Vitals) and opens a new one.
• The session is maintained across all route changes within the same tab.
• UTM parameters and referrer data are stripped from the recorded path to keep URLs clean.

React / Next.js

React Router and Next.js use history.pushState internally, so the tracker will detect route changes automatically. Simply install the snippet once in your index.html, _app.js, or layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="wa-config" strategy="beforeInteractive">
          {`window.wa_key = 'YOUR_KEY';
            window.wa_auto = true;`}
        </Script>
        <Script
          src="https://webanalyzerapp.com/t.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Vue / Nuxt

Vue Router also uses history.pushState. Add the snippet to your index.html or Nuxt config:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          children: `window.wa_key = 'YOUR_KEY';
                      window.wa_auto = true;`
        },
        {
          src: 'https://webanalyzerapp.com/t.js',
          async: true, defer: true
        }
      ]
    }
  }
})

Svelte / SvelteKit

<body data-sveltekit-preload-data="hover">
  %sveltekit.body%
  <script>
    window.wa_key = 'YOUR_KEY';
    window.wa_auto = true;
  </script>
  <script src="https://webanalyzerapp.com/t.js" async defer></script>
</body>

Manual page view (fallback)

If automatic detection does not work for your framework (e.g. a custom routing library), you can manually trigger page views:

// Call after each route change
Tracker.page();

// Or with an explicit path
Tracker.page('/dashboard/settings');

8. Bot Detection

The tracker includes client-side bot detection that silently prevents tracking in automated and headless browsers. This ensures your analytics data is not polluted by crawlers, testing frameworks, or scraping tools. Bot detection runs as a two-layer system:

Client-side detection (t.js)

The tracker checks for the following signals before initialising. If any match, the tracker exits silently — no session, page views, or events are recorded:

Server-side detection

The server also inspects the User-Agent string on session creation. If a known bot pattern is detected (e.g. Googlebot, bingbot, AhrefsBot), the server returns { bot: true } and the tracker halts all further requests for that session.

9. Data Attributes

The tracker script tag supports optional data-* attributes for configuration that does not require a separate <script> block.

<script>
  window.wa_key = 'YOUR_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"
        data-search-params="product_query,filter_term"></script>

10. Performance

The tracker is designed to have zero measurable impact on your website's performance. Here is how:

11. Troubleshooting

Common issues and their solutions: