Demarrage

NPM SDK

Suivi analytique typé pour JavaScript et TypeScript

Installez Flowsery Analytics en tant que package npm pour un suivi d'evenements type-safe dans les projets JavaScript et TypeScript. Compatible avec React, Next.js, Vue, Angular et tout autre framework web.

Pourquoi utiliser le SDK ?

  • Support TypeScript — Definitions de types completes pour l'autocompletion et les verifications a la compilation
  • Tree-shakeable — Importez uniquement les elements dont vous avez besoin
  • Agnostique au framework — Compatible avec React, Vue, Angular, Svelte, React Native / Expo et vanilla JS
  • Suivi automatique — Collecte integree des pages vues, des sessions et des appareils
  • Pret pour le hors-ligne — Met en file d'attente les evenements hors-ligne et les envoie une fois la connectivite retablie

Installation

npm install flowsery

Demarrage rapide

Configuration de base

Initialisation de base
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' });

Exemple React / Next.js

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

Exemple React Native / Expo

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

Options de configuration

Interface FlowseryConfig
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
}

Methodes de l'API

trackEvent

Suivez des evenements personnalises avec des metadonnees optionnelles.

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

trackPayment

Suivez des evenements de paiement avec le montant, la devise et les metadonnees.

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

trackPageview

Suivez manuellement une page vue.

flowsery.trackPageview();

identify

Identifiez le visiteur actuel avec les details de l'utilisateur.

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

stop

Arretez le tracker et envoyez tous les evenements en file d'attente.

flowsery.stop();

reset

Reinitialisez l'etat du client (efface les donnees du visiteur et de la session).

flowsery.reset();

getVisitorId / getSessionId

Recuperez l'identifiant actuel du visiteur ou de la session.

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

Suivi inter-domaines (SDK)

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

Structure du package

  • flowsery — SDK principal pour les applications web (adaptateurs localStorage, fetch)
  • flowsery/react-native — Implementation React Native / Expo (AsyncStorage, NetInfo, Expo device)

Besoin d'aide ?

Consultez la reference de configuration du script pour les options avancees comme le suivi localhost, la configuration du proxy et la configuration inter-domaines.