React Native / Expo — Centre d'aide

Integrez Flowsery Analytics dans votre application React Native ou Expo en utilisant le point d'entree dedie flowsery/react-native du package npm Flowsery Analytics.

1. Installer le SDK

Installez le package avec ses dependances requises :

Terminal

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

2. Definir les variables d'environnement

Dans votre projet Expo, definissez ces variables d'environnement (par exemple dans .env et votre configuration Expo) :

EXPO_PUBLIC_FLOWSERY_WEBSITE_ID -- votre identifiant de site Flowsery Analytics (par ex. flid_******)
EXPO_PUBLIC_FLOWSERY_DOMAIN -- doit correspondre au domaine configure dans les parametres de votre site Flowsery Analytics (pour les applications mobiles vous pouvez utiliser quelque chose comme yourapp.com)

3. Enveloppez votre application avec `FlowseryProvider`

Enveloppez votre arbre de navigation avec le composant 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. Suivre les ecrans et evenements

Suivre les ecrans avec un hook

JavaScript

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

Suivre les evenements personnalises

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

Identifier les utilisateurs

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. Pourquoi les packages supplementaires ?

Le point d'entree flowsery/react-native depend de :

AsyncStorage pour le stockage persistant
NetInfo pour detecter l'etat du reseau
Expo Constants / Device (lorsque disponibles) pour les metadonnees de l'application et de l'appareil

C'est pourquoi ces packages React Native / Expo supplementaires doivent etre installes en meme temps que flowsery.