Intégration PostHog pour Astro (SSR)

Cette skill vous aide à ajouter l'analytique PostHog à vos applications Astro (SSR).

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

Directives du framework

• Utilisez toujours la directive is:inline sur les balises de script PostHog pour empêcher Astro de les traiter et d'éviter des 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 réutiliser l'initialisation sur les pages
• Importez le composant PostHog dans un Layout et enveloppez toutes les pages avec ce layout
• Utilisez posthog-node dans les routes API sous src/pages/api/ pour le suivi des événements côté serveur
• Stockez l'instance du client posthog-node dans un pattern singleton (src/lib/posthog-server.ts) pour éviter de créer plusieurs clients
• Passez l'ID de session client au serveur via l'en-tête X-PostHog-Session-Id pour un suivi de session unifié

Identification des utilisateurs

Identifiez les utilisateurs lors des événements de login et signup. Consultez le code d'exemple et la documentation pour le pattern d'identification correct pour ce framework. Si le code frontend et backend existent tous les deux, passez la session côté client et l'ID distinct via 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.