integration-react-native

Par posthog · skills

Intégration PostHog pour les applications React Native

npx skills add https://github.com/posthog/skills --skill integration-react-native

Intégration PostHog pour React Native

Cette skill vous aide à ajouter PostHog analytics à des applications React Native.

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

Reference files

  • references/EXAMPLE.md - React Native example project code
  • references/react-native.md - React native - docs
  • references/identify-users.md - Identify users - 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 illustre le pattern d'implémentation cible. Consultez la documentation pour les détails des API.

Key principles

  • Environment variables : Utilisez toujours des variables d'environnement pour les clés PostHog. Ne les codez jamais en dur.
  • Minimal changes : Ajoutez le code PostHog aux côtés des intégrations existantes. Ne remplacez ni ne restructurez le code existant.
  • Match the example : Votre implémentation doit suivre les patterns du projet exemple aussi fidèlement que possible.

Framework guidelines

  • posthog-react-native est le nom du package du SDK React Native
  • Utilisez react-native-config pour charger POSTHOG_PROJECT_TOKEN et POSTHOG_HOST à partir de .env (les variables sont intégrées au moment du build, pas à runtime)
  • react-native-svg est une peer dependency requise de posthog-react-native (utilisée par la feature surveys) et doit être installée avec
  • Placez PostHogProvider INSIDE NavigationContainer pour la compatibilité React Navigation v7

Identifying users

Identifiez les utilisateurs lors des événements de connexion et d'inscription. Consultez le 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.

Error tracking

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

Skills similaires