@fixture-inc/tracker-browser

Browser tracking script for Fixture. Drop-in replacement for the legacy tracker.js.

Installation

Script Tag (Recommended for external sites)

<script
  src="https://fixture.app/tracker.js"
  data-web_property_id="your-property-id"
></script>

Optional attributes:

• data-api_url - Override API endpoint (for local development)

npm (For bundled applications)

pnpm add @fixture-inc/tracker-browser

import { BrowserTracker } from '@fixture-inc/tracker-browser'

const tracker = new BrowserTracker({
  propertyId: 'your-property-id',
})

// Initial pageview is tracked automatically
// SPA navigations are tracked automatically

Features

• Automatic pageview tracking - Tracks on load and SPA navigation
• SPA support - Intercepts pushState, replaceState, and popstate
• DOM event tracking - Track clicks via data-fixture-event-* attributes
• Cookie-based visitor ID - Persists visitor ID in fxid cookie (1 year)
• Reliable delivery - Uses fetch with keepalive

API

Script Tag API

// Track a pageview manually
window.fixture.trackPageview()

// Track a custom event
window.fixture.trackEvent('signup_click', { plan: 'pro' })

// With context
window.fixture.trackEvent('purchase', { amount: 99 }, { source: 'checkout' })

BrowserTracker API

interface BrowserTrackerConfig {
  propertyId: string
  apiUrl?: string              // Default: 'https://api.fixture.app'
  debug?: boolean
  cookieName?: string          // Default: 'fxid'
  cookieDays?: number          // Default: 365
  cookieDomain?: string        // For cross-subdomain tracking
  trackSpaNavigation?: boolean // Default: true
  trackDomEvents?: boolean     // Default: true
}

class BrowserTracker {
  getVisitorId(): string
  resetVisitorId(): string
  trackPageview(options?: { url?: string }): void
  trackEvent(name: string, properties?: Record<string, unknown>): void
  destroy(): void  // Cleanup SPA and DOM tracking
}

DOM Event Tracking

Track clicks automatically using data attributes:

<button
  data-fixture-event-name="signup_click"
  data-fixture-event-plan="pro"
>
  Sign Up
</button>

Or CSS classes (useful when you can't add data attributes):

<button class="fixture-event-name=signup_click fixture-event-plan=pro">
  Sign Up
</button>

The tracker searches up to 15 parent elements to find event annotations.

Local Development

Override the API endpoint for local testing:

<script
  src="/tracker.js"
  data-web_property_id="test"
  data-api_url="http://localhost:8000"
></script>