Add PostHog funnel and session analytics for report page
Objective
- Instrument the client report page and related repair-list / quote flows with PostHog so product and engineering can see behavior, drop-off, and whether tutorials help.
- Support a core funnel: report page → repair list → prepare/submit quote.
- Enable event tracking, path analysis after report landing, and sampled session replays for qualitative review.
- Establish a baseline now, knowing events will need manual updates as the report UX evolves.
Background
- There is no PostHog (or similar product analytics) integration in the Attik frontend/backend repos today — this is net-new instrumentation on top of the PostHog platform work.
- The team wants analytics focused on the report experience, especially the path into repair list and quote actions.
- Examples of behaviors to capture:
- Opening or closing tutorials (
ReportExplainerModal) - Repair-related clicks (sidebar, sections, categorization)
- Building a repair list without saving
- Where users abandon the flow
- Product questions to answer:
- Are tutorials helping?
- Where are users dropping off?
- Is the current flow too complicated?
- Expectation: instrumentation is somewhat manual and will require follow-up tickets as UI changes; still ship a useful v1 now.
Scope
Frontend — Report landing (client portal)
- Primary route:
attik-frontend/src/app/client/reports/[slug]/page.tsx— report view withReportSectionsWithAIAssist,ReportSidebar,ClientReportWrapper, lock gating viaLockedReportScreen/resolveReportPageData. - Repair list entry from report UI:
ReportSections.tsx(repair-list feature/permission gates),RepairListSidebar.tsx(navigation to/reports/{slug}/repair-list/{id}).
Frontend — Repair list and quote flow
- Repair list pages:
attik-frontend/src/app/client/reports/[slug]/repair-list/[id]/(page.tsx,layout.tsx,RepairListProvider.tsx,RepairListHeader.tsx). - Categorization / request flow:
CategorizationPageClient.tsx,repair-list/[id]/request/page.tsx,request/[categoryId]/page.tsx,RequestFlowDrawer.tsx,MultiCategoryRequestClient.tsx(quote submit / “Did you submit the quote request?” steps). - Save / share actions:
attik-frontend/src/app/client/reports/actions/saveRepairList.ts,ShareRepairListModal.tsx(request-quote-share,request-list-sendAPI calls).
Frontend — Tutorials / explainer
ReportExplainerModal.tsx— mounted fromRepairListProvider.tsx; gated byjobPortalFeaturesand role permissions includingrepair-list.
Frontend — Analytics integration (to add)
- Decision needed: PostHog SDK placement (e.g. client portal root layout vs report-only subtree) and identity properties (company, inspection/report id, contact role,
access_tokenportal session). - Decision needed: Event naming convention and whether to use PostHog autocapture vs explicit
capture()only on client components (many report surfaces are client components or dynamic imports withssr: false). - Funnel steps should align with real routes above, not internal-only state, so PostHog funnels match URLs users hit.
- Session replay sampling and any PII redaction rules (decision needed — report content, addresses, contact info may appear in DOM).
Backend
- No report-specific analytics endpoints found; repair-list APIs are used from the frontend (
repair-list/*viacallServerAction). Backend changes are out of scope unless server-side events are required (decision needed).
PostHog configuration (outside repo)
- Funnel, paths, and replay sampling are configured in the PostHog project after events ship — document recommended dashboard setup in PR or internal doc (decision needed who owns PostHog project config).
Out of scope unless expanded
- Attik staff tools (
/tools/…) report admin surfaces. - Mobile app.
- Full analytics coverage of AI assist modals unless explicitly prioritized in v1.
References
- PostHog docs
- Report page entry:
attik-frontend/src/app/client/reports/[slug]/page.tsx - Repair list provider / tutorial:
attik-frontend/src/app/client/reports/components/RepairListProvider.tsx,ReportExplainerModal.tsx - Quote request flow:
attik-frontend/src/app/client/reports/[slug]/repair-list/[id]/request/components/RequestFlowDrawer.tsx
Status: Next Up
Log in to comment and vote
No comments yet
Be the first to share your thoughts.