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
UI Event Naming Schema
UI Event Naming Schema
Give every tracked interaction a name that still means the same thing in a year.
What it does
A documented vocabulary and structure for event names and properties, applied across the app's existing tracking.
How it works
- 1 Audit the events the app already sends and list them. The duplicates, the near-synonyms, and the ones nobody can explain are the reason the schema is needed, and they are also the migration list.
- 2 Fix a structure of object, action, and context: what was acted on, what happened to it, and where. Fix a closed set of actions — viewed, clicked, opened, submitted, selected, failed — and require every new event to reuse one of them.
- 3 Keep variable detail in properties, never in the name. A record identifier, a plan name, or a workspace slug baked into an event name produces thousands of unaggregatable one-off events.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/ui-event-naming-schema
Amplitude Event Tracking
Amplitude Event Tracking
Send behavioural events to Amplitude with stable users, devices, and account grouping.
What it does
A server-side pipeline that forwards behavioural events, user properties, and account-level groupings to Amplitude.
How it works
- 1 Identify the behaviours worth measuring and emit them from one place in the application layer, so that the set of events is readable in a single file rather than inferred by grepping the codebase.
- 2 Establish the identity model before writing any send code: what identifies a signed-in user, what identifies a device or anonymous session, and how the two are stitched at sign-up and sign-in.
- 3 Map the app's own tenancy — workspace, organisation, or team — onto Amplitude's group concept, and derive it from the record the event belongs to rather than from whatever context the request happened to carry.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/amplitude-event-tracking
Mixpanel Event Tracking
Mixpanel Event Tracking
Send product events to Mixpanel with identities that survive sign-up and sign-in.
What it does
A server-side event pipeline that forwards named product events and user profile updates to Mixpanel, with a stable identity model.
How it works
- 1 Find every meaningful moment already recorded in the app — sign-up, activation, the core action, upgrade, cancellation — and route them through one tracking call site rather than scattering emits through controllers and views.
- 2 Define the event catalogue once, in code, as the only source of names and property types, and reject an event whose properties do not match the declared shape instead of sending it and discovering the drift in the dashboard six weeks later.
- 3 Emit from the server using the app's existing background-job system so tracking never blocks a request, and never ship the project credential into client-side code where anyone can read it and forge events.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/mixpanel-event-tracking
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.