feat(analytics): track code copies and CTA views in PostHog#35
Open
coderdan wants to merge 1 commit into
Open
Conversation
Instrument documentation code blocks with PostHog so we can measure which
examples and calls-to-action drive engagement.
- A build-time Shiki transformer (source.config.ts) stamps each rendered
<pre> with data-language plus optional example-id/cta/cta-type/filename
parsed from the code-fence meta string.
- A TrackedCodeBlock client component overrides the `pre` MDX component and:
- fires `code_copied` (page_path, example_id, language, is_cta, cta_type)
on every copy-button click via event delegation, reusing Fumadocs' copy
logic;
- fires `cta_viewed` once when a CTA block scrolls into view via
IntersectionObserver, forming a per-page cta_viewed -> code_copied funnel.
example_id is resolved identically for both events so they join up.
- Annotate the primary install CTAs (drizzle, dynamodb, prisma-next, nextjs
identity, supabase, stack migration) with cta metadata.
- Document the fence-metadata authoring syntax in CLAUDE.md.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds PostHog instrumentation to documentation code blocks so we can see which examples and calls-to-action drive engagement. PostHog was already wired up in the repo (
src/lib/posthog/provider.tsx); this plugs into it.Two events:
code_copied— fires on every code block's copy button click.page_path,example_id,language,is_cta, andcta_type(only whenis_cta).cta_viewed— fires once when a block tagged as a CTA scrolls into view (IntersectionObserver, disconnects after firing).page_path,example_id,cta_type.Together these give a per-page
cta_viewed→code_copied(is_cta: true) funnel — what % of people who see a CTA actually copy it.How it works
source.config.ts): a Shiki transformer stamps every rendered<pre>withdata-language, plusdata-example-id/data-cta/data-cta-type/data-filenameparsed from the code-fence meta string. It appends to Fumadocs' default transformers (so notation highlight/diff/focus keep working) and reusesrehypeCodeDefaultOptions.src/components/code-block.tsx):TrackedCodeBlockoverrides thepreMDX component. It leaves Fumadocs' code block (highlighting, copy logic, tabs) untouched and uses event delegation on the<figure>for the copy click, plus anIntersectionObserveron the same<figure>for the CTA view. Both events resolveexample_idthrough the same helper, so they join up.src/mdx-components.tsx):pre: TrackedCodeBlock.Authoring syntax
```bash cta cta-type="install" example-id="install-drizzle"example-id— stable slug (falls back to filename/language + position when omitted).cta— setsis_cta: trueand enablescta_viewed.cta-type—install/quickstart/signup.Annotated the primary install CTAs: drizzle, dynamodb, prisma-next, nextjs identity, supabase, stack migration. Documented in
CLAUDE.md.Validation
bun run types:check✓bun run lint(changed files) ✓bun run build✓ — verified the prerendered HTML carriesdata-languageon all blocks anddata-cta/data-cta-type/data-example-idon annotated CTAs, with the copy button (aria-label="Copy Text") inside each<figure>.Notes
data-cta*attributes rather than a paralleldata-posthog-*set, soexample_idmatches exactly between the two events (which is what makes the funnel join).filename="…"on fences currently renders no title bar (Fumadocs mapstitle, notfilename) — pre-existing, not touched here; the analytics fallback handles it.