一键在 Manus 中运行任何 Skill

posthog

星标1

分支0

更新时间2026年3月17日 05:23

Explain, verify, and extend PostHog analytics for vibebrowser.app using the current product-page integration and first-party proxy setup.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

dzianisv

dzianisv/VibeBrowserProductPage

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

PostHog Skill

Purpose

Use this skill when you need to understand how PostHog works in this repo, verify that analytics are firing, add new tracked events, or explain the existing setup to another agent or engineer.

Canonical References (read first)

Primary implementation and runbook:
- docs/posthog.md
Client bootstrap:
- instrumentation-client.ts
Shared tracking helpers:
- components/google-analytics.tsx
First-party proxy config:
- next.config.mjs
Server telemetry allowlist:
- app/api/telemetry/events/route.ts

Current Architecture

PostHog is added alongside existing analytics. It does not replace GA4 or server telemetry.
Client init happens in instrumentation-client.ts.
Shared custom event dispatch happens in components/google-analytics.tsx.
The preferred ingest path is the first-party proxy at /ingest.
Production uses the US PostHog UI host: https://us.posthog.com.

Route Coverage

All live Next.js routes under app/ inherit app/layout.tsx, which mounts shared analytics components globally.
instrumentation-client.ts is bundled on all routed pages and initializes posthog-js client-side.
Nested layouts such as /mcp, /teams, /enterprise, /aboutus, /blog/*, and /admin/* do not replace the root layout with their own <html> or <body>.
Verified locally on representative route types:
- marketing/profession page: /lawyers
- developer landing page: /mcp
- blog article: /blog/mcp-browser-automation-comparison
- admin page: /admin/waitlist
Legacy products/agenticteam/page.tsx is not part of the active App Router route tree and is not a live routed page.

Environment Variables

These are the expected public env vars:

NEXT_PUBLIC_POSTHOG_TOKEN="<project_token>"
NEXT_PUBLIC_POSTHOG_HOST="/ingest"
NEXT_PUBLIC_POSTHOG_UI_HOST="https://us.posthog.com"

If you change env handling, update:

.env.example
VERCEL_ENV_SETUP.md
docs/posthog.md

Event Model In This Repo

Shared helper behavior

trackEvent() in components/google-analytics.tsx sends events to:

PostHog
GA4
/api/telemetry/events

Common custom events

dialog_open
generate_lead
cta_click
mailing_list_signup

CTA conventions

Use trackCTAClick(ctaName, location) for explicit CTA coverage.
Keep cta_name stable and descriptive.
Keep location specific to UI placement, for example:
- hero_primary
- mcp_hero
- lawyers_install
- enterprise_hero

When Adding New PostHog Coverage

Prefer existing helpers in components/google-analytics.tsx.
Add explicit tracking for high-value conversion steps instead of relying only on autocapture.
If a new event or property must also hit /api/telemetry/events, update the allowlist in app/api/telemetry/events/route.ts.
Protect sensitive fields:
- avoid capturing raw email or secret values
- preserve ph-no-capture usage on sensitive inputs
- keep session replay masking enabled
Update docs/posthog.md with any new tracked flows or verification steps.

Verification Workflow

Local

Run:

npm run lint
npm run build

Then verify in browser:

Open a local page.
Check Network for /ingest/e/ and /ingest/static/....
Trigger the target CTA or dialog.
Confirm:
- PostHog ingest request fires
- GA request fires when applicable
- /api/telemetry/events returns 204 when applicable

Production

Deploy with:

vercel --prod --yes

Confirm live endpoints:

curl -I https://www.vibebrowser.app
curl -I https://www.vibebrowser.app/ingest/static/array.js

If needed, validate live click paths in browser using the manual checks from docs/posthog.md.

Common Pitfalls

Do not assume a CTA branch is rendered without verifying the actual page config.
If a visible CTA is mailto:, analytics may fire just before navigation; use preserved network logs when verifying.
If you add a PostHog event but not the telemetry allowlist, PostHog may work while /api/telemetry/events silently drops the payload.
If event volume looks low in production, confirm traffic is using /ingest and not a direct PostHog host.

Output Contract

When using this skill, return:

What the current PostHog setup does.
Which files need changes, if any.
How the target event/flow should be tracked.
What verification was run locally and/or in production.
Any docs or env updates required.

同仓库更多 Skills

同仓库

blogpost

dzianisv/VibeBrowserProductPage

Write or edit a general-purpose technical/news/timely blog post in the VibeBrowserProductPage repo (root `blog/*.md`), which publishes to BOTH vibebrowser.app and agentlabs.cc from one file. Use for any source-cited post that is NOT a sales/competitive-landscape piece (use blog-hub) and NOT an #ainativecompany series post (use blog-ainative). Prefer this over the global blogpost skill when working inside this repo, because it encodes the real frontmatter parser, dual-domain publishing, route-parity link rules, and validation commands. Triggers: draft/write/rewrite/review a blog post, technical announcement, news reaction, founder note, or timely research post for this repo.

2026-07-141

blog-hub

dzianisv/VibeBrowserProductPage

Write, optimize, validate, and publish Vibe blog posts using canonical product sources, with clear steps for placement in /blog, compilation, SEO/LLM optimization, and production publishing.

2026-07-141

blog-ainative

dzianisv/VibeBrowserProductPage

Use this skill when writing or editing blog posts for the #ainativecompany series on vibebrowser.app. Governs voice, structure, tags, evidence requirements, and anti-patterns. All posts must be short, technical, honest, and useful to a reader who wants to run a similar setup.

2026-05-231

growth

dzianisv/VibeBrowserProductPage

Drive growth for VibeBrowser products. Use when asked to promote, post to Reddit/HN/X, find competitor complaint threads, reply to community discussions, update growth tracking files, run the daily growth routine, or check post performance. Triggers on "promote", "post to reddit", "show HN", "growth", "community post", "find threads", "check HN", "reply to", "daily routine", "track posts", "competitor search".

2026-05-061

growth-hacking

dzianisv/VibeBrowserProductPage

Promote VibeBrowser products on Reddit, Hacker News, and X/Twitter. Use when asked to create community posts, find relevant threads, reply to discussions, track post performance, update growth.md strategy, or log posts in growth.csv. Triggers on phrases like "post to reddit", "show HN", "promote", "growth", "community post", "find threads about", "check HN", "track our posts".

2026-04-281

google-analytics

dzianisv/VibeBrowserProductPage

Analyze Search Console compare views for vibebrowser.app (especially 28 days vs previous, breakdown=page), convert findings into prioritized SEO + LLM optimization tasks, and decide when /blog investment is justified.

2026-03-151

name	posthog
description	Explain, verify, and extend PostHog analytics for vibebrowser.app using the current product-page integration and first-party proxy setup.

PostHog Skill

Purpose

Use this skill when you need to understand how PostHog works in this repo, verify that analytics are firing, add new tracked events, or explain the existing setup to another agent or engineer.

Canonical References (read first)

Primary implementation and runbook:
- docs/posthog.md
Client bootstrap:
- instrumentation-client.ts
Shared tracking helpers:
- components/google-analytics.tsx
First-party proxy config:
- next.config.mjs
Server telemetry allowlist:
- app/api/telemetry/events/route.ts

Current Architecture

PostHog is added alongside existing analytics. It does not replace GA4 or server telemetry.
Client init happens in instrumentation-client.ts.
Shared custom event dispatch happens in components/google-analytics.tsx.
The preferred ingest path is the first-party proxy at /ingest.
Production uses the US PostHog UI host: https://us.posthog.com.

Route Coverage

All live Next.js routes under app/ inherit app/layout.tsx, which mounts shared analytics components globally.
instrumentation-client.ts is bundled on all routed pages and initializes posthog-js client-side.
Nested layouts such as /mcp, /teams, /enterprise, /aboutus, /blog/*, and /admin/* do not replace the root layout with their own <html> or <body>.
Verified locally on representative route types:
- marketing/profession page: /lawyers
- developer landing page: /mcp
- blog article: /blog/mcp-browser-automation-comparison
- admin page: /admin/waitlist
Legacy products/agenticteam/page.tsx is not part of the active App Router route tree and is not a live routed page.

Environment Variables

These are the expected public env vars:

NEXT_PUBLIC_POSTHOG_TOKEN="<project_token>"
NEXT_PUBLIC_POSTHOG_HOST="/ingest"
NEXT_PUBLIC_POSTHOG_UI_HOST="https://us.posthog.com"

If you change env handling, update:

.env.example
VERCEL_ENV_SETUP.md
docs/posthog.md

Event Model In This Repo

Shared helper behavior

trackEvent() in components/google-analytics.tsx sends events to:

PostHog
GA4
/api/telemetry/events

Common custom events

dialog_open
generate_lead
cta_click
mailing_list_signup

CTA conventions

Use trackCTAClick(ctaName, location) for explicit CTA coverage.
Keep cta_name stable and descriptive.
Keep location specific to UI placement, for example:
- hero_primary
- mcp_hero
- lawyers_install
- enterprise_hero

When Adding New PostHog Coverage

Prefer existing helpers in components/google-analytics.tsx.
Add explicit tracking for high-value conversion steps instead of relying only on autocapture.
If a new event or property must also hit /api/telemetry/events, update the allowlist in app/api/telemetry/events/route.ts.
Protect sensitive fields:
- avoid capturing raw email or secret values
- preserve ph-no-capture usage on sensitive inputs
- keep session replay masking enabled
Update docs/posthog.md with any new tracked flows or verification steps.

Verification Workflow

Local

Run:

npm run lint
npm run build

Then verify in browser:

Open a local page.
Check Network for /ingest/e/ and /ingest/static/....
Trigger the target CTA or dialog.
Confirm:
- PostHog ingest request fires
- GA request fires when applicable
- /api/telemetry/events returns 204 when applicable

Production

Deploy with:

vercel --prod --yes

Confirm live endpoints:

curl -I https://www.vibebrowser.app
curl -I https://www.vibebrowser.app/ingest/static/array.js

If needed, validate live click paths in browser using the manual checks from docs/posthog.md.

Common Pitfalls

Do not assume a CTA branch is rendered without verifying the actual page config.
If a visible CTA is mailto:, analytics may fire just before navigation; use preserved network logs when verifying.
If you add a PostHog event but not the telemetry allowlist, PostHog may work while /api/telemetry/events silently drops the payload.
If event volume looks low in production, confirm traffic is using /ingest and not a direct PostHog host.

Output Contract

When using this skill, return:

What the current PostHog setup does.
Which files need changes, if any.
How the target event/flow should be tracked.
What verification was run locally and/or in production.
Any docs or env updates required.