Intégration PostHog pour Astro (Statique)

Cette skill vous aide à ajouter PostHog analytics aux applications Astro (Statique).

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 exemple du projet Astro (Statique)
• references/astro.md - Astro - 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 visé. 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 à côté des intégrations existantes. Ne remplacez ni ne restructurez le code existant.
• Respectez l'exemple : Votre implémentation doit suivre les patterns du projet exemple aussi fidèlement que possible.

Directives framework

• Utilisez toujours la directive is:inline sur les balises script PostHog pour empêcher Astro de les traiter et éviter les erreurs TypeScript
• Utilisez le préfixe PUBLIC_ pour les variables d'environnement côté client dans Astro (par ex. PUBLIC_POSTHOG_PROJECT_TOKEN)
• Créez un composant posthog.astro dans src/components/ pour la réutilisabilité de l'initialisation sur les pages
• Importez le composant PostHog dans une Layout et enveloppez toutes les pages avec cette layout

Identification des utilisateurs

Identifiez les utilisateurs lors des événements de connexion et d'inscription. Reportez-vous au code exemple et à la documentation pour le pattern identify correct pour ce framework. Si du code frontend et backend existent tous les deux, passez 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.