Intégration PostHog pour Expo

Cette skill vous aide à ajouter l'analytique PostHog aux applications Expo.

Workflow

Suivez ces étapes dans l'ordre pour compléter l'intégration :

1. basic-integration-1.0-begin.md - PostHog Setup - Begin ← Commencez ici
2. basic-integration-1.1-edit.md - PostHog Setup - Edit
3. basic-integration-1.2-revise.md - PostHog Setup - Revise
4. basic-integration-1.3-conclude.md - PostHog Setup - Conclusion

Fichiers de référence

• references/EXAMPLE.md - Code du projet exemple Expo
• references/react-native.md - React native - docs
• references/identify-users.md - Identifier les utilisateurs - docs
• references/basic-integration-1.0-begin.md - PostHog setup - begin
• references/basic-integration-1.1-edit.md - PostHog setup - edit
• references/basic-integration-1.2-revise.md - PostHog setup - revise
• references/basic-integration-1.3-conclude.md - PostHog setup - conclusion

Le projet exemple montre le pattern d'implémentation cible. Consultez la documentation pour les détails de l'API.

Principes clés

• Variables d'environnement : Utilisez toujours des variables d'environnement pour les clés PostHog. Ne les codez jamais en dur.
• Changements minimaux : Ajoutez le code PostHog aux côtés des intégrations existantes. Ne remplacez pas ou ne restructurez pas le code existant.
• Respectez l'exemple : Votre implémentation doit suivre les patterns du projet exemple aussi fidèlement que possible.

Directives du framework

• posthog-react-native est le nom du package SDK React Native (même que pour RN pur)
• Utilisez expo-constants avec extras dans app.config.js pour POSTHOG_PROJECT_TOKEN et POSTHOG_HOST (PAS react-native-config)
• Accédez à la config via Constants.expoConfig?.extra?.posthogProjectToken dans votre fichier config posthog.ts
• Pour expo-router, enveloppez PostHogProvider dans app/_layout.tsx et suivez manuellement les écrans avec posthog.screen(pathname, params) dans un useEffect
• posthog-react-native est le nom du package SDK React Native
• Utilisez react-native-config pour charger POSTHOG_PROJECT_TOKEN et POSTHOG_HOST depuis .env (les variables sont intégrées au moment du build, pas à la runtime)
• react-native-svg est une dépendance peer obligatoire de posthog-react-native (utilisée par la feature surveys) et doit être installée avec
• Placez PostHogProvider À L'INTÉRIEUR de NavigationContainer pour la compatibilité React Navigation v7

Identifier les utilisateurs

Identifiez les utilisateurs lors des événements de connexion et inscription. Reportez-vous au code exemple et à la documentation pour le pattern identify correct pour ce framework. Si du code frontend et backend existe, passez la session côté client et l'ID distinct en utilisant les headers X-POSTHOG-DISTINCT-ID et X-POSTHOG-SESSION-ID pour maintenir la corrélation.

Suivi des erreurs

Ajoutez le suivi des erreurs PostHog aux fichiers pertinents, particulièrement autour des flux utilisateur critiques et aux limites des API.