dimitar/placebo.mk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
placebo.mk/frontend/posthog-setup-report.md
echo 01a3c1a776 posthog
2026-03-01 01:36:11 +01:00

4.5 KiB
Raw Permalink Blame History

# PostHog post-wizard report

The wizard has completed a deep integration of PostHog analytics into the Placebo.mk React (TanStack Router, code-based routing) application. Here is a summary of all changes made:

Integration summary

  • src/main.tsx — Updated PostHogProvider options to use a /ingest reverse proxy (api_host: '/ingest'), added ui_host, enabled capture_exceptions: true for automatic error tracking, and enabled debug mode in development.
  • vite.config.ts — Added a Vite dev server proxy for /ingest → VITE_PUBLIC_POSTHOG_HOST, routing PostHog calls through the dev server to avoid ad blockers.
  • .env / .env.local — Set VITE_PUBLIC_POSTHOG_KEY and VITE_PUBLIC_POSTHOG_HOST with the correct EU cloud values.
  • src/contexts/AuthContext.tsx — Added usePostHog(), posthog.identify() on login and register (using user ID as distinct ID with username, email, role properties), posthog.capture() for user_logged_in, user_registered, and user_logged_out events, and posthog.reset() on logout.
  • src/components/features/social-share/SocialShareButtons.tsx — Added posthog.capture('article_shared', ...) with platform, article ID, title, and URL properties.
  • src/components/features/comments/ReactionButtons.tsx — Added posthog.capture('article_reaction_added', ...) with reaction type, target IDs, and target type (article/live_blog/comment).
  • src/components/features/comments/CommentSection.tsx — Added posthog.capture('comment_submitted', ...) with article/live blog ID, target type, and comment length.
  • src/components/admin/PushNotificationManager.tsx — Added posthog.capture('push_notification_sent', ...) with notification title, sent/failed counts, and subscriber count.
  • src/components/features/live-blog/LiveBlogViewer.tsx — Added posthog.capture('live_blog_viewed', ...) once per mount (guarded with a ref), and posthog.capture('live_blog_reconnected', ...) on the Reconnect button click.

Events instrumented

Event name Description File
user_logged_in Fired when a user successfully logs in src/contexts/AuthContext.tsx
user_registered Fired when a user successfully completes registration src/contexts/AuthContext.tsx
user_logged_out Fired when a user logs out src/contexts/AuthContext.tsx
article_shared Fired when a user shares an article on a social platform src/components/features/social-share/SocialShareButtons.tsx
article_reaction_added Fired when a user reacts (like or dislike) to an article or comment src/components/features/comments/ReactionButtons.tsx
comment_submitted Fired when a user successfully posts a comment on an article or live blog src/components/features/comments/CommentSection.tsx
push_notification_sent Fired when an admin successfully sends a push notification to all subscribers src/components/admin/PushNotificationManager.tsx
live_blog_viewed Fired when a user opens a live blog page (top of engagement funnel for live coverage) src/components/features/live-blog/LiveBlogViewer.tsx
live_blog_reconnected Fired when a user manually reconnects to a live blog stream src/components/features/live-blog/LiveBlogViewer.tsx

Next steps

We've built some insights and a dashboard for you to keep an eye on user behavior, based on the events we just instrumented:

Agent skill

We've left an agent skill folder in your project at .claude/skills/posthog-integration-react-tanstack-router-code-based/. You can use this context for further agent development when using Claude Code. This will help ensure the model provides the most up-to-date approaches for integrating PostHog.