JavaScript & React Native

Wann das SDK, wann das Script?

Für klassische Websites reicht das einzeilige Tracking-Script (automatische Seitenaufrufe). Nimm das SDK, wenn du Screens und Events explizit tracken, Events bündeln oder außerhalb eines Browsers messen willst.

Installation

Das npm-Paket @trackd/sdk folgt (noch nicht veröffentlicht). Bis dahin per Copy-in:

curl -o src/lib/trackd.mjs   https://trackd.one/sdk/trackd.mjs
curl -o src/lib/trackd.d.mts https://trackd.one/sdk/trackd.d.ts   # optional, TypeScript-Typen

import { Trackd } from './lib/trackd.mjs'

const trackd = new Trackd({ websiteId: 'YOUR_WEBSITE_ID', host: 'https://trackd.one' })

trackd.screen('Home')                       // Screen-/Seitenaufruf
trackd.event('signup', { plan: 'pro' })     // Custom Event
trackd.revenue(9.99, 'EUR', 'order-123')

Ohne Bundler (UMD-Build, stellt window.Trackd bereit):

<script src="https://trackd.one/sdk/trackd.js"></script>
<script>
  const trackd = new Trackd({ websiteId: 'YOUR_WEBSITE_ID' })
  trackd.screen('Home')
</script>

Dateien: trackd.mjs (ES-Modul), trackd.js (UMD), trackd.d.ts (Typen).

API

const trackd = new Trackd({
  websiteId: 'YOUR_WEBSITE_ID',   // Pflicht
  host: 'https://trackd.one',     // selbst gehostet? URL deiner Instanz (HTTPS)
  platform, appVersion, osVersion, screen, language, device, // wo möglich automatisch
  debug: false,
})

trackd.screen('Settings/Profile', 'Profile')           // mit Titel
trackd.event('signup', { plan: 'pro', trial: true })   // flache Daten
await trackd.flush()                                   // jetzt senden (lehnt nie ab)
trackd.setEnabled(false)                               // Opt-out: stoppen + Warteschlange leeren

Weitere Optionen: enabled, respectDoNotTrack (Browser, Standard true), autoFlushOnHide, flushAt (20), flushInterval (10000 ms; React Native 30000 ms), maxQueueSize (500), sessionTimeout (30 min), requestTimeout (15 s).

Web-SPA (React Router, Vue Router …)

// React Router
function TrackScreens() {
  const location = useLocation()
  useEffect(() => { trackd.screen(location.pathname) }, [location.pathname])
  return null
}

// Vue Router
router.afterEach((to) => trackd.screen(to.path))

Im Browser erkennt das SDK platform: "web", Bildschirmgröße, Sprache und Geräteklasse und sendet die Warteschlange beim Verstecken des Tabs per navigator.sendBeacon. Global Privacy Control / Do Not Track schalten das Tracking ab, solange du nicht respectDoNotTrack: false setzt. Web-Requests müssen von der registrierten Domain kommen.

React Native

import { AppState, Platform } from 'react-native'
import { Trackd } from './lib/trackd.mjs'

export const trackd = new Trackd({
  websiteId: 'YOUR_WEBSITE_ID',
  platform: Platform.OS === 'ios' && Platform.isPad ? 'ipados' : Platform.OS,
  osVersion: Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.constants.Release}`,
  appVersion: '1.4.0',
  device: Platform.isPad ? 'tablet' : 'mobile',
})

// Beim Wechsel in den Hintergrund senden, Session nach 30 min Abwesenheit erneuern
AppState.addEventListener('change', (state) => {
  if (state === 'background') trackd.onBackground()
  else if (state === 'active') trackd.onForeground()
})

Für das Screen-Tracking mit React Navigation rufst du trackd.screen(route.name) in onReady und onStateChange des NavigationContainer auf. React-Native-Requests haben keinen Origin-Header — trage im Dashboard die Bundle-ID als „Domain“ ein. Android-Release-Builds brauchen die INTERNET-Berechtigung (in den Vorlagen enthalten).

Node.js & Electron

const trackd = new Trackd({ websiteId: process.env.TRACKD_ID, platform: 'node', appVersion: '3.0.0' })
trackd.event('command_run', { command: 'deploy', ok: true })

// Timer halten den Prozess nicht am Leben — vor dem Beenden senden:
await trackd.flush()

Nutze platform: 'node' (oder 'server') für CLIs, Server und Backends. In Electron werden Plattform und device: "desktop" automatisch erkannt.