Getting Started

NPM SDK

Type-safe analytics tracking for JavaScript and TypeScript

Install Flowsery Analytics as an npm package for type-safe event tracking in JavaScript and TypeScript projects. Works with React, Next.js, Vue, Angular, and any other web framework.

Why use the SDK?

  • TypeScript support — Full type definitions for autocomplete and compile-time checks
  • Tree-shakeable — Import only the pieces you need
  • Framework agnostic — Compatible with React, Vue, Angular, Svelte, React Native / Expo, and vanilla JS
  • Automatic tracking — Built-in page view, session, and device collection
  • Offline-ready — Queues events while offline and flushes them once connectivity returns

Installation

npm install flowsery

Quick start

Basic setup

Basic initialization
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 example

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 example

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>
  );
}

Configuration options

FlowseryConfig interface
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 methods

trackEvent

Track custom events with optional metadata.

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

trackPayment

Track payment events with amount, currency, and metadata.

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

trackPageview

Manually track a page view.

flowsery.trackPageview();

identify

Identify the current visitor with user details.

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

stop

Stop the tracker and flush any queued events.

flowsery.stop();

reset

Reset the client state (clears visitor and session data).

flowsery.reset();

getVisitorId / getSessionId

Retrieve the current visitor or session identifier.

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

Cross-domain tracking (SDK)

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

Package structure

  • flowsery — Main SDK for web applications (localStorage, fetch adapters)
  • flowsery/react-native — React Native / Expo implementation (AsyncStorage, NetInfo, Expo device)

Need help?

Check the script configuration reference for advanced options like localhost tracking, proxy setup, and cross-domain configuration.