integration-angular

Par posthog · skills

Intégration de PostHog pour les applications Angular

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

Intégration PostHog pour Angular

Cette skill vous aide à ajouter l'analytique PostHog à vos applications Angular.

Workflow

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

  1. basic-integration-1.0-begin.md - Configuration PostHog - Début ← Commencez ici
  2. basic-integration-1.1-edit.md - Configuration PostHog - Édition
  3. basic-integration-1.2-revise.md - Configuration PostHog - Révision
  4. basic-integration-1.3-conclude.md - Configuration PostHog - Conclusion

Fichiers de référence

  • references/EXAMPLE.md - Code d'exemple de projet Angular
  • references/angular.md - Angular - documentation
  • references/identify-users.md - Identifier les utilisateurs - documentation
  • references/basic-integration-1.0-begin.md - Configuration PostHog - début
  • references/basic-integration-1.1-edit.md - Configuration PostHog - édition
  • references/basic-integration-1.2-revise.md - Configuration PostHog - révision
  • references/basic-integration-1.3-conclude.md - Configuration PostHog - conclusion

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

Principes clés

  • Variables d'environnement : Utilisez toujours les 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 ou ne restructurez pas le code existant.
  • Respectez l'exemple : Votre implémentation doit suivre les modèles du projet d'exemple aussi étroitement que possible.

Directives du framework

  • Utilisez inject() au lieu de l'injection par constructeur. Le service PostHog doit être injecté via inject() dans les composants/services qui en ont besoin.
  • Créez un service PosthogService dédié comme service singleton racine qui enveloppe le SDK PostHog.
  • Privilégiez toujours les composants standalone par rapport aux NgModules.
  • Configurez les identifiants PostHog dans les fichiers src/environments/environment.ts, car Angular lit les variables d'environnement à partir de ces fichiers de configuration.

Identification des utilisateurs

Identifiez les utilisateurs lors des événements de connexion et d'inscription. Reportez-vous au code d'exemple et à la documentation pour le bon modèle d'identification pour ce framework. Si du code frontend et backend existe, transmettez la session côté client et l'ID distinct en utilisant les en-têtes 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 des limites d'API.

Skills similaires