React Native / Expo — Hilfecenter

Integrieren Sie Flowsery Analytics in Ihre React Native- oder Expo-App mithilfe des dedizierten flowsery/react-native Entrypoints aus dem Flowsery Analytics npm-Paket.

1. SDK installieren

Installieren Sie das Paket zusammen mit den erforderlichen Peer-Abhängigkeiten:

Terminal

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

2. Umgebungsvariablen setzen

Definieren Sie in Ihrem Expo-Projekt diese Umgebungsvariablen (z.B. in .env plus Ihrer Expo-Konfiguration):

EXPO_PUBLIC_FLOWSERY_WEBSITE_ID -- Ihre Flowsery Analytics Website-ID (z.B. flid_******)
EXPO_PUBLIC_FLOWSERY_DOMAIN -- muss mit der Domain übereinstimmen, die in Ihren Flowsery Analytics Website-Einstellungen konfiguriert ist (für mobile Apps können Sie z.B. yourapp.com verwenden)

3. App mit `FlowseryProvider` umschließen

Umschließen Sie Ihren Navigationsbaum mit der Provider-Komponente:

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. Screens und Events verfolgen

Screens mit einem Hook verfolgen

JavaScript

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

Benutzerdefinierte Events verfolgen

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

Benutzer identifizieren

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. Warum die zusätzlichen Pakete?

Der flowsery/react-native Entrypoint basiert auf:

AsyncStorage für persistenten Speicher
NetInfo zur Erkennung des Netzwerkstatus
Expo Constants / Device (falls verfügbar) für App- und Gerätemetadaten

Deshalb müssen diese zusätzlichen React Native / Expo-Pakete zusammen mit flowsery installiert werden.