Primeros pasos

NPM SDK

Seguimiento de análisis con tipos seguros para JavaScript y TypeScript

Instale Flowsery Analytics como un paquete npm para seguimiento de eventos con tipado seguro en proyectos JavaScript y TypeScript. Funciona con React, Next.js, Vue, Angular y cualquier otro framework web.

Por que usar el SDK?

  • Soporte TypeScript -- Definiciones de tipos completas para autocompletado y verificaciones en tiempo de compilacion
  • Tree-shakeable -- Importe solo las partes que necesite
  • Independiente del framework -- Compatible con React, Vue, Angular, Svelte, React Native / Expo y Vanilla JS
  • Seguimiento automatico -- Recopilacion integrada de vistas de pagina, sesiones y dispositivos
  • Listo para offline -- Encola eventos mientras esta sin conexion y los envia una vez que se restablece la conectividad

Instalacion

npm install flowsery

Inicio rapido

Configuracion basica

Inicializacion basica
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' });

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

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

Opciones de configuracion

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

Metodos de la API

trackEvent

Rastrear eventos personalizados con metadatos opcionales.

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

trackPayment

Rastrear eventos de pago con monto, moneda y metadatos.

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

trackPageview

Rastrear manualmente una vista de pagina.

flowsery.trackPageview();

identify

Identificar al visitante actual con detalles del usuario.

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

stop

Detener el rastreador y enviar cualquier evento en cola.

flowsery.stop();

reset

Restablecer el estado del cliente (borra datos del visitante y la sesion).

flowsery.reset();

getVisitorId / getSessionId

Obtener el identificador actual del visitante o la sesion.

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

Seguimiento entre dominios (SDK)

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

Estructura del paquete

  • flowsery -- SDK principal para aplicaciones web (localStorage, adaptadores fetch)
  • flowsery/react-native -- Implementacion React Native / Expo (AsyncStorage, NetInfo, Expo Device)

Necesita ayuda?

Consulte la referencia de configuracion del script para opciones avanzadas como seguimiento en localhost, configuracion de proxy y configuracion entre dominios.