Erste Schritte

NPM SDK

Typsicheres Analytics-Tracking für JavaScript und TypeScript

Installieren Sie Flowsery Analytics als npm-Paket fuer typsicheres Event-Tracking in JavaScript- und TypeScript-Projekten. Funktioniert mit React, Next.js, Vue, Angular und jedem anderen Web-Framework.

Warum das SDK verwenden?

  • TypeScript-Unterstuetzung -- Vollstaendige Typdefinitionen fuer Autovervollstaendigung und Kompilierzeit-Pruefungen
  • Tree-Shaking-faehig -- Importieren Sie nur die Teile, die Sie benoetigen
  • Framework-unabhaengig -- Kompatibel mit React, Vue, Angular, Svelte, React Native / Expo und Vanilla JS
  • Automatisches Tracking -- Integrierte Erfassung von Seitenaufrufen, Sitzungen und Geraeten
  • Offline-faehig -- Reiht Ereignisse ein, waehrend Sie offline sind, und sendet sie, sobald die Verbindung wiederhergestellt ist

Installation

npm install flowsery

Schnellstart

Grundeinrichtung

Grundlegende Initialisierung
import { initFlowsery } from 'flowsery';

const flowsery = await initFlowsery({
  websiteId: 'flid_******',
  domain: 'your_domain.com',
});

// Track custom events
flowsery.trackEvent('signup', { email: 'user@example.com' });

// Identify users
flowsery.identify({ userId: 'user_123', email: 'user@example.com', name: 'John Doe' });

React / Next.js Beispiel

lib/analytics.ts
import { initFlowsery } from 'flowsery';

let flowsery: any = null;

export async function getAnalytics() {
  if (!flowsery) {
    flowsery = await initFlowsery({
      websiteId: process.env.NEXT_PUBLIC_FLOWSERY_WEBSITE_ID!,
      domain: process.env.NEXT_PUBLIC_FLOWSERY_DOMAIN,
    });
  }
  return flowsery;
}

React Native / Expo Beispiel

Root layout
import { FlowseryProvider } from 'flowsery/react-native';

export default function RootLayout() {
  return (
    <FlowseryProvider
      config={{
        websiteId: process.env.EXPO_PUBLIC_FLOWSERY_WEBSITE_ID!,
        domain: process.env.EXPO_PUBLIC_FLOWSERY_DOMAIN!,
        local: __DEV__,
      }}>
      {/* your navigation / screens here */}
    </FlowseryProvider>
  );
}

Konfigurationsoptionen

FlowseryConfig-Schnittstelle
interface FlowseryConfig {
  websiteId: string;
  domain?: string;
  apiBase?: string;
  local?: boolean;             // default: false
  cookieless?: boolean;        // default: false
  allowFileProtocol?: boolean; // default: false
  allowIframe?: boolean;       // default: false
  disablePayments?: boolean;   // default: false
  disableConsole?: boolean;    // default: false
  allowedHostnames?: string[];
  hashMode?: boolean;          // default: false
}

API-Methoden

trackEvent

Benutzerdefinierte Ereignisse mit optionalen Metadaten verfolgen.

flowsery.trackEvent('button_click');
flowsery.trackEvent('purchase', { amount: 99.99, currency: 'USD', product: 'Premium Plan' });

trackPayment

Zahlungsereignisse mit Betrag, Waehrung und Metadaten verfolgen.

flowsery.trackPayment({ amount: 49, currency: 'USD', email: 'user@example.com' });

trackPageview

Einen Seitenaufruf manuell verfolgen.

flowsery.trackPageview();

identify

Den aktuellen Besucher mit Nutzerdetails identifizieren.

flowsery.identify({ userId: 'user_123', email: 'user@example.com', name: 'John Doe' });

stop

Den Tracker stoppen und alle wartenden Ereignisse senden.

flowsery.stop();

reset

Den Client-Status zuruecksetzen (loescht Besucher- und Sitzungsdaten).

flowsery.reset();

getVisitorId / getSessionId

Die aktuelle Besucher- oder Sitzungs-ID abrufen.

const visitorId = flowsery.getVisitorId();
const sessionId = flowsery.getSessionId();

Cross-Domain-Tracking (SDK)

const params = flowsery.getTrackingParams();
const url = flowsery.buildCrossDomainUrl('https://myapp.io/signup');

Paketstruktur

  • flowsery -- Haupt-SDK fuer Webanwendungen (localStorage, fetch-Adapter)
  • flowsery/react-native -- React Native / Expo-Implementierung (AsyncStorage, NetInfo, Expo Device)

Brauchen Sie Hilfe?

Sehen Sie sich die Skriptkonfigurationsreferenz fuer erweiterte Optionen wie Localhost-Tracking, Proxy-Einrichtung und Cross-Domain-Konfiguration an.