48 lines
4.5 KiB
Markdown
48 lines
4.5 KiB
Markdown
<wizard-report>
|
|
# 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:
|
|
|
|
- 📊 **Dashboard — Analytics basics**: https://eu.posthog.com/project/133810/dashboard/546519
|
|
- 📈 **User Authentication Trends** (logins, registrations, logouts over time): https://eu.posthog.com/project/133810/insights/pxodr2zQ
|
|
- 🔽 **New User Engagement Funnel** (registration → first comment → first reaction): https://eu.posthog.com/project/133810/insights/zK5n3YKc
|
|
- 🔗 **Article Shares by Platform** (breakdown of shares per social platform): https://eu.posthog.com/project/133810/insights/pplQTyt8
|
|
- 💬 **Content Engagement Activity** (comments, reactions, and shares over time): https://eu.posthog.com/project/133810/insights/wn7cQy26
|
|
- 📡 **Live Blog Engagement** (live blog views and reconnect attempts): https://eu.posthog.com/project/133810/insights/6QtI23Hm
|
|
|
|
### 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.
|
|
|
|
</wizard-report>
|