React Native / Expo — Central de ajuda

Integre o Flowsery Analytics na sua aplicação React Native ou Expo usando o entrypoint dedicado flowsery/react-native do pacote npm do Flowsery Analytics.

1. Instalar o SDK

Instale o pacote junto com as suas dependências peer necessárias:

Terminal

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

2. Definir variáveis de ambiente

No seu projeto Expo, defina estas variáveis de ambiente (por exemplo em .env e na sua configuração Expo):

EXPO_PUBLIC_FLOWSERY_WEBSITE_ID -- o seu website ID do Flowsery Analytics (ex.: flid_******)
EXPO_PUBLIC_FLOWSERY_DOMAIN -- deve corresponder ao domínio configurado nas definições do seu website Flowsery Analytics (para aplicações móveis pode usar algo como yourapp.com)

3. Envolver a sua aplicação com `FlowseryProvider`

Envolva a sua árvore de navegação com o 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 ecrãs e eventos

Rastrear ecrãs com um 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 utilizadores

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. Porquê os pacotes extra?

O entrypoint flowsery/react-native depende de:

AsyncStorage para armazenamento persistente
NetInfo para detetar o estado da rede
Expo Constants / Device (quando disponíveis) para metadata da aplicação e dispositivo

É por isso que esses pacotes adicionais de React Native / Expo devem ser instalados juntamente com o flowsery.