Overview
Full custom event tracking is now wired into every stage of the Uniform Builder, giving the team actionable data on how users progress through the design funnel, which customization features they use most, and where they drop off. All data is privacy-friendly (no PII) and visible in the admin analytics dashboard alongside existing traffic metrics.
Custom Events Tracked
Lifecycle Events
| Event | Fires When |
|---|---|
| Builder Opened | User enters the builder for any product |
| Builder Step Viewed | User navigates to a new step (designs, colors, text, graphics, roster, review) |
| Builder Completed | User reaches the review step |
| Request a Quote Clicked | User clicks the "Request a Quote" button on review |
| Draft Loaded | A previously saved draft is restored from localStorage |
Customization Action Events
| Event | Fires When |
|---|---|
| Design Selected | User picks a design template |
| Color Changed | User changes a color zone value (debounced 1.5 s) |
| Text Item Added | User adds a new text element |
| Graphic Uploaded | User uploads a logo/graphic via the Team Upload tab |
| Graphic Added from Library | User picks a graphic from the shared library |
| Roster CSV Imported | User imports a player roster via CSV |
| View Mode Changed | User toggles between 2D and 3D canvas views |
| Co-create Invited | User creates a real-time collaboration session |
Catalogue Events
| Event | Fires When |
|---|---|
| Customize Clicked | Captured via Builder Opened when entering from the catalogue |
Event Properties
Every event can carry optional metadata to power drill-down analysis:
sport— sport category (e.g. baseball, basketball)product— product slugstep— current builder step IDtemplate_id— selected design template (system ID, not user input)color_zone— which zone was changed (primary, secondary, accent, etc.)graphic_source— upload vs librarygraphic_format— SVG, PNG, JPG, WEBPview_mode— 2d or 3droster_count— number of players imported via CSVtext_count/graphic_count— item totals at time of addition
No personally identifiable information (PII) is ever sent.
Admin Dashboard — Builder Events Table
A new Builder Events section appears at the bottom of the admin analytics dashboard (/admin). It shows:
- Event name and category (Lifecycle / Customization / Catalogue)
- Total fires (how many times the event occurred)
- Unique visitors (how many distinct users triggered it)
- Proportional bar indicator for quick visual comparison
- Respects the existing period selector (today, 7 days, 30 days, 6 months, 12 months)
Data is fetched server-side via the Plausible Stats API v2 in parallel with existing analytics — no additional page load latency.
Technical Details
Client-Side Helper
A typed trackBuilderEvent() helper in builder/_lib/analytics/ provides:
- Type-safe event names —
BuilderEventNameunion type prevents typos at compile time - Type-safe properties —
BuilderEventPropsinterface constrains allowed keys - SSR safety — silently no-ops when
window.plausibleis unavailable - Debounced variant —
trackBuilderEventDebounced()collapses rapid-fire events (e.g. color picker dragging) into a single fire after 1.5 s of inactivity
Server-Side Service
Two new methods on PlausibleService:
getCustomEvents(period, limit)— breakdown byevent:goal(Plausible Stats API v2)getCustomEventBreakdown(eventName, propDimension, period)— drill into a single event by any custom property (ready for future use)
Integration Points
| File | Event(s) |
|---|---|
builder-layout.tsx | Builder Opened |
use-builder-step.ts | Builder Step Viewed |
review-step.tsx | Builder Completed, Request a Quote Clicked |
builder-data-context.tsx | Draft Loaded |
designs-step.tsx | Design Selected |
colors-step.tsx | Color Changed (debounced) |
text-step.tsx | Text Item Added |
graphics-step.tsx | Graphic Uploaded, Graphic Added from Library |
roster-step.tsx | Roster CSV Imported |
builder-context.tsx | View Mode Changed |
co-create-button.tsx | Co-create Invited |
KPIs
- Funnel analysis — Builder entry rate, step completion rate, drop-off by step, time to review
- Customization depth — Design switches, color zones customized, text/graphic counts, roster sizes
- Engagement — 2D vs 3D usage, collaboration invite rate, draft resume rate
- Operational — Quote conversion rate, popular templates and placements
