Intégration PostHog pour JavaScript Web

Cette skill vous aide à ajouter l'analyse PostHog à des applications JavaScript Web.

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/js.md - JavaScript web - docs
• references/posthog-js.md - PostHog JavaScript web SDK
• 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 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.
• Modifications minimales : Ajoutez le code PostHog aux côtés des intégrations existantes. Ne remplacez ou ne restructurez pas le code existant.
• Respecter l'exemple : Votre implémentation doit suivre les patterns du projet exemple aussi étroitement que possible.

Directives du framework

• Rappelez-vous que le code source est disponible dans le répertoire node_modules
• Vérifiez package.json pour les scripts de vérification de type ou de build afin de valider les modifications
• posthog-js est le nom du package SDK JavaScript
• posthog.init() DOIT être appelé avant toute autre méthode PostHog (capture, identify, etc.)
• posthog-js est destiné au navigateur uniquement — N'importez PAS dans des contextes Node.js ou côté serveur (utilisez posthog-node à la place)
• L'autocapture est ACTIVÉ par défaut avec posthog-js (suit les clics, les soumissions de formulaire, les pages vues). N'DÉSACTIVEZ PAS l'autocapture sauf si l'utilisateur le demande explicitement.
• N'ENVOYEZ JAMAIS d'informations personnelles dans les propriétés d'événement posthog.capture() — pas d'emails, de noms complets, de numéros de téléphone, d'adresses physiques, d'adresses IP ou de contenu généré par l'utilisateur
• Les informations personnelles appartiennent aux propriétés de personne posthog.identify() (email, name, role), PAS aux propriétés d'événement capture()
• Appelez posthog.identify(userId, { email, name, role }) lors de la connexion ET lors du rafraîchissement de la page si l'utilisateur est déjà connecté
• Appelez posthog.reset() à la déconnexion pour délier les événements futurs de l'utilisateur actuel
• Pour les SPAs sans router framework, capturez les pages vues avec posthog.capture($pageview) ou utilisez l'option capture_pageview history_change dans init pour le routage History API

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 d'identification correct pour ce framework. Si du code frontend et backend existent tous deux, 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, en particulier autour des flux utilisateur critiques et des limites d'API.