React Native / Expo — Centro de ayuda

Integra Flowsery Analytics en tu aplicacion React Native o Expo usando el entrypoint dedicado flowsery/react-native del paquete npm de Flowsery Analytics.

1. Instalar el SDK

Instala el paquete junto con sus dependencias peer requeridas:

Terminal

npm install flowsery @react-native-async-storage/async-storage @react-native-community/netinfo expo-constants expo-device

2. Configurar variables de entorno

En tu proyecto Expo, define estas variables de entorno (por ejemplo en .env mas tu configuracion de Expo):

EXPO_PUBLIC_FLOWSERY_WEBSITE_ID -- tu ID de sitio web de Flowsery Analytics (ej. flid_******)
EXPO_PUBLIC_FLOWSERY_DOMAIN -- debe coincidir con el dominio configurado en tu configuracion de sitio web de Flowsery Analytics (para aplicaciones moviles puedes usar algo como yourapp.com)

3. Envolver tu aplicacion con `FlowseryProvider`

Envuelve tu arbol de navegacion con el componente provider:

JavaScript

import { FlowseryProvider } from 'flowsery/react-native';
 
export default function RootLayout() {
  return (
    <FlowseryProvider
      config={{
        websiteId: process.env.EXPO_PUBLIC_FLOWSERY_WEBSITE_ID!,
        // Must match the domain configured in your Flowsery Analytics website settings
        domain: process.env.EXPO_PUBLIC_FLOWSERY_DOMAIN!,
        debug: __DEV__,
      }}>
      {/* your navigation / screens here */}
    </FlowseryProvider>
  );
}

4. Rastrear pantallas y eventos

Rastrear pantallas con un hook

JavaScript

import { useFlowseryScreen } from 'flowsery/react-native';
 
export default function HomeScreen() {
  useFlowseryScreen('HomeScreen');
  return <YourScreenUI />;
}

Rastrear eventos personalizados

JavaScript

import { Pressable, Text } from 'react-native';
import { useFlowseryTrack } from 'flowsery/react-native';
 
export function CTAButton() {
  const track = useFlowseryTrack();
 
  return (
    <Pressable onPress={() => track('cta_click', { source: 'home_screen' })}>
      <Text>Tap to send a test event</Text>
    </Pressable>
  );
}

Identificar usuarios

JavaScript

import { useFlowsery } from 'flowsery/react-native';
 
export async function onLoginSuccess(user) {
  const client = useFlowsery();
  await client?.identify(user.id, {
    email: user.email,
    name: user.name,
  });
}

5. Por que los paquetes adicionales?

El entrypoint flowsery/react-native depende de:

AsyncStorage para almacenamiento persistente
NetInfo para detectar el estado de la red
Expo Constants / Device (cuando esta disponible) para metadata de la aplicacion y dispositivo

Por eso esos paquetes adicionales de React Native / Expo deben instalarse junto con flowsery.