Component Analytics Hook
Instrument shared components once instead of hand-writing events on every screen.
What it adds
Interaction tracking attached to the app's shared components, emitting named events carrying the context of where they were used.
What your agent is told to do
5
What your agent is told to do
5-
1
Identify the shared components that account for most interaction — buttons, links, menus, dialogs, tabs, table rows, form submits — and attach tracking inside them rather than at each of the hundreds of call sites.
-
2
Have each component emit its own identity and the context it was rendered in: the screen, the surface, and a stable identifier supplied by the caller. Position on the page and visible label are not identity.
-
3
Emit exactly one event per user action. A menu item inside a card inside a table row must not produce three overlapping records of the same click.
-
4
Keep component events separate from business events. A dialog opening is a UI fact; a subscription being upgraded is a product fact recorded where the outcome is confirmed, not where the button was pressed.
-
5
Names, properties, and versioning are owned by UI Event Naming Schema, and redaction, sampling, and consent are owned by Interaction Telemetry Guardrails. This feature owns where events originate and what context they carry. Do not restate either policy inside the components.
Edge cases it handles
7
Edge cases it handles
7- Nested interactive components will each see the same click as it bubbles, producing duplicate events for one action. Decide which level owns the event and stop it from being recorded again as it travels upward.
- A component event and a business event describing the same moment must not be conflated. Tracking an upgrade at the button records intent, including the attempts that failed at payment, which is a different number from upgrades that happened.
- Component properties must never carry the values inside them. A search field emits that a search ran, not the query; a row emits its record identifier, not the customer's name or email.
- Names must survive a visual refactor. An event tied to a component's current label, colour, or place in the layout breaks the moment the page is redesigned, which is exactly when the comparison matters most.
- Rapid repeated interaction — a double click on submit, a held arrow key through a list — must be collapsed rather than emitted once per event.
- Components rendered off-screen, in a hidden tab, or restored from a cached page must not emit view events for things nobody saw.
- Events queued while the browser is offline or during a page unload need a delivery path, or the last action before someone leaves is always the one that is missing.
Definition of done
9
Definition of done
9- Shared components emit their own interaction events without per-screen instrumentation.
- Each event carries a stable component identifier plus its screen and surface context.
- One user action produces exactly one event, including in nested interactive components.
- Component events and business events are separate streams with separate names.
- No event property contains user-entered text or personal data.
- Event identity is unchanged by a visual redesign of the component.
- Naming and privacy policy live in their own features rather than being duplicated in component code.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Data Table Cell Primitives
Data Table Cell Primitives
Render every kind of table cell the same way, wherever the table happens to be.
What it does
A shared set of cell renderers for numbers, dates, people, statuses, links, and row actions, used by every table in the app.
How it works
- 1 Catalogue the cell types the app's tables already render and reduce them to a small set: number and currency, date and relative time, person or avatar, status or badge, link or identifier, and an actions cell.
- 2 Separate each cell's underlying value from its presentation, so sorting, filtering, grouping, and export operate on the raw value while the user sees the formatted one.
- 3 Align and format numerically consistent cells the same way everywhere — figures right-aligned with tabular figures and a fixed precision per column, dates in the user's locale and time zone, currency with its code where more than one is possible.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/data-table-cell-primitives
Segment Event Forwarding
Segment Event Forwarding
Send one clean stream of product events to Segment and let it fan out downstream.
What it does
A documented event schema and a single forwarding path emitting track, identify, group, and page calls with consistent identity.
How it works
- 1 Write the event schema before writing any code: the exact set of event names, the properties each carries with their types, and the traits attached to a user and to an account. Every downstream tool inherits this schema, so a name chosen carelessly is expensive to change later.
- 2 Establish one identity model and apply it everywhere. Use a stable internal user identifier that never changes, associate the anonymous identifier from the first visit with it at signup, and attach the account or workspace so downstream tools can roll events up by customer.
- 3 Route every event through one internal emitter rather than calling the provider from feature code. That emitter validates the event against the schema, drops or flags anything unrecognised, and is the single place where identity and default properties are attached.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/segment-event-forwarding
Google Analytics Server Events
Google Analytics Server Events
Report confirmed outcomes to Google Analytics when browser tracking cannot be trusted.
What it does
Server-side delivery of completed conversions to Google Analytics, joined to the browser session and deduplicated against it.
How it works
- 1 Identify the outcomes the browser cannot see or reports unreliably — a payment confirmed by a webhook, a subscription that renewed, a signup completed after a redirect, anything blocked by an ad blocker — and send those from the server.
- 2 Capture the analytics client identifier from the browser when the visit begins, store it against the session or the record, and send it with the server event so the conversion joins the same session and campaign rather than appearing as a new anonymous visit.
- 3 Generate a stable event identifier at the moment the outcome happens and use it for both the browser and the server send, so the provider can collapse the pair into one event. Assign each event type a primary origin and treat the other as the fallback.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/google-analytics-server-events
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.