Posthog web analytics in website #28
Conversation
|
@sid597 is attempting to deploy a commit to the Discourse Graphs Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
sid597
changed the title
sid597
changed the title
@sid597 Are you using the same email for Vercel and Github? |
mdroidian
left a comment
mdroidian
left a comment
There was a problem hiding this comment.
Nice! Just nix those comments and good to go.
I added the env vars to vercel and rebuild the deployment:
https://discourse-graph-git-fork-sid597-posthog-d018e8-discourse-graphs.vercel.app
I think product analytics would also not be much useful for the website, we don't have any events that we want to track.
I agree, web analytics would be good here.
We might look into Product analytics for the plugins.
WalkthroughThe pull request introduces PostHog analytics integration into a Next.js website application. A new Changes
Sequence DiagramsequenceDiagram
participant App as Next.js App
participant Provider as PostHogProvider
participant PageView as PostHogPageView
participant PostHog as PostHog Analytics
App->>Provider: Wrap application
Provider->>PostHog: Initialize with config
App->>PageView: Track page changes
PageView->>PostHog: Send page view event
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/website/app/providers.tsx (1)
8-13: Consider logging a more descriptive error message.
Throwing an error here is acceptable for early failure. However, providing environment-specific instructions or a link to documentation would be more helpful for other developers.if ( !process.env.NEXT_PUBLIC_POSTHOG_KEY || !process.env.NEXT_PUBLIC_POSTHOG_HOST ) { - throw new Error("PostHog environment variables are not set"); + throw new Error( + "PostHog environment variables are missing. Please set NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST." + ); }apps/website/app/PostHogPageView.tsx (1)
7-25: Check fallback behavior forwindow.origin.
Though it generally works in a client-side environment, some frameworks or SSR contexts might not definewindow.origin. Since you’re using"use client", this is likely safe, but keep it in mind if partial SSR is used in the future.package.json (1)
32-32: Pin the minor version to maintain reproducible builds.
You might consider locking the dependency version to avoid unexpected breaking changes in patch releases, although semver typically handles patch updates gracefully."dependencies": { - "posthog-js": "^1.203.1" + "posthog-js": "~1.203.1" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
apps/website/app/PostHogPageView.tsx(1 hunks)apps/website/app/layout.tsx(2 hunks)apps/website/app/providers.tsx(1 hunks)package.json(1 hunks)
🔇 Additional comments (4)
apps/website/app/providers.tsx (1)
15-21: Verify PostHog initialization logic for SSR usage.
Since this code is in a client component, it should not be executed on the server. However, if server-side usage is introduced in the future, consider a guard to ensure PostHog does not run in SSR mode, to avoid potential reference errors.
apps/website/app/PostHogPageView.tsx (1)
7-25: Confirm that capturing a pageview on search parameters change is desired.
Currently, changing only the search parameters triggers an additional pageview event. If this is intentional, great! Otherwise, consider an additional check to prevent multiple captures for minor URL state changes.
Would you like a snippet to handle only path-based events or maintain a custom approach to differentiate between path and search changes?
apps/website/app/layout.tsx (2)
3-3: Ensure consistent naming and usage of the provider.
The import and usage is straightforward. Just confirm that the exported name PostHogProvider from ./providers aligns with naming in code references and documentation.
28-30: Good practice wrapping children within the provider.
This ensures all descendants can access and dispatch analytics events consistently.
2 participants
Using guide https://posthog.com/docs/libraries/next-js
To build locally add .env.local file and add the following keys
Its a write only key, Write-only means it can only create new events. It can't read events or any of your other data stored with PostHog, so it's safe to use in public apps.
For website we can do either Product analytics or web analytics there a few more tools but they not provide any useful data for the website.
I think product analytics would also not be much useful for the website, we don't have any events that we want to track.
Web analytics gives us insight into:
We have to set up conversion goal (if any) everything else is setup by default.
Summary by CodeRabbit
New Features
PostHogPageViewandSuspendedPostHogPageViewcomponents for tracking page views.PostHogProvidercomponent to integrate PostHog analytics into the application.Bug Fixes
Chores
posthog-jsdependency for analytics tracking.