📊 Unified Analytics Events: Not Pain, But a Standard

You open your analytics report and see:

• buttonClick
• click_button
• btnClick
• clickBtn
• button_clik (yes, with a typo)

🤦‍♂️ And all of these mean the same kind of button click.

I’ve seen many projects — and it’s always the same story: naming chaos in analytics events.

🤯 Why It Hurts

• You can’t build proper reports.
• Analytics loses context.
• New developers are confused about naming.
• Manually mapping and merging events = pain.
• Funnels and segments become a guessing game.

✅ Solution: Define a Naming Standard

Event names should be:

• Consistent: snake_case, camelCase, or kebab-case (pick one!),
• Readable,
• Clear to everyone — devs, analysts, PMs.

🔥 Examples of Bad Event Names

• clickBtn
• btnClick
• click_button
• onClick_button
• click-card
• cardClick
• card_click
• open_popap
• pageOpened
• goToPage

👌 Examples of Good, Clear Events

• click_button
• click_card
• open_popup
• submit_form
• scroll_to_bottom
• start_video
• pause_video
• add_to_cart
• remove_from_cart
• purchase_success
• login_success
• logout
• registration_complete
• error_validation
• click_link

🧠 Pro Tip

Pick one style — for example, snake_case — and stick to it always.

You can even define a dictionary or a type in code.

🧩 TypeScript Event Interface

export const ANALYTICS_EVENTS = {
	click_button: 'click_button',
	click_card: 'click_card',
	open_popup: 'open_popup',
	close_popup: 'close_popup',
	submit_form: 'submit_form',
	start_video: 'start_video',
	pause_video: 'pause_video',
	add_to_cart: 'add_to_cart',
	remove_from_cart: 'remove_from_cart',
	purchase_success: 'purchase_success',
	login_success: 'login_success',
	logout: 'logout',
	registration_complete: 'registration_complete',
	error_validation: 'error_validation',
	click_link: 'click_link',
	scroll_to_bottom: 'scroll_to_bottom'
} as const;
 
export type AnalyticsEvent = keyof typeof ANALYTICS_EVENTS;
 
export function trackEvent(event: AnalyticsEvent, payload: Record<string, unknown> = {}) {
	if (process.env.NODE_ENV === 'development') {
		console.log('[Analytics]', event, payload);
	}
	window.dataLayer?.push({
		event: ANALYTICS_EVENTS[event],
		...payload
	});
}

🚀 Bonus: How to Roll It Out in the Team

1. Define a list of allowed events (in Notion, Confluence, or code).
2. Extract it to types.ts or events.ts.
3. Enforce via linter or runtime checks.
4. Review event names like public APIs.
5. Sync with analysts and PMs — they should understand it too.

📝 Takeaway

Analytics events are like an API — for your brain.

Naming chaos = mental chaos.
Standardization = clarity, automation, powerful dashboards.

Adopt a naming style. Stick to it.
Never again wonder what that one click event was called.

📊 For more tips like this — read my blog.