Primeiros passos

NPM SDK

Rastreamento analítico tipado para JavaScript e TypeScript

Instale o Flowsery Analytics como um pacote npm para rastreamento de eventos type-safe em projetos JavaScript e TypeScript. Funciona com React, Next.js, Vue, Angular e qualquer outro framework web.

Por que usar o SDK?

  • Suporte TypeScript — Definicoes de tipo completas para autocompletar e verificacoes em tempo de compilacao
  • Tree-shakeable — Importe apenas o que voce precisa
  • Agnostico a framework — Compativel com React, Vue, Angular, Svelte, React Native / Expo e vanilla JS
  • Rastreamento automatico — Coleta integrada de visualizacoes de pagina, sessoes e dispositivos
  • Pronto para offline — Enfileira eventos enquanto offline e os envia quando a conectividade retorna

Instalacao

npm install flowsery

Inicio rapido

Configuracao basica

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

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

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

Opcoes de configuracao

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
}

Metodos da API

trackEvent

Rastreie eventos personalizados com metadados opcionais.

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

trackPayment

Rastreie eventos de pagamento com valor, moeda e metadados.

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

trackPageview

Rastreie manualmente uma visualizacao de pagina.

flowsery.trackPageview();

identify

Identifique o visitante atual com detalhes do usuario.

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

stop

Pare o rastreador e envie todos os eventos em fila.

flowsery.stop();

reset

Reinicie o estado do cliente (limpa os dados do visitante e da sessao).

flowsery.reset();

getVisitorId / getSessionId

Recupere o identificador atual do visitante ou da sessao.

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

Rastreamento entre dominios (SDK)

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

Estrutura do pacote

  • flowsery — SDK principal para aplicacoes web (adaptadores localStorage, fetch)
  • flowsery/react-native — Implementacao React Native / Expo (AsyncStorage, NetInfo, Expo device)

Precisa de ajuda?

Consulte a referencia de configuracao do script para opcoes avancadas como rastreamento em localhost, configuracao de proxy e configuracao entre dominios.