Analytics mobile avec PostHog React Native, Firebase Analytics et patterns de suivi d'événements.

Analytics

Suivez le comportement des utilisateurs dans votre app mobile pour comprendre l'engagement, la conversion et l'utilisation des fonctionnalités. ScaleRocket Mobile supporte plusieurs fournisseurs d'analytics.

Choisir un fournisseur

Fournisseur	Tier gratuit	Idéal pour
PostHog	1M événements/mois	Analytics produit, feature flags
Firebase Analytics	Illimité	Écosystème Google, rapports de crash
Mixpanel	20M événements/mois	Analyse de funnels, rétention
Amplitude	10M événements/mois	Intelligence produit

PostHog (Recommandé)

PostHog fournit analytics produit, replay de session et feature flags dans un seul outil :

npx expo install posthog-react-native

Configuration

// lib/analytics.ts
import PostHog from "posthog-react-native";

export const posthog = new PostHog("phc_your_api_key", {
  host: "https://app.posthog.com",
  enableSessionReplay: true,
});

Enveloppez votre app avec le provider PostHog :

// app/_layout.tsx
import { PostHogProvider } from "posthog-react-native";
import { posthog } from "@/lib/analytics";

export default function RootLayout() {
  return (
    <PostHogProvider client={posthog}>
      <Slot />
    </PostHogProvider>
  );
}

Suivre les événements

import { usePostHog } from "posthog-react-native";

function CheckoutScreen() {
  const posthog = usePostHog();

  const handlePurchase = async () => {
    posthog.capture("purchase_completed", {
      plan: "pro",
      price: 9.99,
      currency: "USD",
    });
  };

  return <Button title="Subscribe" onPress={handlePurchase} />;
}

Identifier les utilisateurs

Liez les événements à un utilisateur après l'authentification :

function useIdentifyUser() {
  const posthog = usePostHog();
  const { user } = useAuth();

  useEffect(() => {
    if (user) {
      posthog.identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.plan,
      });
    }
  }, [user]);
}

Firebase Analytics

npx expo install @react-native-firebase/app @react-native-firebase/analytics

import analytics from "@react-native-firebase/analytics";

// Suivre les vues d'écran
await analytics().logScreenView({
  screen_name: "Dashboard",
  screen_class: "DashboardScreen",
});

// Suivre les événements personnalisés
await analytics().logEvent("purchase_completed", {
  plan: "pro",
  price: 9.99,
});

// Identifier l'utilisateur
await analytics().setUserId(user.id);
await analytics().setUserProperties({ plan: "pro" });

Note : Firebase Analytics nécessite un build de développement avec des modules natifs.

Patterns de suivi d'événements

Suivez ces événements clés pour une app mobile SaaS :

Événement	Propriétés	Quand
`app_opened`	`source`	App lancée
`screen_viewed`	`screen_name`	Écran devient visible
`sign_up_completed`	`method` (email, google, apple)	Utilisateur crée un compte
`sign_in_completed`	`method`	Utilisateur se connecte
`purchase_completed`	`plan`, `price`	Abonnement acheté
`feature_used`	`feature_name`	Interaction fonctionnalité clé
`error_occurred`	`error_type`, `screen`	Erreur affichée à l'utilisateur

Suivi d'écran

Suivez automatiquement les vues d'écran avec Expo Router :

import { usePathname } from "expo-router";

function useScreenTracking() {
  const pathname = usePathname();
  const posthog = usePostHog();

  useEffect(() => {
    posthog.screen(pathname);
  }, [pathname]);
}

Ajoutez ceci à votre layout racine :

export default function RootLayout() {
  useScreenTracking();
  return <Slot />;
}

Considérations de confidentialité

Permettez aux utilisateurs de se désinscrire des analytics dans les paramètres
Ne suivez pas les informations personnelles (PII) sans consentement
Respectez le RGPD/CCPA — fournissez un moyen de supprimer les données utilisateur
Utilisez des IDs anonymes jusqu'à ce que l'utilisateur s'identifie explicitement

function AnalyticsOptOut() {
  const [optedOut, setOptedOut] = usePersistentState("analytics-opt-out", false);

  const toggle = () => {
    const newValue = !optedOut;
    setOptedOut(newValue);
    if (newValue) {
      posthog.optOut();
    } else {
      posthog.optIn();
    }
  };

  return <Switch value={!optedOut} onValueChange={toggle} />;
}

Analytics

On this page