Skip to content

Restore a top-of-funnel event for the /pricing calculator - #20034

Draft
posthog[bot] wants to merge 1 commit into
masterfrom
posthog-self-driving/fixpricing-restore-calculator-c8cc5b
Draft

Restore a top-of-funnel event for the /pricing calculator#20034
posthog[bot] wants to merge 1 commit into
masterfrom
posthog-self-driving/fixpricing-restore-calculator-c8cc5b

Conversation

@posthog

@posthog posthog Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

The /pricing redesign made the calculator always visible. That removed the reveal link, which held the only capture of pricing_calculator_expanded. The event stopped, and the team lost the top of the calculator funnel on a page with high traffic. This PR gives the funnel a top again and deletes the component that no longer renders.

Changes

  • Add a "saw the calculator" event. CalculatorSection now fires pricing_calculator_viewed when it scrolls into view, once per page load. pricing_calculator_interacted gets a denominator again, so engagement reads as a rate and not as a raw count that follows /pricing traffic.
  • Delete Redesign/CalculatorReveal.tsx. Nothing imported it after the redesign. It held the pricing_calculator_expanded capture, so the dead file also made the missing event hard to see.
  • Record the break in the README. The section on the reveal link described it as the shipped treatment, which was wrong. It now documents CalculatorSection, the two live events, and why you must not compare either across 2026-09-08.

The event, and what it does not mean

Event Fires Means State
pricing_calculator_expanded reveal link, on open Asked for the calculator Stopped on 2026-09-08
pricing_calculator_viewed section scrolls into view, once per page load Saw the calculator New here
pricing_calculator_interacted calculator controls, once per mount Touched the calculator Meaning changed on 2026-09-08

pricing_calculator_viewed is a new name on purpose. The old event counted people who asked for the calculator, and this one counts people the page scrolls past it, which is a much larger group. A reused name would join two different populations into one series. The break at 2026-09-08 stays explicit instead.

graph LR
    subgraph before["Before 2026-09-08"]
        A["pricing_calculator_expanded<br/>(opened the reveal)"] --> B[pricing_calculator_interacted]
    end
    subgraph after["After this PR"]
        C["pricing_calculator_viewed<br/>(scrolled it into view)"] --> D[pricing_calculator_interacted]
    end
Loading

Checklist

  • I've read the docs and/or content style guides.
  • Words are spelled using American English
  • Use relative URLs for internal links
  • I've checked the pages added or changed in the Vercel preview build — I checked /pricing in a local pnpm start build instead. See Verification.
  • If I moved a page, I added a redirect in vercel.json — no page moved.

PR tour

  1. CalculatorSection.tsx — the whole behavior change. useInView({ threshold: 0.1, triggerOnce: true }) from react-intersection-observer, which is the convention in this repo (see Docs/EmbeddedSurvey). The ref goes on the wrapper div that already exists, and an effect captures the event when inView turns true. A deep_linked property separates the people the ?calculator link scrolled there from the people who scrolled themselves.
  2. CalculatorReveal.tsx — deleted, no replacement. The git history holds the reveal treatment.
  3. Test/Calculator.tsx — one comment pointed at the deleted file. It now points at CalculatorSection.
  4. Redesign/README.md — the CalculatorReveal section becomes a CalculatorSection section. It keeps the notes that still hold (hideHeader, id="", the margin override, no jump links into it) and drops the reveal mechanics. A new "Telemetry, and the break at 2026-09-08" subsection carries the event contract. The MoreOptions section described its own expand mechanics by pointing at the reveal, so that sentence now stands on its own.

Reviewer's guide

Three questions are worth your attention:

  • Is the new name right? The alternative was to keep firing pricing_calculator_expanded from the new section. That repairs a chart with no gap, and it also merges two populations under one name forever. A new name and a stated break is the honest option, but it does cost the team a comparable series across the redesign.
  • Is threshold: 0.1 sensible? The calculator is roughly two viewports tall, so 10% of it enters the viewport almost as soon as its top edge does. triggerOnce keeps it at one event per page load.
  • Does deep_linked earn a property? A ?calculator arrival sees the calculator without a scroll. Without the flag, those loads inflate the view count against a rate you want to read as "scrolled far enough to reach it".

No visual change. The only DOM difference is a ref on a div that already existed, so there are no screenshots to show.

Verification

  • pnpm install, then pnpm start, then /pricing in Chrome 153 through Puppeteer, with window.posthog.capture recorded.
  • Normal load: no event on load. Scrolling the calculator into view fires exactly one pricing_calculator_viewed with deep_linked: false. Scrolling away and back fires nothing more, which confirms triggerOnce.
  • /pricing?calculator: exactly one event with deep_linked: true, at mount, after the deep link scrolls the section into place.
  • npx tsc --noEmit reports nothing for these files. npx prettier --check passes on all three changed files.
  • The console on /pricing shows no new errors. The errors that appear come from the FAQ accordion and from a posthog-init.js that only a real build generates. Both predate this change.
Agent context
  • The report offered two options: delete the dead component, or add a visibility capture. Both are here, because either one alone leaves half the problem. A deletion with no new event leaves the funnel with no top. A new event with the dead file still in the tree leaves the next reader to work out which capture site is live.
  • Out of scope, but worth someone's time: AgentEstimateLink exports an outside-calculator variant of the ai-pricing flag. The reveal link was its only render site, so no code reads that variant now. Users in it fall through to the in-calculator link, the same as the other test variants. The experiment is not broken, but one of its arms no longer differs from the others.

Created with PostHog Desktop from this inbox report.

@posthog
Restore a top-of-funnel event for the /pricing calculator
a9fe11a 
The pricing redesign replaced the reveal link with an always-visible calculator
section. The reveal link held the only capture of pricing_calculator_expanded, so
that event stopped, and CalculatorReveal.tsx became dead code.

CalculatorSection now fires pricing_calculator_viewed when it scrolls into view,
once per page load. It gives pricing_calculator_interacted a denominator again, so
engagement reads as a rate instead of a raw count that follows /pricing traffic.

Delete the dead reveal component, and record in the README why the new event is not
a continuation of the old one.

Generated-By: PostHog Desktop
Task-Id: aa0d4001-747f-4c92-9f57-f5f0d1c04753
@posthog

posthog Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

🦔 PostHog Review reviewed this pull request

Nothing worth raising this time, so here's a calming picture instead:

Someone relaxing in a sunny garden

@github-actions

github-actions Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Deploy preview

Status Details Updated (UTC)
🟢 Ready View preview Sep 09, 2026 04:13PM

@github-actions github-actions Bot added the website About the website (beyond just landing pages) label Sep 9, 2026
@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Vale prose linter → found 45 errors, 19 warnings, 1 suggestions in your markdown

Full report → Copy the linter results into an LLM to batch-fix issues.

Linter being weird? Update the rules!

src/components/Pricing/Redesign/README.md — 45 errors, 19 warnings, 1 suggestions
Line Severity Message Rule
11:36 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
12:43 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
23:5 warning 'Combinator' is a possible misspelling. PostHogBase.Spelling
24:74 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
32:25 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
33:23 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
38:21 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
39:21 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
41:18 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
42:24 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
45:24 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
49:94 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
57:143 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
61:48 warning 'Cloudinary' is a possible misspelling. PostHogBase.Spelling
63:36 warning 'Cloudinary' is a possible misspelling. PostHogBase.Spelling
67:177 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
77:177 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
81:290 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
81:350 warning Use American English. Use 'color' instead of 'colour'. PostHogBase.AmericanEnglish
83:1 warning 'Breakpoint' is a possible misspelling. PostHogBase.Spelling
83:42 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
89:185 warning 'keyframe' is a possible misspelling. PostHogBase.Spelling
93:239 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
95:141 warning Use American English. Use 'color' instead of 'colour'. PostHogBase.AmericanEnglish
95:166 warning Use American English. Use 'gray' instead of 'grey'. PostHogBase.AmericanEnglish
95:324 warning Use American English. Use 'color' instead of 'colour'. PostHogBase.AmericanEnglish
97:124 warning 'scrollable' is a possible misspelling. PostHogBase.Spelling
101:62 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
103:203 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
105:85 warning 'glanceable' is a possible misspelling. PostHogBase.Spelling
109:398 warning 'dialog's' is a possible misspelling. PostHogBase.Spelling
115:165 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
125:94 suggestion Prefer 'proper nouns or their/theirs' over 'His'. PostHogBase.Inclusivity
129:64 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
139:225 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
159:34 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
163:101 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
165:377 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
167:213 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
169:306 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
173:40 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
174:253 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
176:37 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
178:68 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
180:113 warning 'hardcodes' is a possible misspelling. PostHogBase.Spelling
182:203 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
184:401 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
190:27 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
192:150 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
196:106 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
200:270 warning 'else's' is a possible misspelling. PostHogBase.Spelling
200:277 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
206:35 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
208:200 warning 'README's' is a possible misspelling. PostHogBase.Spelling
208:239 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
210:243 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
210:296 warning 'haha' is a possible misspelling. PostHogBase.Spelling
210:301 warning 'bizzniss' is a possible misspelling. PostHogBase.Spelling
212:191 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
212:603 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
216:81 warning 'resizable' is a possible misspelling. PostHogBase.Spelling
217:180 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
217:190 warning 'viewport's' is a possible misspelling. PostHogBase.Spelling
217:292 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash
217:308 error Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash. PostHogBase.EnDash

@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Bundle report

Total JS (gzip)

8.85 MiB (+0.9 KiB / +0.0%)

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint Eager size Budget Modules
✅ app 18.46 MiB (+15.8 KiB / +0.1%) report-only 2053
Largest modules in the app closure
Module Size
./src/data/mcp-tools.json 1116.5 KiB
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css 757.9 KiB
./src/components/Stickers/Stickers.tsx 696.4 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js 481.4 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/x-ray.mjs 480.8 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules 395.1 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/im-the-driver.mjs 385.7 KiB
./src/hooks/useCustomers.tsx + 55 modules 370.0 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js 354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules 351.4 KiB
./src/components/ProductComparisonTable/index.tsx + 126 modules 302.5 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js 281.9 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/doll-house.mjs 281.7 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/director.mjs 275.6 KiB
./src/components/SearchUI/index.tsx + 87 modules 273.0 KiB

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

website About the website (beyond just landing pages)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants